Layui front and back interactive data acquisition java instance

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.