Maison >interface Web >js tutoriel >Partage d'instances Java d'acquisition de données interactives frontales et back-end Layui
Cet article partage principalement avec vous un exemple Java d'acquisition de données interactives Layui front-end et back-end. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.
Introduction à Layui
Layui est un framework d'interface utilisateur adapté aux programmeurs en arrière-plan avec un faible coût d'apprentissage. Le format de données Json interagit avec le front-end et le backend et convient également parfaitement au développement d'une seule page. Les amis intéressés peuvent consulter le site officiel de layui.
Interaction des données front-end et back-end de Layui
layui a son propre ensemble d'interactions de formats de données spécifiques (c'est très important). Les paramètres requis sont le code : 0, msg : ". ", nombre : taille des données (int), données : "Liste de données". Généralement, nous choisissons d'encapsuler et de renvoyer la classe réceptrice.
Layui front-end js demande des données
où le code html
<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>
code js
layui.use(['form','layer','table'], function(){ var table = layui.table ,form = layui.form,$=layui.$; table.render({ elem: '#test' //绑定table id ,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' }); });
code back-end java
@RequestMapping("/list") @ResponseBody @RequiresPermissions("sys:menu:list") public Layui list(@RequestParam Map<String, Object> params){ //查询列表数据 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()); }
Code de l'outil Layui
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 est facultatif ici, vous pouvez l'encapsuler par vous-même
@Data public class PageUtils implements Serializable { private static final long serialVersionUID = -1202716581589799959L; //总记录数 private int totalCount; //每页记录数 private int pageSize; //总页数 private int totalPage; //当前页数 private int currPage; //列表数据 private List<?> list; /** * 分页 * @param list 列表数据 * @param totalCount 总记录数 * @param pageSize 每页记录数 * @param currPage 当前页数 */ 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); } }
En un mot, le format de données final reçu par Layui doit être.
Recommandations associées :
javascript - données interactives php js
données interactives php et java
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!