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的官方文档写的不好，因为好多东西拿过来不能直接使用，但其实他官网上好多示例都需要请求到数据才能执行。

posted on 2021-07-16 12:10  癫狂编程  阅读(621)  评论(0)  编辑  收藏  举报

导航

好的代码像粥一样，都是用时间熬出来的