How to connect layui and backend

This article will explain in detail how to connect layui and backend. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Layui foreground and background data interaction:

Layui has its own set of specific data format interactions (which is important), and you must have parameters code:0,msg: "", count: data size (int), data: "data List". In general, we choose to encapsulate and return the receiving class. Layui foreground js request data in which html code

Js code

Layui.use (['form','layer','table'], function () {var table = layui.table, form = layui.form,$=layui.$ Table.render ({elem:'# test' / / bind table id, url:'sys/menu/list' / / data request path, cellMinWidth: 80, cols: [[{type:'numbers'}, {field:'name', title:' menu name'}, {field:'parentName' Title:' parent menu name', width:150}, {field:'url', title:' menu path'}, {field:'perms', title:' menu permissions'}, {field:'type', title:' Type'}, {field:'icon', title:' Icon'}, {field:'orderNum' Title:' sorting'}, {fixed: 'right',title:' operation', width:180, align:'center', toolbar:'# toolBar'} / / for more information on a toolbar, please see layui's official website]], page: true / / enable paging. Limit:10 / / defaults to ten data per page. Limits: [10, 10, 20, 30, 50] / / data pagination, id: 'testReload'}) });

Java background code

@ RequestMapping ("/ list") @ ResponseBody @ RequiresPermissions ("sys:menu:list") public Layui list (@ RequestParam Map params) {/ / query list data Query query = new Query (params); List menuList = sysMenuService.queryList (query); int total = sysMenuService.queryTotal (query) PageUtils pageUtil = new PageUtils (menuList, total, query.getLimit (), query.getPage ()); return Layui.data (pageUtil.getTotalCount (), pageUtil.getList ());}

Layui tool class code

Public class Layui extends HashMap {public static Layui data (Integer count,List data) {Layui r = new Layui (); r.put ("code", 0); r.put ("msg", "); r.put (" count ", count); r.put (" data ", data); return r;}}

PageUtils is optional here, and you can package it yourself.

@ Datapublic class PageUtils implements Serializable {private static final long serialVersionUID =-1202716581589799959L; / / Total records private int totalCount; / / records per page private int pageSize; / / total pages private int totalPage; / / current pages private int currPage; / / list data private List list / * pagination * @ param list list data * @ param totalCount Total Records * @ param pageSize Records per Page * @ param currPage current pages * / public PageUtils (List list, int totalCount, int pageSize, int currPage) {this.list = list; this.totalCount = totalCount; this.pageSize = pageSize This.currPage = currPage; this.totalPage = (int) Math.ceil ((double) totalCount/pageSize);}} this is the end of the article on "how layui and backend are connected". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.