Layui快速入门之第八节 表格渲染与属性的使用

目录

一：表格的渲染

API

方法配置渲染

模板配置渲染

静态表格渲染

二：表格的属性 

基础属性

异步属性

返回数据中的特定字段

表头属性

重载

完整重载

仅数据重载 2.7+

获取选中行

设置行选中状态 2.8+

获取当前页接口数据

获取表格缓存数据集

重置尺寸

导出数据

获取配置项 2.8+

设置列显示或隐藏 2.8+

---

一：表格的渲染

API

API	描述
var table = layui.table	获得 table 模块。
table.render(options)	table 组件渲染，核心方法。
table.init(filter, options)	初始化渲染静态表格。
table.reload(id, options, deep)	表格完整重载。
table.reloadData(id, options, deep) 2.7+	表格数据重载。
table.checkStatus(id)	获取选中行相关数据。
table.setRowChecked(id, opts) 2.8+	设置行选中状态。
table.getData(id)	获取当前页所有行表格数据。
table.cache	获取表格缓存数据集（包含特定字段）。
table.resize(id)	重置表格尺寸。
table.exportFile(id, data, opts)	导出表格数据到本地文件。
table.getOptions(id) 2.8+	获取表格实例配置项。
table.hideCol(id, cols) 2.8+	设置表格列的显示隐藏属性。
table.on('event(filter)', callback)	table 相关事件。

渲染

table 提供了以下三种渲染模式，在实际使用时，一般按情况选择其中一种即可。

渲染方式	描述
方法配置渲染	通过 table 组件提供的核心方法 table.render(options) 完成的渲染。推荐
模板配置渲染	通过  标签的 lay-options="{}" 属性定义模板，组件自动对其进行解析并完成渲染。 静态表格渲染 对一段已经包含数据内容的静态表格进行动态化转换，使其具备 table 组件的相关功能。 方法配置渲染 table.render(options); 参数 options : 基础属性配置项。#详见属性 该方法返回当前实例对象，包含可操作当前表格的一些成员方法。 模板配置渲染 在   元素中直接书写 lay-options="{}" 属性，组件将自动对其进行解析并完成渲染。 Title 2.8 之前版本通过 lay-data="{}" 定义属性配置项； 2.8+ 版本推荐采用 lay-options，但同时兼容 lay-data。 静态表格渲染 table.init(filter, options); 参数 filter :  元素对应的 lay-filter 属性值 参数 options : 基础属性配置项。#详见属性 该方法用于将已输出在页面中的静态表格内容转换为动态 table 组件 表格内容 二：表格的属性  属性是指 table 渲染、重载 时的配置选项（options），它本身是一个 object 参数。如：  // 渲染 table.render({ // options elem: '', cols: [[]], // … }); // 重载 table.reload(id, { // options }); 若为模板配置渲染，则 lay-options 或 lay-data 的属性值即为属性的配置选项（： … table 的属性众多，我们大致分为以下几种： 属性类别 描述 基础属性 - 异步属性 用于和异步数据请求相关的基础属性，由于相关属性成员较多，所以单独提取介绍。 表头属性 基础属性 cols 的子属性集。 基础属性 属性名 描述 类型 默认值 elem 绑定原始 table 元素，方法渲染方式必填。 string/DOM - url 发送异步请求的 URL。更多异步相关属性见 : #异步属性 - - cols 表头属性集，通过二维数组定义多级表头。方法渲染时必填。 更多表头属性见 : #表头属性 array - data 直接赋值数据。既适用于只展示一页数据，也能对一段已知数据进行多页展示。该属性与 url 属性只能二选一。 array - id 设定实例唯一索引，以便用于其他方法对 table 实例进行相关操作。若该属性未设置，则默认从 elem 属性绑定的原始 table 元素中的 id 属性值中获取。 string - toolbar 开启表格头部工具栏。支持以下几种值写法： toolbar: '#template-id' 自定义工具栏模板选择器 toolbar: ' xxx  直接传入模板字符 toolbar: true 仅开启工具栏右侧，不显示左侧模板 toolbar: 'default' 开启工具栏并显示默认模板 string boolean false defaultToolbar 设置头部工具栏右侧图标。值是一个数组，可选成员有: filter,exports,print （分别代表：筛选图标、导出图标、打印图标）。图标可根据数组值的顺序排列，如：defaultToolbar: ['filter','print','exports'] 支持自定义图标及事件，用法详见示例: #综合演示 array - width 设置容器宽度，默认自适应。 number - height 设置表格容器高度，默认自适应。其他可选值的规则如下： height: 315 设置固定高度 height: 'full-30' 设置自适应高度。这是一个特定的语法格式：full 表示铺满；后面的数字表示当前 table 之外的元素占用的高度，如：表格头部到页面最顶部加表格底部距离页面最底部的“距离和” height: '#id-30' 设置相对父元素的高度自适应，其中 #id 即父元素的 ID 选择器，其计算原理和上述 full 相同。 number string - maxHeight 2.8+ 设置表格容器的最大高度，设置该属性后，height 属性将被认定为默认的自适应值。 number - cellMinWidth 设置所有普通单元格的最小宽度，一般用于列宽自动分配的情况。其优先级低于表头属性中的 minWidth number 60 cellMaxWidth 2.8+ 设置所有普通单元格的最大宽度。其优先级低于表头属性中的 maxWidth number - lineStyle 2.7+ 用于定义表格的多行样式，如每行的高度等。该参数一旦设置，单元格将会开启多行模式，且鼠标 hover 时会通过显示滚动条的方式查看到更多内容。 请按实际场景使用。 示例：lineStyle: 'height: 95px;' string - className 2.7+ 用于给表格主容器追加 css 类名，以便更好地扩展表格样式 string - css 2.7+ 用于给当前表格主容器直接设定 css 样式，样式值只会对所在容器有效，不会影响其他表格实例。如：css: '.layui-table-page{text-align: right;}' string - escape 2.6+ 是否开启对内容的编码（转义 html） boolean true totalRow 是否开启合计行区域 string false page 用于开启分页。 支持传入 laypage 组件的基础属性（jump,elem 除外） boolean object false pagebar 2.7+ 用于开启分页区域的自定义模板，用法同 toolbar 属性。 string - limit 每页显示的条数。值需对应 limits 参数的选项。优先级低于 page 属性中的 limit 属性。 number 10 limits 每页条数的选择项。 array [10,…,90] loading 是否显示加载条。若为 false，则在切换分页时，不会出现加载条。必须设置了 url 属性才生效。 boolean true scrollPos 2.7+ 用于设置重载数据或切换分页时的滚动条位置状态。可选值： fixed 重载数据时，保持滚动条位置不变 reset 重载数据时，滚动条位置恢复置顶 default 默认方式，无需设置。即重载数据或切换分页时，纵向滚动条置顶，横向滚动条位置不变。 string - editTrigger 2.7+ 是用于设定单元格编辑的事件触发方式。如双击: dblclick string click title 定义 table 的大标题（在文件导出等地方会用到） string - text 自定义文本，如空数据时的异常提示等。 object 查看默认值 autoSort 是否由组件自动进行前端排序。若为 false，则需自主排序，即由后端直接返回排序好的数据。#详细用法 boolean true initSort 初始排序状态。用于在数据表格渲染完毕时，按某个字段排序显示。它接受一个 object 类型的值，包含属性有： field 排序字段。对应 cols 设定的各字段名 type 排序方式。可选值 : 'asc','desc',null，即：升序、降序、默认 initSort: { field: 'id', // 按 id 字段排序 type: 'desc' // 降序排序 } object - skin 设置表格边框风格。可选值：grid|line|row|nob string grid size 设置表格其他尺寸。可选值：sm|md|lg string md even 是否开启隔行背景。 string false before 2.7+ 数据渲染之前的回调函数。 function - done 数据渲染完毕的回调函数。返回的参数如下： table.render({ done: function(res, curr, count){ console.log(res); // 得到当前渲染的数据 console.log(curr); // 得到当前页码 console.log(count); // 得到数据总量 } // … // 其它属性 }); function - error 2.6+ 数据请求失败的回调函数。返回两个参数：错误对象、内容。 function - 异步属性 异步属性本质也是基础属性，当开启 url 属性时才有效，由于相关属性成员较多，所以单独提取介绍。 属性名 描述 url 发送异步请求的 URL。默认会自动传递两个参数：?page=1&limit=30（该参数可通过 request 属性自定义） page 代表当前页码、limit 代表每页数据条数。 method 请求的方式，默认：get where 请求的其他参数。如：where: {token: 'sasasas', id: 123} headers 请求的数据头参数。如：headers: {token: 'sasasas'} contentType 请求的内容编码类型。若要发送 json 内容，可设置： contentType: 'application/json' dataType 2.7+ 请求的数据类型，默认 json。 jsonpCallback 2.7+ 设置当 dataType: 'jsonp' 时的回调函数名。 request 用于对默认的分页相关的请求参数 page,limit 重新设定名称。如： request: { pageName: 'curr', // 页码的参数名称，默认：page limitName: 'nums' // 每页数据条数的参数名，默认：limit } 那么请求数据时的参数将会变为 ?curr=1&nums=30 parseData 数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式： { "code": 0, "msg": "", "count": 1000, "data": [{}, {}] } 很多时候，您接口返回的数据格式并不一定都符合 table 默认规定的格式，比如： { "status": 0, "message": "", "total": 180, "data": { "item": [{}, {}] } } 此时我们可以借助 parseData 回调函数将数据解析并转换为默认规定的格式： table.render({ elem: '', url: '', parseData: function(res){ // res 即为原始返回的数据 return { "code": res.status, // 解析接口状态 "msg": res.message, // 解析提示文本 "count": res.total, // 解析数据长度 "data": res.data.item // 解析数据列表 }; }, // … //其他参数 }); 该函数非常实用 返回数据中的特定字段 在返回的数据中，允许规定某些特定字段，以便 table 组件进行相应的特定解析。 特定字段名 描述 读写状态 LAY_CHECKED 当前行的选中状态 可读可写 LAY_DISABLED 当前行是否禁止选择 可读可写 LAY_INDEX 当前行下标。每页重新从零开始计算 只读 LAY_NUM 当前行序号 只读 LAY_COL 当前列的表头属性配置项 只读 示例一: 在返回的数据中设置特定字段： { "code": 0, "count": 1000, "data": [{},{ LAY_DISABLED: true }] } 示例二: 在模板中读取特定字段示例： 表头属性 表头属性是基础属性 cols 的子集，其使用频率甚至超过基础属性本身。 属性名 描述 类型 默认值 field 设置字段名。通常是表格数据列的唯一标识 string - title 设置列的标题。 string - fieldTitle 2.8+ 设置列的字段标题。该属性在筛选列和导出场景中优先级高于 title 属性 string - width 设置列宽。若不填写，则自动分配；若填写，则支持值为：数字、百分比。如： width: 200 / width: '30%' number/string - minWidth 设置当前列的最小宽度，一般用于列宽自动分配的情况。其优先级高于基础属性中的 cellMinWidth number 60 maxWidth 2.8+ 设置当前列的最大宽度。其优先级高于基础属性中的 cellMaxWidth number - type 设置列类型。可选值有： normal 常规列，无需设定 checkbox 复选框列 radio 单选框列 numbers 序号列 space 空列 string normal LAY_CHECKED 设置全选状态，当列设置 type: 'checkbox' 时才有效。 boolean false fixed 设置固定列，即不跟随 table 横向滚动条而滚动。可选值有： left 固定在左 right 固定在右 string - templet 设置列的自定义模板，核心属性。模板遵循 laytpl 组件语法。 templet 提供了三种使用方式，选择任一用法即可： 设置模版选择器 table.render({ cols: [[ {field: 'title', templet: '#TPL-demo-title'} // … ]], // … }); 设置模板内容 该方式必须在内容中包裹一层  ，否则无法读取模板。 table.render({ cols: [[ {field: 'title', templet: ' {{= d.title }} '} // … ]], // … }); 设置模板函数 函数将返回一个 d 参数，包含当前行数据及特定的额外字段。 table.render({ cols: [[ {field: 'title', templet: function(d){ console.log(d); // 得到当前行数据 console.log(this); // 得到表头当前列配置项 console.log(d.LAY_NUM); // 得到序号。或其他特定字段 // 返回模板内容 return ''+ d.title +'' }} // … ]], // … }); exportTemplet 2.6.9+ 设置表格导出时的模板，用法同 templet 属性。当 templet 指向的模板内容较复杂时建议使用，如下以模板存在 select 元素为例： exportTemplet: function(d, obj){ // 当前 td var td = obj.td(this.field); // 返回 select 选中值 return td.find('select').val(); } string function - totalRow 是否开启该列的自动合计功能。 前端合计 totalRow: true // 开启合计行，并默认对当前所有行数据进行前端合计 后端合计 前端合计的数据有限，因此常常需要后端直接返回合计行结果，此时将优先读取后端的合计行返回结果，其格式如下： { "code": 0, "totalRow": { "score": "777", "experience": "999" }, "data": [{}, {}], "msg": "", "count": 1000 } 如上，在 totalRow 中返回所需统计的列字段名和值即可。 totalRow 字段同样可以通过 parseData 回调来解析成为 table 组件所规定的数据格式。 合计行模板 totalRow: '{{= d.TOTAL_NUMS }} 单位' // 还比如只取整：'{{= parseInt(d.TOTAL_NUMS) }}' boolean string false edit 用于对列所在的单元格开启编辑功能。可选值有： edit: 'text' 单行输入模式 edit: 'textarea' 多行输入模式 2.7+ 函数写法 2.7+ edit: function(d){ // d 即为当前行数据，此时可根据行相关字段来开启该行是否编辑的权限 if(d.editable){ // editable 为任意字段名 return 'text'; // 编辑模式 } } string function false hide 是否初始隐藏列 boolean false escape 是否对当前列进行内容编码（转义 html），优先级大于基础属性中的 escape。 boolean true sort 是否开启列的排序功能。 注意：不推荐对值同时存在“数字和普通字符”的列开启排序，因为会进入字典序排序计算中，如：'张三' > '2' > '100'，这可能并不是你想要的结果，但字典序排列采用的是 ASCII 码比对。 boolean false unresize 是否禁用拖拽列宽。默认情况下会根据列类型 type 属性来决定是否禁用，如复选框列，会自动禁用。而其它普通列，默认允许拖拽列宽，当然你也可以设置 true 来禁用该功能。 boolean false event 自定义单元格点击事件名，以便在 单元格工具事件 中完成对该单元格的事件处理。 string - style 自定义单元格样式。可传入任意的 CSS 内容，如：style: 'font-size: 13px; color: red;' string - align 单元格排列方式。可选值有：left | center | right string left colspan 单元格所占列数。一般用于多级表头 number 1 rowspan 单元格所占行数。一般用于多级表头 number 1 重载 即对一段已经渲染好的表格重新设置属性并渲染，可分为以下几种重载方式： 重载方式 API 完整重载 table.reload(id, options, deep) 仅数据重载 table.reloadData(id, options, deep) 重载的使用方式完全相同，区别只是在于参与重载时的属性差异及其对应的效果差异。一般按照实际需求选择使用。 完整重载 table.reload(id, options, deep); 参数 id : table 渲染时的 id 属性值 参数 options : 为基础属性配置项 参数 deep 2.6+ : 是否采用深度重载（即重载时始终携带初始时及上一次重载时的参数），默认 false。 2.6 之前版本的 table.reload() 方法兼容性说明 该方法用于对表格的视图和数据在内的全部重载，所有属性均会参与到重载中，对应的表格会有一个直观的刷新效果。 // 渲染 table.render({ elem: '', // 绑定元素选择器 id: 'test', // 自定义 id 索引 // 其他属性 … }); // 完整重载 - 所有属性属性(options)均可参与到重载中 table.reload('test', { where: { // 传递数据异步请求时携带的字段 aaa: '111', bbb: '222' //… }, height: 1000 // 重设高度 }); 仅数据重载 2.7+ table.reloadData(id, options, deep); 参数同 table.reload(id, options, deep) 参数 该方法用于对表格的数据重载，与数据无关的属性不会参与到重载中。因此若只是更新数据，该方法可大幅提升体验。 // 渲染 table.render({ elem: '', // 绑定元素选择器 id: 'test', // 自定义 id 索引 // 其他属性 … }); // 数据重载 - 仅与数据相关的属性(options)能参与到重载中 table.reloadData('test', { where: {}, // 数据异步请求时携带的字段集 --- 属性设置有效，因属于数据相关属性 scrollPos: true, // 设定重载数据或切换分页时的滚动条的位置状态 --- 属性设置有效 // … height: 2000 // 高度 --- 属性设置无效，因不属于数据相关属性 }); 获取选中行 table.checkStatus(id); 参数 id : table 渲染时的 id 属性值 该方法用于获取表格当前选中行相关数据 // 渲染 table.render({ elem: '', // 绑定元素选择器 id: 'test', // 自定义 id 索引 // 其他属性 … }); // 获取选中行相关数据 var tableStatus = table.checkStatus('test'); console.log(checkStatus.data) // 选中行的数据 console.log(checkStatus.data.length) // 选中行数量，可作为是否有选中行的条件 console.log(checkStatus.isAll ) // 表格是否全选 设置行选中状态 2.8+ table.setRowChecked(id, opts); 参数 id : table 渲染时的 id 属性值 参数 opts : 设置行选中时的可选属性，详见下表 opts 描述 类型 默认值 type 选中方式。可选值: checkbox,radio string checkbox index 选中行的下标。即数据的所在数组下标（0 开头）。 可设置 all 表示全选。 number string - checked 选中状态值。 若为 false 可取消选中。 boolean true selectedStyle 是否仅设置样式状态。若为 true 则只标注选中样式，不对数据中的 LAY_CHECKED 属性赋值。 boolean false 该方法用于设置行的选中样式及相关的特定属性值 LAY_CHECKED。 // 渲染 table.render({ elem: '', // 绑定元素选择器 id: 'test', // 自定义 id 索引 // 其他属性 … }); // 设置某行选中 table.setRowChecked('test', { index: 0, // 选中行的下标。 0 表示第一行 }); // 取消选中行 table.setRowChecked('test', { index: 'all', // 所有行 checked: false }); 获取当前页接口数据 table.getData(id); 参数 id : table 渲染时的 id 属性值 该方法用于获取表格当前页的数据，它对应的是接口返回的原始数据，不包含 table 组件内部的特定字段。 // 渲染 table.render({ elem: '', // 绑定元素选择器 id: 'test', // 自定义 id 索引 // 其他属性 … }); // 获取当前页接口数据 var data = table.getData('test'); console.log(data); 获取表格缓存数据集 var tableCache = table.cache; table.cache 是一段存储当前页表格所有实例的当前页的临时数据，通过 id 作为索引，它包含接口返回的原始数据和组件内部的特定字段。 使用该静态属性可对表格数据进行读写操作。 // 渲染 table.render({ elem: '', // 绑定元素选择器 id: 'test', // 自定义 id 索引 // 其他属性 … }); // 获取对应 table 的临时数据 var thisCache = table.cache['test'] || {}; // 变更对应 table 的临时数据中的某个字段值 thisCache.fieldName = 123; 重置尺寸 table.resize(id); 参数 id : table 渲染时的 id 属性值 该方法用于重置表格尺寸和结构，其内部完成了固定列高度平铺、动态分配列宽、容器滚动条宽高补丁 等适配。它一般用于修复特殊情况下导致的列宽适配异常（如浏览器窗口尺寸改变导致的表格父容器宽度变化），以保证表格尺寸依旧能友好展示。 // 渲染 table.render({ elem: '', // 绑定元素选择器 id: 'test', // 自定义 id 索引 // 其他属性 … }); // 重置对应 table 的尺寸，一般写在表格外部容器宽高发生变化后的段落 table.resize('test'); 导出数据 table.exportFile(id, data, opts); 参数 id : table 渲染时的 id 或 要导出的数据表头（当 id 为 array 类型时）。 参数 data : 要导出的自定义数据，参数可选。 参数 opts 2.7+: 导出数据时的属性可选项，支持： type,title。 该方法用于外部导出对应 table 的数据和任意自定义数据。 // 渲染 table.render({ elem: '', // 绑定元素选择器 id: 'test', // 自定义 id 索引 // 其他属性 … }); // 外部导出对应 table 的数据 table.exportFile('test'); // 导出自定义数据 table.exportFile(['名字','性别','年龄'], [ ['张三','男','20'], ['李四','女','18'], ['王五','女','19'] ], { type: 'csv', // 导出的文件格式，支持: csv,xls title: '导出的文件标题' }); 获取配置项 2.8+ table.getOptions(id); 参数 id : table 渲染时的 id 属性值 该方法用于外部获取对应 table 实例的属性配置项。 // 渲染 table.render({ elem: '', // 绑定元素选择器 id: 'test', // 自定义 id 索引 // 其他属性 … }); // 获取配置项 var thisOptions = table.getOptions('test'); console.log(thisOptions); 设置列显示或隐藏 2.8+ table.hideCol(id, cols); 参数 id : table 渲染时的 id 属性值 参数 cols : 设置列（表头）显示或隐藏状态 该方法用于外部设置对应 table 列的显示与隐藏状态。 // 渲染 table.render({ elem: '', // 绑定元素选择器 id: 'test', // 自定义 id 索引 // 其他属性 … }); // 设置对应列的显示或隐藏 table.hideCol('test', { field: 'title', // 对应表头的 field 属性值 hide: true // `true` or `false` }); 你可能感兴趣的:(Layui,layui,前端,javascript) Long类型前后端数据不一致 igotyback 前端 响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问 DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业 ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链 加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景 ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端 Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线 node.js学习 小猿L node.jsnode.js学习vim node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行 springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言 这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一 JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript 在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数 博客网站制作教程 2401_85194651 javamaven 首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言 在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记 最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl 补充元象二面 Redstone Monstrosity 前端面试 1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重 微信小程序开发注意事项 jun778895 微信小程序小程序 微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂 切换淘宝最新npm镜像源是 hai40587 npm前端node.js 切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库 字节二面 Redstone Monstrosity 前端面试 1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文 前端代码上传文件 余生逆风飞翔 前端javascript开发语言 点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app 第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。 高性能javascript--算法和流程控制 海淀萌狗 -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i 360前端星计划-动画可以这么玩 马小蜗 动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能 Vue + Express实现一个表单提交 九旬大爷的梦 最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript 我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh Nginx从入门到实践(三) 听你讲故事啊 动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构 Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin 前端知识点 ZhangTao_zata 前端javascriptcss 下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage 第三十一节:Vue路由:前端路由vs后端路由的了解 曹老师 1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访 华雁智科前端面试题 因为奋斗超太帅啦 前端笔试面试问题整理javascript开发语言ecmascript 1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l 如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享 数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi 分布式锁和spring事务管理 暴躁的鱼 锁及事务分布式springjava 最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试 边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言 前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi 桌面上有多个球在同时运动，怎么实现球之间不交叉，即碰撞？ 换个号韩国红果果 html小球碰撞 稍微想了一下，然后解决了很多bug，最后终于把它实现了。其实原理很简单。在每改变一个小球的x y坐标后，遍历整个在dom树中的其他小球，看一下它们与当前小球的距离是否小于球半径的两倍？若小于说明下一次绘制该小球（设为a）前要把他的方向变为原来相反方向（与a要碰撞的小球设为b），即假如当前小球的距离小于球半径的两倍的话，马上改变当前小球方向。那么下一次绘制也是先绘制b，再绘制a，由于a的方向已经改变 《高性能HTML5》读后整理的Web性能优化内容 白糖_ html5 读后感         先说说《高性能HTML5》这本书的读后感吧，个人觉得这本书前两章跟书的标题完全搭不上关系，或者说只能算是讲解了“高性能”这三个字，HTML5完全不见踪影。个人觉得作者应该首先把HTML5的大菜拿出来讲一讲，再去分析性能优化的内容，这样才会有吸引力。因为只是在线试读，没有机会看后面的内容，所以不胡乱评价了。   [JShop]Spring MVC的RequestContextHolder使用误区 dinguangx jeeshop商城系统jshop电商系统     在spring mvc中，为了随时都能取到当前请求的request对象，可以通过RequestContextHolder的静态方法getRequestAttributes()获取Request相关的变量，如request, response等。         在jshop中，对RequestContextHolder的 算法之时间复杂度 周凡杨 java算法时间复杂度效率       在 计算机科学 中， 算法 的时间复杂度是一个 函数 ，它定量描述了该算法的运行时间。这是一个关于代表算法输入值的 字符串 的长度的函数。时间复杂度常用 大O符号 表述，不包括这个函数的低阶项和首项系数。使用这种方式时，时间复杂度可被称为是 渐近 的，它考察当输入值大小趋近无穷时的情况。 这样用大写O()来体现算法时间复杂度的记法， Java事务处理 g21121 java 一、什么是Java事务 通常的观念认为，事务仅与数据库相关。 事务必须服从ISO/IEC所制定的ACID原则。ACID是原子性（atomicity）、一致性（consistency）、隔离性（isolation）和持久性（durability）的缩写。事务的原子性表示事务执行过程中的任何失败都将导致事务所做的任何修改失效。一致性表示当事务执行失败时，所有被该事务影响的数据都应该恢复到事务执行前的状 Linux awk命令详解 510888780 linux 一.  AWK 说明   awk是一种编程语言，用于在linux/unix下对文本和数据进行处理。数据可以来自标准输入、一个或多个文件，或其它命令的输出。它支持用户自定义函数和动态正则表达式等先进功能，是linux/unix下的一个强大编程工具。它在命令行中使用，但更多是作为脚本来使用。    awk的处理文本和数据的方式：它逐行扫描文件，从第一行到 android permission 布衣凌宇 Permission <uses-permission android:name="android.permission.ACCESS_CHECKIN_PROPERTIES" ></uses-permission>允许读写访问"properties"表在checkin数据库中，改值可以修改上传 <uses-permission android:na Oracle和谷歌Java Android官司将推迟 aijuans javaoracle 北京时间 10 月 7 日，据国外媒体报道，Oracle 和谷歌之间一场等待已久的官司可能会推迟至 10 月 17 日以后进行，这场官司的内容是 Android 操作系统所谓的 Java 专利权之争。本案法官 William Alsup 称根据专利权专家 Florian Mueller 的预测，谷歌 Oracle 案很可能会被推迟。　　该案中的第二波辩护被安排在 10 月 17 日出庭，从目前看来 linux shell 常用命令 antlove linuxshellcommand grep [options] [regex] [files] /var/root # grep -n "o" * hello.c:1:/* This C source can be compiled with: Java解析XML配置数据库连接(DOM技术连接 SAX技术连接) 百合不是茶 sax技术Java解析xml文档dom技术XML配置数据库连接     XML配置数据库文件的连接其实是个很简单的问题,为什么到现在才写出来主要是昨天在网上看了别人写的,然后一直陷入其中,最后发现不能自拔 所以今天决定自己完成 ,,,,现将代码与思路贴出来供大家一起学习   XML配置数据库的连接主要技术点的博客; JDBC编程 : JDBC连接数据库 DOM解析XML:  DOM解析XML文件 SA underscore.js 学习（二） bijian1013 JavaScriptunderscore         Array Functions 所有数组函数对参数对象一样适用。1.first   _.first(array, [n])   别名: head, take       返回array的第一个元素，设置了参数n，就 plSql介绍 bijian1013 oracle数据库plsql /* * PL/SQL 程序设计学习笔记 * 学习plSql介绍.pdf * 时间：2010-10-05 */ --创建DEPT表 create table DEPT ( DEPTNO NUMBER(10), DNAME NVARCHAR2(255), LOC NVARCHAR2(255) ) delete dept; select 【Nginx一】Nginx安装与总体介绍 bit1129 nginx 启动、停止、重新加载Nginx nginx 启动Nginx服务器，不需要任何参数u nginx -s stop 快速(强制)关系Nginx服务器 nginx -s quit 优雅的关闭Nginx服务器 nginx -s reload 重新加载Nginx服务器的配置文件 nginx -s reopen 重新打开Nginx日志文件   spring mvc开发中浏览器兼容的奇怪问题 bitray jqueryAjaxspringMVC浏览器上传文件     最近个人开发一个小的OA项目,属于复习阶段.使用的技术主要是spring mvc作为前端框架,mybatis作为数据库持久化技术.前台使用jquery和一些jquery的插件.     在开发到中间阶段时候发现自己好像忽略了一个小问题,整个项目一直在firefox下测试,没有在IE下测试,不确定是否会出现兼容问题.由于jquer Lua的io库函数列表 ronin47 lua io 1、io表调用方式：使用io表，io.open将返回指定文件的描述，并且所有的操作将围绕这个文件描述 　　io表同样提供三种预定义的文件描述io.stdin,io.stdout,io.stderr 　　2、文件句柄直接调用方式,即使用file:XXX()函数方式进行操作,其中file为io.open()返回的文件句柄 　　多数I/O函数调用失败时返回nil加错误信息,有些函数成功时返回nil java-26-左旋转字符串 bylijinnan java public class LeftRotateString { /** * Q 26 左旋转字符串 * 题目：定义字符串的左旋转操作：把字符串前面的若干个字符移动到字符串的尾部。 * 如把字符串abcdef左旋转2位得到字符串cdefab。 * 请实现字符串左旋转的函数。要求时间对长度为n的字符串操作的复杂度为O(n)，辅助内存为O(1)。 */ pu 《vi中的替换艺术》-linux命令五分钟系列之十一 cfyme linux命令 vi方面的内容不知道分类到哪里好，就放到《Linux命令五分钟系列》里吧！ 今天编程，关于栈的一个小例子，其间我需要把”S.”替换为”S->”(替换不包括双引号)。 其实这个不难，不过我觉得应该总结一下vi里的替换技术了，以备以后查阅。   1 所有替换方案都要在冒号“:”状态下书写。 2 如果想将abc替换为xyz，那么就这样 :s/abc/xyz/ 不过要特别 [轨道与计算]新的并行计算架构 comsci 并行计算      我在进行流程引擎循环反馈试验的过程中，发现一个有趣的事情。。。如果我们在流程图的每个节点中嵌入一个双向循环代码段，而整个流程中又充满着很多并行路由，每个并行路由中又包含着一些并行节点，那么当整个流程图开始循环反馈过程的时候，这个流程图的运行过程是否变成一个并行计算的架构呢？       重复执行某段代码 dai_lm android 用handler就可以了 private Handler handler = new Handler(); private Runnable runnable = new Runnable() { public void run() { update(); handler.postDelayed(this, 5000); } }; 开始计时 h Java实现堆栈（list实现） datageek 数据结构——堆栈 public interface IStack<T> { //元素出栈，并返回出栈元素 public T pop(); //元素入栈 public void push(T element); //获取栈顶元素 public T peek(); //判断栈是否为空 public boolean isEmpty 四大备份MySql数据库方法及可能遇到的问题 dcj3sjt126com DBbackup 一：通过备份王等软件进行备份前台进不去？ 用备份王等软件进行备份是大多老站长的选择，这种方法方便快捷，只要上传备份软件到空间一步步操作就可以，但是许多刚接触备份王软件的客用户来说还原后会出现一个问题：因为新老空间数据库用户名和密码不统一，网站文件打包过来后因没有修改连接文件，还原数据库是好了，可是前台会提示数据库连接错误，网站从而出现打不开的情况。 解决方法：学会修改网站配置文件，大多是由co github做webhooks：[1]钩子触发是否成功测试 dcj3sjt126com githubgitwebhook 转自: http://jingyan.baidu.com/article/5d6edee228c88899ebdeec47.html github和svn一样有钩子的功能，而且更加强大。例如我做的是最常见的push操作触发的钩子操作，则每次更新之后的钩子操作记录都会在github的控制板可以看到！ 工具/原料 github 方法/步骤 ">的作用" target="_blank">JSP中的作用 蕃薯耀 JSP中<base href="<%=basePath%>">的作用 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> linux下SAMBA服务安装与配置 hanqunfeng linux 局域网使用的文件共享服务。 一.安装包： rpm -qa | grep samba samba-3.6.9-151.el6.x86_64 samba-common-3.6.9-151.el6.x86_64 samba-winbind-3.6.9-151.el6.x86_64 samba-client-3.6.9-151.el6.x86_64 samba-winbind-clients guava cache IXHONG cache 缓存，在我们日常开发中是必不可少的一种解决性能问题的方法。简单的说，cache 就是为了提升系统性能而开辟的一块内存空间。 　　缓存的主要作用是暂时在内存中保存业务系统的数据处理结果，并且等待下次访问使用。在日常开发的很多场合，由于受限于硬盘IO的性能或者我们自身业务系统的数据处理和获取可能非常费时，当我们发现我们的系统这个数据请求量很大的时候，频繁的IO和频繁的逻辑处理会导致硬盘和CPU资源的 Query的开始--全局变量,noconflict和兼容各种js的初始化方法 kvhur JavaScriptjquerycss 这个是整个jQuery代码的开始，里面包含了对不同环境的js进行的处理，例如普通环境，Nodejs，和requiredJs的处理方法。 还有jQuery生成$, jQuery全局变量的代码和noConflict代码详解  完整资源： http://www.gbtags.com/gb/share/5640.htm jQuery 源码：   ( 美国人的福利和中国人的储蓄 nannan408    今天看了篇文章，震动很大，说的是美国的福利。    美国医院的无偿入院真的是个好措施。小小的改善，对于社会是大大的信心。小孩，税费等，政府不收反补，真的体现了人文主义。    美国这么高的社会保障会不会使人变懒？答案是否定的。正因为政府解决了后顾之忧，人们才得以倾尽精力去做一些有创造力，更造福社会的事情，这竟成了美国社会思想、人 N阶行列式计算(JAVA) qiuwanchi N阶行列式计算 package gaodai; import java.util.List; /** * N阶行列式计算 * @author 邱万迟 * */ public class DeterminantCalculation { public DeterminantCalculation(List<List<Double>> determina C语言算法之打渔晒网问题 qiufeihu c算法 如果一个渔夫从2011年1月1日开始每三天打一次渔，两天晒一次网，编程实现当输入2011年1月1日以后任意一天，输出该渔夫是在打渔还是在晒网。 代码如下：   #include <stdio.h> int leap(int a) /*自定义函数leap()用来指定输入的年份是否为闰年*/ { if((a%4 == 0 && a%100 != 0 XML中DOCTYPE字段的解析 wyzuomumu xml DTD声明始终以!DOCTYPE开头,空一格后跟着文档根元素的名称,如果是内部DTD,则再空一格出现[],在中括号中是文档类型定义的内容. 而对于外部DTD,则又分为私有DTD与公共DTD,私有DTD使用SYSTEM表示,接着是外部DTD的URL. 而公共DTD则使用PUBLIC,接着是DTD公共名称,接着是DTD的URL.   私有DTD <!DOCTYPErootSYST 按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他 首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉 版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.