Layui前后台交互数据获取java实例

2023-09-18 03:25:06 320

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);
ListmenuList=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,Listdata){
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;
//列表数据
privateListlist;
/**
*分页
*@paramlist列表数据
*@paramtotalCount总记录数
*@parampageSize每页记录数
*@paramcurrPage当前页数
*/
publicPageUtils(Listlist,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实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

Layui前后台交互数据获取java实例

热门推荐

随机推荐