标签的 lay-options="{}"
属性定义模板,组件自动对其进行解析并完成渲染。
静态表格渲染
对一段已经包含数据内容的静态表格进行动态化转换,使其具备 table 组件的相关功能。
方法配置渲染
table.render(options);
参数 options
: 基础属性配置项。#详见属性
该方法返回当前实例对象,包含可操作当前表格的一些成员方法。
模板配置渲染
在 元素中直接书写 lay-options="{}"
属性,组件将自动对其进行解析并完成渲染。
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
}]
}
示例二: 在模板中读取特定字段示例:
当前行下标: {{= d.LAY_INDEX }}
当前列的某个表头属性: {{= d.LAY_COL.field }}
表头属性
表头属性是基础属性 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 横向滚动条而滚动。可选值有:
string
-
templet
设置列的自定义模板,核心属性。模板遵循 laytpl 组件语法。
templet
提供了三种使用方式,选择任一用法即可:
{{= d.title }}
table.render({
cols: [[
{field: 'title', templet: '#TPL-demo-title'}
// …
]],
// …
});
该方式必须在内容中包裹一层
,否则无法读取模板。
table.render({
cols: [[
{field: 'title', templet: ''}
// …
]],
// …
});
函数将返回一个 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);
该方法用于对表格的视图和数据在内的全部重载,所有属性均会参与到重载中,对应的表格会有一个直观的刷新效果。
// 渲染
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)
SpringBoot3使用Swagger3
m0_74825260
java
SpringBoot3使用Swagger3项目中的后端接口进行简单的前端展示一、依赖引入二、快速启动1.在application.yml中配置2.或者properties文件,则配置3.启动项目访问swagger三、使用注解标注接口Swagger配置文件Swagger注解迁移举例五种常用@Api@ApiOperation@ApiImplicitParam@ApiModel@ApiModelProp
深入理解 JavaScript 引擎与消息队列的底层原理
D.eL
javascript 开发语言 ecmascript
深入理解JavaScript引擎与消息队列的底层原理JavaScript是现代Web开发中最为重要的编程语言之一,它的运行和执行方式常常是开发者关注的重点。为了更好地理解JavaScript的执行过程,我们需要深入探索JavaScript引擎的工作原理,尤其是事件循环(EventLoop)、消息队列(MessageQueue)以及它们如何协同工作来处理异步任务。在这篇文章中,我们将深入分析Java
JavaScript详解十三 ——节点操作
遇见~未来
JavaScript JavaScript详解 javascript 开发语言 ecmascript
目录节点操作1、创建节点2、创建文本3、添加节点(先有父母才能生孩子)4、替换节点5、删除节点6、克隆节点7、创建节点另外几种方式(1)、element.innerHTML(2)、element.innerText(3)、document.write()(4)、insertAdjacentHTML()节点操作1、创建节点docment.createElement('节点')参数:标签名字符串这些元
Microi 吾码与 JavaScript:前端低代码平台的强大组合
小周不想卷
javascript
目录一、引言二、Microi吾码概述三、JavaScript在Microi吾码前端开发中的应用(一)前端V8引擎与JavaScript(二)接口引擎与JavaScript四、JavaScript在Microi吾码后端开发中的协同(一)与C#后端框架的交互(二)利用gRPC实现跨语言通信五、Microi吾码中JavaScript与数据库的交互六、Microi吾码中JavaScript在表单与模板引擎
JavaScript进阶
不断学习的码农
javascript javascript 前端 vue.js
一.同步和异步程序同步程序就是从头到尾一一执行异步是同步程序执行完成之后才来执行异步程序js是单线程的一个任务执行完成之后才会执行另外一个二.js的内存结构栈内存和堆内存js分引用类型和原始类型原始类型存储在栈内存中引用类型存储在堆内存中三.什么是闭包闭包就是函数嵌套函数,内部的函数就是闭包正常情况下函数执行完成之后,内部的变量就会被销毁(释放内存)闭包:内部函数没有执行完成,外部函数变量不会被销
一款前端开源的,在线电子表格univer介绍
Univer是一款颠覆性的在线电子表格解决方案,为数据输入和协作带来了全新的方式。作为一款开源、免费的平台,Univer专注于在线电子表格管理,为用户提供了处理数据、创建动态报告和高效协作的无缝体验。具体可以看他们的官网univer.ai.Excel作为广受欢迎的电子表格软件,Univer的兼容性和功能性使其成为Excel爱好者的理想选择。用户可以体验到与Excel相关的功能,并且能够轻松使用带公
Axios封装一款前端项目网络请求实用插件
smart_ljh
前端 vue.js vuejs axios 网络
前端项目开发非常经典的插件axios大家都很熟悉,它是一个Promise网络请求库,可以用于浏览器和node.js支持的项目中。像一直以来比较火的Vue.js开发的几乎所有项目网络请求用的都是axios。那么我们在实际的项目中,有时候为了便于维护、请求头信息统一处理、统一拦截器设置以及响应数据统一处理,需要在项目中针对axios封装一个网络请求插件。接下来就介绍一下针对以上这些输出具体的解决方案和
JS宏进阶:Map与Object
jackispy
JS宏进阶 javascript 开发语言 ecmascript
Object是JavaScript中最基本的数据类型之一,用于创建对象实例。newObject()是创建空对象的一种常见方式。而Map只是一种用于存储键值对的数据结构。相对于Object而言,他没有原型(也就是不能通过原型链的方式添加方法),但也存在自身的优势,某些场景,newMap可能比newObject更好用。下面是其内置方法的详细介绍:一、newMap1、创建新的Map对象,只能使用newM
流量分析利器arkime的学习之路(二)---API接口
胖哥王老师
流量分析 学习笔记 网络协议 学习 arkime API
前文回忆《流量分析利器arkime的学习之路(一)---安装部署》概述注意点Arkime对所有API调用都使用摘要身份验证,因此请确保在库或curl命令中启用摘要身份验证。学习如何进行API调用的最简单方法是打开浏览器的javascript控制台,观察ArkimeUI正在进行的调用,它使用所有相同的API。注意:许多API端点都需要一个数据库字段名称,这与您在搜索表达式中使用的名称不同。查看数据库
解锁新技能:Windows Forms与ASP.NET API的梦幻联动
步、步、为营
windows asp.net 后端
一、开篇引入嘿,各位开发小伙伴们!在日常开发的“战场”上,我们常常会遭遇一个棘手的难题:如何让前端应用与后端服务实现高效且稳定的交互呢?特别是在使用WindowsForms构建桌面应用程序时,这个问题尤为突出。想象一下,你精心打造了一个功能强大的WindowsForms应用,满心期待它能与后端的ASP.NETAPI顺畅“对话”,实现数据的实时获取与更新,为用户带来绝佳的体验。但现实却可能给你泼一盆
云原生前端开发:打造现代化高性能的用户体验
大梦百万秋
知识学爆 状态模式
引言:前端开发的新风向在过去的几年中,前端开发领域经历了快速的演变,从早期的静态网页到如今复杂的单页应用(SPA),再到微前端架构和渐进式Web应用(PWA),前端技术一直处于技术变革的中心。而随着云原生的理念在后端开发中逐渐成熟,前端开发也迎来了新的机遇和挑战。云原生前端开发意味着应用的架构设计和开发方式需要更加注重现代化的开发工具链、灵活性、性能优化和可扩展性。本文将从技术角度讨论如何运用云原
2024最新版JavaScript逆向爬虫教程-------基础篇之JavaScript混淆原理
Amo Xiang
JS逆向 爬虫 开发语言 js逆向
目录一、常量的混淆原理1.1对象属性的两种访问方式1.2十六进制字符串1.3Unicode字符串1.4字符串的ASCII码混淆1.5字符串常量加密1.6数值常量加密二、增加JS逆向者的工作量2.1数组混淆2.2数组乱序2.3花指令2.4jsfuck三、代码执行流程的防护原理3.1流程平坦化3.2逗号表达式混淆四、其他代码防护方案4.1eval加密4.2内存爆破4.3检测代码是否格式化一、常量的混淆
Chapter Two:无限debugger的原理与绕过与断点调试
Amo Xiang
爬虫实战 javascript 前端 无限debugger
目录1.无限debugger的原理与绕过1.1案例介绍1.2实现原理1.3禁用断点1.4补充:改写JavaScript文件2.断点调试1.无限debugger的原理与绕过1.1案例介绍debugger是JavaScript中定义的一个专门用于断点调试的关键字,只要遇到它,JavaScript的执行便会在此处中断,进入调试模式。有了debugger这个关键字,我们就可以非常方便地对JavaScrip
一句话就能回答的前端面试题(2024年10月最新版)
小姐姐呀~
前端 javascript vue
1、v-if和v-show的区别相同点:v-if和v-show都可以控制dom元素的展示和隐藏不同点:v-if的显示隐藏是将dom元素整个添加或删除而v-show的隐藏是为该元素添加CSS样式display:none,dom元素还在一般进入页面不需要频繁显示或隐藏就用v-if2、data()为什么是一个函数为了防止多个组件实例对象共用一个data,产生数据污染3、什么是闭包闭包就是内部函数定义一个
JSON数据格式转换
百事老饼干
前端积累 json
在前端Vue3中,处理JSON数据通常涉及到从API获取JSON、解析JSON数据、或者将JavaScript对象转换为JSON字符串。这里是几种常见的JSON转换操作一、从JSON字符串解析为JavaScript对象如果你从API或其他地方收到一个JSON字符串,可以使用JSON.parse()来将它转换为JavaScript对象。letjsonString='{"name":"John","a
VUE前端实现防抖节流 Lodash
百事老饼干
前端积累 前端
方法一:采用Lodash工具库Lodash是一个一致性、模块化、高性能的JavaScript实用工具库。(1)采用终端导入Lodash库$npmi-gnpm$npmi--savelodash(2)应用示例:搜索框输入防抖在这个示例中,我们希望用户在输入框中停止输入500毫秒后才执行搜索操作,避免频繁请求.//假设这是一个执行搜索操作的函数functionperformSearch(query){c
学生作业-学生选课系统,后端SpringBoot + maven,前端vue。涉及管理员、学生和教师三个角色。教师可设置课程信息以及学生成绩录入;学生可选课和查看成绩。源码中包含MySQ数据表sql。
程序员WANG
vue.js 前端 spring boot
1、学生作业-学生选课系统,后端SpringBoot+maven,前端vue。涉及管理员、学生和教师三个角色。教师可设置课程信息以及学生成绩录入;学生可选课和查看成绩。2、源码中包含数据表,sql文件,mysql数据库,可一键导入。3、管理员账号和密码root、root;学生和教师的账号请查看数据表,密码均为123456。4、Management是后端代码,vue是前端vue代码,按照正常启动(v
全面解析npm:功能、用途、命令和配置
阿吉的呓语
java开发知识 npm
1.npm简介npm(NodePackageManager)是Node.js的官方包管理工具,用于安装、发布、管理JavaScript包和依赖关系。它是世界上最大的软件注册表之一,拥有数百万个包,每天处理数十亿次的下载请求。2.npm的功能和用途包安装和管理:通过npm可以方便地安装、更新、删除JavaScript包。依赖管理:npm能够管理项目的依赖关系,包括安装、更新和移除依赖。包发布和管理:
【前端】Layui的表格常用功能,表单提交事件,表格下拉按钮点击事件,表格外的按钮点击事件
m0_74824823
vip1024p 前端 layui javascript
欢迎来到《小5讲堂》大家好,我是。这是《前端》系列文章,每篇文章将以博主理解的角度展开讲解,特别是针对知识点的概念进行叙说,大部分文章将会对这些概念进行实际例子验证,以此达到加深对知识点的理解和掌握。温馨提示:博主能力有限,理解水平有限,若有不对之处望指正!目录前言核心方法常用模块表单按钮事件表格字段事件文章推荐前言最近在维护老系统,尽量使用过layui,但是时间久了,总会忘记一些方法的使用。因此
使用npm创建three.js项目
ShawnWeasley
npm javascript arcgis 前端 node.js
1.安装Node.js和npm首先,需要在您的计算机上安装Node.js和npm。Node.js是一个JavaScript运行环境,而npm是一个JavaScript包管理器。npm会随Node.js一起安装,因此只需要安装Node.js即可。从Node.js的官方网站(https://nodejs.org)下载并安装适合您操作系统的版本。2.创建一个新的项目在您希望创建项目的目录下,手动创建一个
[20250119]-前端面试题——React篇
前端
[20250119]-前端面试题——React篇面试问题记录问题1请简单介绍一下React18有哪些更新。回答:React18的主要更新包括:并发渲染:React18引入了并发渲染(ConcurrentRendering),使得React能在后台进行渲染工作,避免阻塞UI更新,提升性能。自动批处理:React18会自动批处理多次setState更新,减少不必要的渲染,提升性能。useIdHook:
深入了解JSON:Python中JSON的全面应用指南
kdayjj966
开发语言 json python
JSON(JavaScriptObjectNotation)是一种广泛使用的数据交换格式,以其轻量级和易于阅读及解析的特性而备受欢迎。JSON起源于JavaScript,但已经被许多编程语言广泛支持,包括Python。本教程将深入探讨JSON的构造、数据类型,以及在Python中的多种操作方式。JSON的基础构造JSON由两种主要结构组成:对象(Object)和数组(Array)。对象(Objec
探索JavaScript的宇宙:《JS星球系统》
潘俭渝Erik
探索JavaScript的宇宙:《JS星球系统》solar-system-of-jsVisualizethelanguagesontheJSplatform项目地址:https://gitcode.com/gh_mirrors/so/solar-system-of-js在快速发展的前端世界中,JavaScript已经成为无可争议的主宰,围绕它的语言和框架如群星璀璨,构成了一个壮观的“JS星球系统”
如何学懂C++语言:C++从入门到精通的全面指南(完整C++学习笔记)
猿享天开
c++ 学习 笔记
数字人助手猿小美带你一起学编程一、引言作为一名拥有多年开发经验的技术人员,我的职业生涯涵盖了多种编程语言,包括C语言、C++、C#和JavaScript等。在我多年的编程生涯中,这些语言不仅丰富了我的知识储备,还极大地拓展了我的视野和技能。出于对编程的热爱,以及希望帮助更多编程爱好者的目的,我决定利用业余时间整理一套全面的C++语言学习指南。这套指南旨在为C++语言编程爱好者提供一个清晰的学习路线
JAVA 反射(JAVA面试题)
geejkse_seff
java 开发语言
5.1.2.JAVA反射5.1.2.1.动态语言动态语言,是指程序在运行时可以改变其结构:新的函数可以引进,已有的函数可以被删除等结构上的变化。比如常见的JavaScript就是动态语言,除此之外Ruby,Python等也属于动态语言,而C、C++则不属于动态语言。从反射角度说JAVA属于半动态语言。5.1.2.2.反射机制概念(运行状态中知道类所有的属性和方法)在Java中的反射机制是指在运行状
HarmonyOS 开发实战 —— 模块化架构组件 (使用系统路由表+注解+hvigor插件 自动配置项目模块化)
CTrup
鸿蒙开发 HarmonyOS 移动开发 harmonyos 架构 ui ArkUI 组件化 插件化 hvigor
往期笔录记录:鸿蒙(HarmonyOS)北向开发知识点记录~鸿蒙(OpenHarmony)南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景?嵌入式开发适不适合做鸿蒙南向开发?看完这篇你就了解了~对于大前端开发来说,转鸿蒙开发究竟是福还是祸?鸿蒙岗位需求突增!移动端、PC端、IoT到底该怎么选?记录一场鸿蒙开发岗位面试经历~持续更新中……@satis/oh-router简介@sati
HarmonyOS 开发实践——模块化架构组件 (使用系统路由表+注解+hvigor插件 自动配置项目模块化)
我是你叶
HarmonyOS 鸿蒙开发 移动开发 harmonyos 架构 鸿蒙开发 ui Arkui 移动开发 组件化
往期推文看点鸿蒙(HarmonyOS)北向开发知识点记录~鸿蒙(OpenHarmony)南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景?嵌入式开发适不适合做鸿蒙南向开发?看完这篇你就了解了~对于大前端开发来说,转鸿蒙开发究竟是福还是祸?鸿蒙岗位需求突增!移动端、PC端、IoT到底该怎么选?记录一场鸿蒙开发岗位面试经历~持续更新中……@satis/oh-router简介@satis
放弃传统模板语言,前后端分离架构和传统架构相比到底强在哪?
博远~
前端 架构
引言在当今Web开发中,后端SpringBoot和前端Vue通过前后端分离架构来结合,已经是一个成熟的主流技术栈了。这种前后端分离的架构方式,目前广泛应用于约90%以上通过Java开发的Web应用中。但是,对于为何弃用了之前服务端渲染页面的方式,而选择了前后端分离架构,现有大多数开发者和企业都是懵懵懂懂,甚至有些公司还觉得,之前一个人能干的项目,现在变成了两个人干,增加了成本和复杂度,降低了效益。
Node.js 到底是什么
yqcoder
Node.js 从入门到精通 node.js
Node.js是一个基于ChromeV8引擎的JavaScript运行环境,它允许开发者使用JavaScript编写服务器端代码。一、主要特点1.事件驱动和非阻塞I/O模型Node.js采用事件驱动架构,通过回调函数处理I/O操作,这使得它在处理大量并发请求时表现出色。当执行I/O操作(如文件读写、网络请求等)时,Node.js不会阻塞程序的执行,而是继续处理其他任务,当I/O操作完成后,通过回调
从0到1:AI微信红包开发全攻略,小白也能轻松上手!
人工智能cursor程序员
AI编程时代真的来了!最近我重度沉迷AI编程,发现它简直是开发神器,前端页面、后端服务,都能轻松搞定,效率直接起飞!最近临近过年,我突然冒出一个想法:为什么不试试用AI来做个微信红包呢?说干就干!1.明确需求要用AI做红包,首先得了解微信红包的规则。简单来说,我们需要一张精美的红包封面图,它会出现在发红包、消息气泡、拆红包、详情页等四个地方。而且尺寸也有要求,是957×1278像素。看起来有点复杂
桌面上有多个球在同时运动,怎么实现球之间不交叉,即碰撞?
换个号韩国红果果
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
java oracle
北京时间 10 月 7 日,据国外媒体报道,Oracle 和谷歌之间一场等待已久的官司可能会推迟至 10 月 17 日以后进行,这场官司的内容是 Android 操作系统所谓的 Java 专利权之争。本案法官 William Alsup 称根据专利权专家 Florian Mueller 的预测,谷歌 Oracle 案很可能会被推迟。 该案中的第二波辩护被安排在 10 月 17 日出庭,从目前看来
linux shell 常用命令
antlove
linux shell command
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
JavaScript underscore
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
jquery Ajax springMVC 浏览器 上传文件
最近个人开发一个小的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
DB backup
一:通过备份王等软件进行备份前台进不去?
用备份王等软件进行备份是大多老站长的选择,这种方法方便快捷,只要上传备份软件到空间一步步操作就可以,但是许多刚接触备份王软件的客用户来说还原后会出现一个问题:因为新老空间数据库用户名和密码不统一,网站文件打包过来后因没有修改连接文件,还原数据库是好了,可是前台会提示数据库连接错误,网站从而出现打不开的情况。
解决方法:学会修改网站配置文件,大多是由co
github做webhooks:[1]钩子触发是否成功测试
dcj3sjt126com
github git webhook
转自: 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
JavaScript jquery css
这个是整个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