Layui前后台交互数据获取java实例
Layui简介
Layui是一款适用于后台程序员的UI框架,学习成本低。Json数据格式交互前后台,并且也相当适用单页面开发。有兴趣的朋友可以看看layui官网。
Layui前后台数据交互
layui有自己的一套特定的数据格式交互(这很重要),必须参数code:0,msg:“”,count:数据size(int),data:”数据List”。一般我们选择封装返回接收类。
Layui前台js请求数据
其中html代码
js代码
layui.use(['form','layer','table'],function(){ vartable=layui.table ,form=layui.form,$=layui.$; table.render({ elem:'#test'//绑定tableid ,url:'sys/menu/list'//数据请求路径 ,cellMinWidth:80 ,cols:[[ {type:'numbers'} ,{field:'name',title:'菜单名称'} ,{field:'parentName',title:'父菜单名称',width:150} ,{field:'url',title:'菜单路径'} ,{field:'perms',title:'菜单权限'} ,{field:'type',title:'类型'} ,{field:'icon',title:'图标'} ,{field:'orderNum',title:'排序'} ,{fixed:'right',title:'操作',width:180,align:'center',toolbar:'#toolBar'}//一个工具栏具体请查看layui官网 ]] ,page:true//开启分页 ,limit:10//默认十条数据一页 ,limits:[10,20,30,50]//数据分页条 ,id:'testReload' }); });
java后台代码
@RequestMapping("/list") @ResponseBody @RequiresPermissions("sys:menu:list") publicLayuilist(@RequestParamMapparams){ //查询列表数据 Queryquery=newQuery(params); List menuList=sysMenuService.queryList(query); inttotal=sysMenuService.queryTotal(query); PageUtilspageUtil=newPageUtils(menuList,total,query.getLimit(),query.getPage()); returnLayui.data(pageUtil.getTotalCount(),pageUtil.getList()); }
Layui工具类代码
publicclassLayuiextendsHashMap{ publicstaticLayuidata(Integercount,List>data){ Layuir=newLayui(); r.put("code",0); r.put("msg",""); r.put("count",count); r.put("data",data); returnr; } }
PageUtils在这里可有可无,你们可以自行封装
@Data publicclassPageUtilsimplementsSerializable{ privatestaticfinallongserialVersionUID=-1202716581589799959L; //总记录数 privateinttotalCount; //每页记录数 privateintpageSize; //总页数 privateinttotalPage; //当前页数 privateintcurrPage; //列表数据 privateList>list; /** *分页 *@paramlist列表数据 *@paramtotalCount总记录数 *@parampageSize每页记录数 *@paramcurrPage当前页数 */ publicPageUtils(List>list,inttotalCount,intpageSize,intcurrPage){ this.list=list; this.totalCount=totalCount; this.pageSize=pageSize; this.currPage=currPage; this.totalPage=(int)Math.ceil((double)totalCount/pageSize); } }
总之一句话,最后Layui接受到的数据格式要为。
以上这篇Layui前后台交互数据获取java实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。