想尝试用一下layui的几个组件，以实现前后端的交互。虽然代码简单，但对于初上手的我，还是有一些小问题，特此记录一下。
下文以 Layui table 组件为例：
后端：springboot 2.1.13
前端：Layui.js
1. idea创建springboot工程，简单配置如下：application.yml
2. 在官网下载最新的Layui包（ https://www.layui.com/ ），然后放入工程的 srcmain esourcesstatic 路径下，如下：
3. 控制器，如下：
@Controller @RequestMapping("/test") public class TestController { /** * 测试页面 http://localhost:8090/test/table * @return */ @RequestMapping(value = "/table", method = RequestMethod.GET) public String testTable(){ return "page/table"; } /** * 获取table数据 * @return */ @RequestMapping(value = "/tableData", method = RequestMethod.GET) @ResponseBody public JSONObject testTableData(){ //方式一：Object转为JSONObject Employee e1 = new Employee(7369L, "zhang", 800, 20); JSONObject jsonObject1 = JSON.parseObject(JSON.toJSONString(e1)); //方式二：直接创建JSONObject JSONObject jsonObject1 = new JSONObject(); jsonObject1.put("empno", 7369L); jsonObject1.put("ename", "zhang"); jsonObject1.put("salary", 800); jsonObject1.put("deptno", 20); //放入集合 JSONArray jsonArray = new JSONArray(); jsonArray.add(jsonObject1); //返回结果 JSONObject jsonObject = new JSONObject(); jsonObject.put("code", 0); jsonObject.put("msg", "success"); jsonObject.put("count", 1); jsonObject.put("data", jsonArray); return jsonObject; } }
4. 页面如下：table.html，地址：srcmain esources emplatespage able.html
在layui官网，直接复制了table的页面代码来用 https://www.layui.com/demo/table.html, 此处修改了field和title
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>Layui</title> <meta name='renderer' content='webkit'> <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'> <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'> <!-- 注意 href ！！！ --> <link rel='stylesheet' href='/plugins/layui/css/layui.css' media='all'> </head> <body> <div>zhang</div> <table id='test'></table> <!-- 注意 src！！！ --> <script src='/plugins/layui/layui.js' charset='utf-8'></script> <script> <!-- 注意 src！！！ --> layui.use('table', function(){ var table = layui.table; table.render({ elem: '#test' ,url:'/test/tableData' //控制器地址即可 <!-- 注意 src！！！ --> ,cols: [ //注意：不要把 [[ 连起来写！！ [ {field:'empno', title: '编号'} ,{field:'ename', title: '名称'} ,{field:'salary', title: '工资'} ,{field:'deptno', title: '部门'} ] ] }); }); </script> </body> </html>
5. 遇到的问题：
1> layui is not defined
一般是引用的js位置不对，静态资源读取不到。
springboot 的默认静态资源的路径为：
spring.resources.static-locations=classpath:/META-INF/resources/, classpath:/resources/, classpath:/static/, classpath:/public/ 优先级从高到低。
（默认配置的 /** 会映射到 /static（或 /META-INF/resources、/public、/resources））
所以依默认静态资源访问路径（不需要在application.yml专门设置）即可，页面table.html中引用的layui.js地址写为 href='/plugins/layui/css/layui.css' 即可，注意：最前面必须加/ ，引入layui.css同理。虽然此地址在idea中会显示黄色提醒，但没影响。
2> 回调数据渲染失败
layui的返回数据有特殊的格式要求，不仅仅返回json就完了，而是要求如下格式：
JSONObject jsonObject = new JSONObject(); jsonObject.put("code", 0); jsonObject.put("msg", "success"); jsonObject.put("count", 1); jsonObject.put("data", jsonArray); 必须是这样的json，还要注意的是，其中的data是要渲染的数据（列表有多条数据），类型是JSONArray， 哪怕只有一条记录，也要放入JSONArray，用JSONArray来给data赋值。
3> 不要乱用[[ ]]
在 table.render 中的 cols，不要把 [[ 或 ]] 合在一起写，会被解释称其他含义而报错，要换行写
6 访问成功：
