layui与java后台交互
时间:2021-07-16
本文章向大家介绍layui与java后台交互,主要包括layui与java后台交互使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
layui是现在比较火的一个前端设计框架,下面介绍一下它的数据分页及其与java后台的交互。
一、返回的Json格式
按照layui官网给的示例,自己封装了工具类
public class LayuiReplay <T> { private int code; private String msg; private int count; private List<T> data; public LayuiReplay(int code, String msg, int count, List<T> data) { this.code = code; this.msg = msg; this.count = count; this.data = data; } public String toJson() { Gson gson = new Gson(); String json = gson.toJson(this); return json; } public static <T> String toJson(int count, List<T> data) { LayuiReplay<T> replay = new LayuiReplay<>(ReplyCode.OK.getCode(), ReplyCode.OK.getMessage(), count, data); return replay.toJson(); } public int getCode() { return code; } public void setCode(int code) { this.code = code; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public int getCount() { return count; } public void setCount(int count) { this.count = count; } public List<T> getData() { return data; } public void setData(List<T> data) { this.data = data; } }
二、前台代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="../../tools/layui/css/layui.css" media="all"> <title>社区用户管理</title> </head> <body> <!--社区用户数据分页显示--> <div style="width: 95%;margin: 0 auto;"> <table class="layui-hide" id="user_info_manager" lay-filter="user_info_manager_filter"></table> </div> <!--状态展示 --> <script type="text/html" id="status"> {{# if(d.isLocked == 1){ }} <i class="layui-icon" style="color: #1E9FFF;">စ正常</i> {{# } }} {{# if(d.isLocked == 0){ }} <i class="layui-icon">待激活</i> {{# } }} {{# if(d.isLocked == 2) { }} <i class="layui-icon">ဆ锁定</i> {{# } }} </script> <!--时间格式修改 --> <script id="createTime" type="text/html"> {{timestampToTime(d.createTime)}} </script> <script id="updateTime" type="text/html"> {{timestampToTime(d.updateTime)}} </script> <!--操作--> <script type="text/html" id="barDemo"> {{# if(d.isLocked == 0){ }} <a class="layui-btn layui-btn-disabled layui-btn-xs" lay-event="user_unlock">不可操作</a> {{# } }} {{# if(d.isLocked == 1){ }} <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="user_lock">锁定</a> {{# } }} {{# if(d.isLocked == 2){ }} <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="user_unlock">已锁定</a> {{# } }} </script> <!--引入的js --> <script type="text/javascript" src="../../tools/layui/layui.js"></script> <script type="text/javascript" src="../../tools/bootstrap/js/jquery-2.1.0.js" ></script> <script type="text/javascript" src="../../js/web/user_info_manage.js"></script> </body> </html>
$(function() { /*社区用户数据分页显示*/ layui.use('table', function() { var table = layui.table; table.render({ elem: '#user_info_manager', height: 'full-50', url: 'http://localhost:9901/user/getAllUserInfo', page: true , loading: true, text: { none: '暂无相关数据' }, cellMinWidth: 80, cols: [ [{ field: 'username', width: '10%', title: '用户名', sort: true }, { field: 'nickname', width: '10%', title: '昵称', sort: true }, { field: 'email', width: '13%', title: '邮箱' }, { field: 'phone', width: '12%', title: '电话' }, { field: 'address', width: '10%', title: '地址', minWidth: 100 }, { field: 'createTime', width: '13%', title: '创建时间', templet: '#createTime' }, { field: 'updateTime', width: '13%', title: '更新时间', templet: '#updateTime' }, { field: 'isLocked', width: '10%', title: '当前状态', templet: '#status' }, { fixed: 'right', width: '9%', align: 'center', title: '操作', toolbar: '#barDemo' }] ], request: { pageName: 'page', limitName: 'size' }, limit: 10, limits: [10, 20, 30, 40, 50] }); //监听工具条 table.on('tool(user_info_manager_filter)', function(obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值" //获得当前行数据 var data = obj.data; layEvent = obj.event; //获得 lay-event 对应的值 if(layEvent === 'user_lock') { //锁定用户 layer.confirm('您确定要锁定此用户吗?', {icon: 3, title:'锁定用户'}, function(index){ $.get("http://localhost:9901/user/lockUser/2/" + data.username, function(result) { if(result.status == 200) { layer.msg('已锁定', { icon: 1, time: 2000 }, function(){ window.location.reload() }); } else { layer.msg(result.msg, { icon: 2, time: 2000 }, function(){ window.location.reload() }); } }) }); } else if(layEvent === 'user_unlock') { //解锁用户 layer.confirm('您确定要解锁此用户吗?', {icon: 3, title:'解锁用户'}, function(index){ $.get("http://localhost:9901/user/lockUser/1/" + data.username, function(result) { if(result.status == 200) { layer.msg('已解锁', { icon: 1, time: 2000 }, function(){ window.location.reload() }); } else { layer.msg(result.msg, { icon: 2, time: 2000 }, function(){ window.location.reload() }); } }) }); } }); }); }); <!--时间格式化--> function timestampToTime(timestamp) { var date = new Date(timestamp);//时间戳为10位需*1000,时间戳为13位的话不需乘1000 Y = date.getFullYear() + '-'; M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'; D = date.getDate() + ' '; h = date.getHours() + ':'; m = date.getMinutes() + ':'; s = date.getSeconds(); return Y+M+D+h+m+s; }
在js的table.render中,cols的field字段对应后台po的属性,template链接到html中的的script标签,用于格式化一些数据,或者按照自己的意愿显示。
三、po类
package com.jingling.basic.po; import java.io.Serializable; import java.sql.Timestamp; /** * @Source: JDK 1.8 * @Author: Zhao * @Since: version 1.0 **/ public class User implements Serializable { private Integer id; private String username; private String nickname; private String password; private String openid; private String unionid; private String email; private String phone; private String address; private String salt; private String validateCode; private String isLocked; private Timestamp createTime; private Timestamp updateTime; public User() { } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getNickname() { return nickname; } public void setNickname(String nickname) { this.nickname = nickname; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public String getOpenid() { return openid; } public void setOpenid(String openid) { this.openid = openid; } public String getUnionid() { return unionid; } public void setUnionid(String unionid) { this.unionid = unionid; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } public String getPhone() { return phone; } public void setPhone(String phone) { this.phone = phone; } public String getAddress() { return address; } public void setAddress(String address) { this.address = address; } public String getSalt() { return salt; } public void setSalt(String salt) { this.salt = salt; } public String getValidateCode() { return validateCode; } public void setValidateCode(String validateCode) { this.validateCode = validateCode; } public String getIsLocked() { return isLocked; } public void setIsLocked(String isLocked) { this.isLocked = isLocked; } public Timestamp getCreateTime() { return createTime; } public void setCreateTime(Timestamp createTime) { this.createTime = createTime; } public Timestamp getUpdateTime() { return updateTime; } public void setUpdateTime(Timestamp updateTime) { this.updateTime = updateTime; } }
四、controller代码
@GetMapping("/getAllUserInfo") public Object getAllUserInfo(@RequestParam("page") Integer page, @RequestParam("size") Integer size) { int count = userService.getUserCount(); List<User> userList = userService.getAllUserInfo(page, size); return new LayuiReplay<User>(0, "OK", count, userList); }
layui要求,不仅传入数据,还得传入数据的总数,这样就可以使用其自带的分页效果。
五、小结
layui的交互其实并不难,很多人觉得layui的官方文档写的不好,因为好多东西拿过来不能直接使用,但其实他官网上好多示例都需要请求到数据才能执行。
好的代码像粥一样,都是用时间熬出来的
原文地址:https://www.cnblogs.com/jijm123/p/15019514.html
- 树莓派:你是我的眼
- redis 学习笔记(7)-cluster 客户端(jedis)代码示例
- Python应用03 使用PyQT制作视频播放器
- struts2(三)之表单参数自动封装与参数类型自动转换
- mysql benchmark基准测试
- redis 学习笔记(6)-cluster集群搭建
- redis 学习笔记(6)-cluster集群搭建
- dubbox REST服务使用fastjson替换jackson
- JavaScript中removeEventListener()使用注意事项
- dubbox REST服务使用fastjson替换jackson
- struts2(二)之配置文件详解与结果视图
- CSS魔法堂:你真的懂text-align吗?
- 黑客可以利用传感器数据来破解手机密码
- spring-boot 速成(3) actuator
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- C语言面试题——位域及大小端模式的理解
- stm32添加串口调试
- STM32单片机极简方法 使用宏定义 代替复杂的重定向printf()函数,实现串口打印。(HAL库例程)
- 机器学习(六)— logistic回归
- 如果简化stm32中printf函数的使用——首先重定向
- TF-IDF算法(2)—python实现
- C语言定义数组时使用枚举作为数组的下标
- 机器学习(七)—回归
- C语言定义数组时使用枚举作为数组的下标 ——c99功能
- C语言——for循环和while循环的效率区别——类似哨兵思想
- 机器学习(八)—Apriori算法
- 机器学习(九)—FP-growth算法
- LeetCode — (1)
- Django初体验——搭建简易blog
- Python开发简单记事本