SpringBoot项目碰到layui怎么用表格--【SB系列之011】

# SpringBoot系列文章目录

SpringBoot知识范围-学习步骤–【思维导图知识范围】

---

先上效果图

MVC模型

MVC的数据传输包括两个方面。

• 浏览器给服务器的信息
• 服务器给浏览器的信息

layui

layui用了几年，这个框架十分适合我们后台人员开发。简单易用，用的较多的模块肯定是table模块和form模块了。但是在一个开发团队中，不同的人开发水平的差异，如果没有调用统一的公共方法，那就会造成很多样式的不同和公共的bug出现到不同的页面 从而出现耗费过多的精力修改bug。所以我们需要做的是统一样式和方法的调用，将其二次封装以便于开发人员的调用。另一方面也能减少代码的冗余量。
也可以这么说，
UI框架，如果没有table 没有菜单，那这个UI就真的只是一堆皮肤了。
一般在页面的table的构成如下： 搜索区 头部工具栏 和table主体【包含对行和列 事件的处理】

首先分析layui 的输入

当然了，你得自己会一些layui ,不然的话，就以现在的网络，搬运工太多，而90%的搬运工事实上并没有啥精力帮你复盘。
也就是说，你看到的90%的代码不是不正确，而是，2023年的搬运工，搬了秦始皇的“兵马俑”。然后，你以为是2023年的新框架，套到项目里，那可想而知。
事实上，现在的学习新的知识，能找到合适的一个起步的代码真的就算是成功了一半。

而事实上，layui 这个开源项目也在迭代。
它本身就有两种参数接入的方法：

早期的方式一layui 参数接入

layui.use('table', function () {
            var table = layui.table;
            /*第一种原始写法*/
            
            table.render({
                id: 'laydictsList',
                elem: '#test',
                url: areasURL + "/base_dics/LayuigetPageList",
                cellMinWidth: 80,//全局定义常规单元格的最小宽度，layui 2.2.1 新增
                where: { txtFullName: null },
                page: true,
                //toolbar:'barDemo',
                limit: 10,
                limits: [2, 5, 10, 20, 30],
                text: {
                    none: '暂无相关数据！'//默认无数据
                },
                cols: [[
                  { type: 'checkbox', LAY_CHECKED: false },
                  { field: 'dicsid', width: 80, title: 'ID', sort: true, hide: true },
                  { field: 'code', width: 80, title: '编号' },
                  { field: 'sortnum', width: 80, title: '序号', sort: true },
                  { field: 'fullname', width: 80, title: '名称' },
                  { field: 'diccategoryname', title: '所属类别', width: '30%', minWidth: 100 }, //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                  { field: 'experience', title: '操作' }
                ]]
            });
        });

后期的方式二layui参数接入：

layui.use('table', function () {
            var table = layui.table;
           /*第二种改进版*/
			   table.render({
				   id: 'laydictsList',
				   elem: '#test',
				   url: areasURL + "/base_dics/getPageList",
				   method: "post",
				   request: {
					   pageName: 'PageNum', //页码的参数名称，默认：page
					   limitName: 'PageSize' //每页数据量的参数名，默认：limit
				   },
				   response: {
					   statusName: 'ReturnType', //数据状态的字段名称，默认：code
					   statusCode: true,//成功的状态码，默认：0
					   msgName: 'ReturnMsg', //状态信息的字段名称，默认：msg
					   countName: 'ReturnCount', //数据总数的字段名称，默认：count
					   dataName: 'ReturnData', //数据列表的字段名称，默认：data
				   },
				   cellMinWidth: 80,//全局定义常规单元格的最小宽度，layui 2.2.1 新增
				   where: { txtFullName: null },
				   page: true,
				   //toolbar:'barDemo',
				   limit: 10,
				   limits: [2, 5, 10, 20, 30],
				   text: {
					   none: '暂无相关数据！'//默认无数据
				   },
				   cols: [[
					 { type: 'checkbox', LAY_CHECKED: false },
					 { field: 'dicsid', width: 80, title: 'ID', sort: true, hide: true },
					 { field: 'code', width: 80, title: '编号' },
					 { field: 'sortnum', width: 80, title: '序号', sort: true },
					 { field: 'fullname', width: 80, title: '名称' },
					 { field: 'diccategoryname', title: '所属类别', width: '30%', minWidth: 100 }, //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
					 { field: 'experience', title: '操作' }
				   ]]
			   });
		   });

如果前台有些功底的人可以看出来，后期的适应性更强，说白了就是早期的你要改变JAVA里的代码，按着layui 的格式，而后期的，有一些名字可以转换一下。
可能有人说，那灵活的就好。
这个东西就难说了。
mybatis 比hibernate 灵活。mybatis 赢了。
SSM 比springboot 还灵活，配置更多，但是SSM被淘汰了。
微信小程序的JS，CSS都比网页版的不灵活，但是，微信小程序现在流行了。
所以，这个东西本就没有那么绝对，最后看的是市场，还有就是大公司他们的支持。哪种方式好，我也无权下结论，只是从IT打工者的角度，工资高的就是好的。OC 就是比android 好。JAVA比C++ 好，不过现在JAVA工资降了，那就是C++ 比JAVA好。
不过，今天我拿出来的这个例子，严格的符合早期的方式一。所以，你如果要用方式二的，那直接换JS就行了。反正方式一的后台，也可以用到方式二上。

接口JSON格式

要求后台返回数据格式必须为:
至于json的工具，我一般是用json编辑器JSONedit.exe ，后面资源上提供下载吧。这名字太常见了，怕是百度的话，得百度很久。你说你起一个“彪哥JSON编辑器”这样的名字也好找呀

{
  "msg": "success",
  "code": "0",
  "data": [
    {
      "title": "for循环输出",
      "problemId": 1139
    },
    {
      "title": "测试2",
      "problemId": 1138
    },
    {
      "title": "测试1",
      "problemId": 1137
    },
    {
      "title": "for循环-Plus",
      "problemId": 1140
    },
    {
      "title": "第一个C++程序",
      "problemId": 1141
    }
  ]
}

起后台，构建 springBoot 项目

中间过程略了。

按着layui 的接口写吧。

/**响应编码*/
    private int code;
    /**响应消息*/
    private String msg;
    /**数据总量*/
    private int count;
    /**数据*/
    private Object data;

加一个数据总量的count 总得给一共多少页呀。
然后就是一定要写这个toString 了。不然，给前台传啥格式，不自己定义，那程序还不得飞到银河系边上呀。

 @Override
    public String toString() {
        return "ResultBean{" +
                "code=" + code +
                ", msg='" + msg + '\'' +
                ", count=" + count +
                ", data=" + data +
                '}';
    }

完整的返回类代码

也不知道看的小朋友知不知道lombok,反正一个类也不差这点get/set了。怼上再说

package com.example.lizi.domain;

//结果集类
public class ResultBean {
    /**响应编码*/
    private int code;
    /**响应消息*/
    private String msg;
    /**数据总量*/
    private int count;
    /**数据*/
    private Object data;

    public ResultBean() {
    }

    public ResultBean(int code, String msg, int count, Object data) {
        super();
        this.code = code;
        this.msg = msg;
        this.count = count;
        this.data = data;
    }

    public int getCode() {
        return code;
    }

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

    public String getMsg() {
        return msg;
    }

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

    public int getCount() {
        return count;
    }

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

    public Object getData() {
        return data;
    }

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

    @Override
    public String toString() {
        return "ResultBean{" +
                "code=" + code +
                ", msg='" + msg + '\'' +
                ", count=" + count +
                ", data=" + data +
                '}';
    }
}

controlloer类

@RequestMapping("/allUser")
    @ResponseBody
    public ResultBean allUser(@RequestParam(defaultValue = "1") Integer page,
                                  @RequestParam(defaultValue = "10") Integer limit){
        System.out.println("表格查询开始ResultBean");
        List<OrdinaryUser> shl = userService.findAllUser();
        int count = shl.size();
        int startIndex = (page - 1) * limit;
        int endIndex = Math.min(startIndex + limit,count);
        List<OrdinaryUser> pageList= shl.subList(startIndex,endIndex);
        ResultBean resultBean = new ResultBean(0,"查询成功",count,pageList);
        System.out.println("输出resultBean："+resultBean);
        return resultBean;
    }

service

 public List<OrdinaryUser> findAllUser(){
        return users.findAllUser();
    }

mapper

    //查询所有用户
    @Select("select * from ordinaryUser")
    public List<OrdinaryUser> findAllUser();

上面只给的是相关这一个操作的。
然后，辅助的东西，哐哐的往上一怼。

这样后台就算是整好了。
登陆/录？ 就这点功能还登啥陆呀

前台

先在template 下面怼上一个 html.
关于 springBoot 的目录参考《SpringBoot项目中WEB页面放哪里》
先选择最复杂的这个template 哈哈，简单的项目，整的小活还全套的佐料了。
然后，你得有一个controller 跳进这个 template 里呀。

@Controller
public class UserAllShl {
    @Autowired
    public OrdinaryUserService ordinaryUserService;

    @RequestMapping("/UserAll")
    public String allShl(){
        System.out.println("开始跳转到allShl");
        return "administrators/ordinary.html";
    }

}

然后，这个页面里的JS再请求那个 /allUser

把这个过程 串起来！！

在这中间，你可能碰到多次的 badmapping … 白页，后台报错，启动不成功。MAVEN编译报错。访问地址404…
每当碰到这种情况的时候，你就这么想，你说这么多的错误，这么多的问题，这么难的环境，一通操作猛如虎，怎么工资才2500呢？
所以，2500的工资，跟25000的工资差的其实就是你会调多少错。不管你信不信，10年前也有2500的工资，现在入职1-2年的，也有25000的工资。
当然了，本例还是要提供一下全套的代码的。
都调通了，自然就出现了效果图。注：搜索功能失效。新增，删除都不好使

据说，用猫的鼠标指针会带来好运？

资源下载

SpringBoot项目碰到layui怎么用表格–【SB系列之011】配套资源
https://download.csdn.net/download/dearmite/88230628

POP猫鼠标指针方案资源下载
https://download.csdn.net/download/dearmite/88230629

附：怎样安装自己喜欢的鼠标指针方案 如何安装鼠标指针

下载并安装指针方案：
01
下载自己喜欢的鼠标指针方案，解压：

02
解压后我们会看到文件夹下有很多 ani动态光标文件 中有一个 ini文件，右键单击 ini文件（安装文件.ini），执行【安装】命令：

03
等待安装结束后打开【控制面板】→【鼠标】（Win XP 与 Win 7 操作均相同）：

04
打开【鼠标属性】窗口，选择【指针】选项卡，在方案中找到刚才安装的指针方案【Crystal Clear】，然后单击窗口又下脚的【应用】→【确定】完成安装！

第二种方案