想嘗試用一下layui的幾個組件，以實現前后端的交互。雖然代碼簡單，但對於初上手的我，還是有一些小問題，特此記錄一下。
下文以 Layui table 組件為例：
后端：springboot 2.1.13
前端：Layui.js
1. idea創建springboot工程，簡單配置如下：application.yml
2. 在官網下載最新的Layui包（ https://www.layui.com/ ），然后放入工程的 src\main\resources\static 路徑下，如下：
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，地址：\src\main\resources\templates\page\table.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 訪問成功：
