Layui front and back interactive data acquisition java instance
- 2020-12-19 20:58:58
- OfStack
Layui profile
Layui is an UI framework for back-end programmers with low learning cost. The Json data format interacts front and back, and is also quite suitable for single-page development. Those who are interested can check out layui's website.
Layui front and back data interaction
layui has its own set of specific data format interactions (this is important) that must take the parameters code: 0, msg: "", count: data size (int),data:" Data List ". Generally we choose to encapsulate the return receiving class.
Layui front desk js requests data
Where 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 class="layui-hide" 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' // The binding table id
,url:'sys/menu/list' // Data request path
,cellMinWidth: 80
,cols: [[
{type:'numbers'}
,{field:'name', title:' The name of the menu '}
,{field:'parentName', title:' Parent menu name ',width:150}
,{field:'url', title: ' The menu path '}
,{field:'perms', title: ' Menu permissions '}
,{field:'type', title:' type '}
,{field:'icon', title:' icon '}
,{field:'orderNum', title:' The sorting '}
,{fixed: 'right',title: ' operation ', width:180, align:'center', toolbar: '#toolBar'}//1 A toolbar Please check for details. layui website
]]
,page: true // Open the page
,limit:10 // The default 10 The data 1 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 utility class 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 package it yourself
@Data
public class PageUtils implements Serializable {
private static final long serialVersionUID = -1202716581589799959L;
// The total number of records
private int totalCount;
// Number of records per page
private int pageSize;
// Total number of pages
private int totalPage;
// The current number of pages
private int currPage;
// The list of data
private List<?> list;
/**
* paging
* @param list The list of data
* @param totalCount The total number of records
* @param pageSize Number of records per page
* @param currPage The current number of 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);
}
}
In a word, the last data format that Layui receives should be.