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的官方文档写的不好，因为好多东西拿过来不能直接使用，但其实他官网上好多示例都需要请求到数据才能执行。
好的代码像粥一样，都是用时间熬出来的
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
