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

准备工作

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

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

layui后台布局

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

layui数据表格

记录一个bug

数据表对应的js代码为：

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中返回数据结构类为：

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显示了。

{
"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", ...}
...
]}
}