前端框架layui

第一次发现它是同学推荐给我的,发现真的非常方便,layui网址:https://www.layui.com/,下面简单介绍和记录一下。

准备工作

  • 将layui下载下来,其中包含css/font/images/lay和layui.js四个文件夹和一个js文件。
  • 参考官方文档和示例,找你需要的模块。

下面记录一下几个用过的模块。

layui后台布局

后台布局的效果如图所示,直接点击获取布局代码幅值过去改下路径就能用。

layui数据表格

记录一个bug

数据表对应的js代码为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
layui.use('table', function(){
var table = layui.table;

table.render({
elem: '#test'
,url:'/demo/table/user/'
,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
,cols: [[
{field:'id', width:80, title: 'ID', sort: true}
,{field:'username', width:80, title: '用户名'}
,{field:'sex', width:80, title: '性别', sort: true}
,{field:'city', width:80, title: '城市'}
,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
,{field:'experience', title: '积分', sort: true}
,{field:'score', title: '评分', sort: true}
,{field:'classify', title: '职业'}
,{field:'wealth', width:137, title: '财富', sort: true}
]]
,page: true
,response: {
statusCode: 200 //重新规定成功的状态码为 200,table 组件默认为 0
}
,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
return {
"code": res.status, //解析接口状态
"msg": res.message, //解析提示文本
"count": res.total, //解析数据长度
"data": res.data.content //解析数据列表
};
}
});
});

在controller中返回数据结构类为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
package com.example.springboot.utils;

public class LayuiTableResultUtil<T> {
private T data;
private String msg;
private int code;
private Long count;

public LayuiTableResultUtil(int code,String msg, Long count, T data) {
this.msg = msg;
this.data = data;
this.code = code;
this.count = count;
}

@Override
public String toString() {
return "LayuiTableResult [msg=" + msg + ", data=" + data + ", code=" + code + ", count=" + count + "]";

}

public String getMsg() {
return msg;
}

public void setMsg(String msg) {
this.msg = msg;
}

public Long getCount() {
return count;
}

public void setCount(Long count) {
this.count = count;
}

public int getCode() {
return code;
}

public void setCode(int code) {
this.code = code;
}

public T getData() {
return data;
}

public void setData(T data) {
this.data = data;
}
}

项目启动,返回页面上显示json字符串,无法解析数据;调了三天也没解决,然后换Thymeleaf显示了。

1
2
3
4
5
6
7
8
9
10
11
{
"code":0,
"msg":"",
"count":100,
"data":{"content":[
{"id": 1, "username": "user1", "sex": "女", "city": "城市-0", "sign": "签名-0", ...}
{"id": 1, "username": "user1", "sex": "女", "city": "城市-0", "sign": "签名-0", ...}
{"id": 1, "username": "user1", "sex": "女", "city": "城市-0", "sign": "签名-0", ...}
...
]}
}
Donate comment here