Introduction to Layui
Layui is a UI framework suitable for background programmers, with low learning costs. Json data format interaction front and backend, and is also quite suitable for single-page development. Friends who are interested can check out the official website of Layui.
Layui front and backend data interaction
Layui has its own set of specific data format interactions (this is very important), and must parameters code: 0, msg: "", count: data size (int), data: "data List". Generally, we choose to encapsulate and return the receive class.
Layui front desk js request data
Among them, html code
<link rel="stylesheet" href="static/layui/css/layui.css" rel="external nofollow" media="all" /><script type="text/javascript" src="static/layui/layui.js"></script><table id="test" lay-filter="table"></table>
js code
layui.use(['form','layer','table'], function(){ var table = layui.table ,form = layui.form,$=layui.$; table.render({ elem: '#test' //Binding table id ,url:'sys/menu/list' //Data request path,cellMinWidth: 80 ,cols: [[ {type:'numbers'} ,{field:'name', title:'men name'} ,{field:'parentName', title:'parent menu name',width:150} ,{field:'url', title:'menu path'} ,{field:'perms', title: 'menu permission'} ,{field:'type', title:'type'} ,{field:'icon', title:'icon'} ,{field:'orderNum', title:'sorting'} ,{fixed: 'right', title: 'operation', width:180, align:'center', toolbar: '#toolBar'}//For details, please check the layui official website]] ,page: true //Open paging, limit:10 //Default ten data one page, limits:[10,20,30,50] //Data paging bar, id: 'testReload' });});Java background code
@RequestMapping("/list") @ResponseBody @RequiresPermissions("sys:menu:list") public Layui list(@RequestParam Map<String, Object> params){ //Query list data Query query = new Query(params); List<SysMenuEntity> 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 code
public class Layui extends HashMap<String, Object> { 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, you can encapsulate it yourself
@Datapublic class PageUtils implements Serializable { private static final long serialVersionUID = -1202716581589799959L; //Total records private int totalCount; //Number of records per page private int pageSize; //Total pages private int totalPage; //Number of current page private int currPage; //List data private List<?> list; /** * Page* @param list List data* @param totalCount Total records* @param pageSize Number of records per page* @param currPage Current page*/ 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); }}In short, the data format that Layui receives in the end should be.
The above example of Layui's front and backstage interaction data acquisition java is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.