layui后台表格的增删改查

最新推荐文章于 2023-10-10 08:45:00 发布

lzm990311

最新推荐文章于 2023-10-10 08:45:00 发布

阅读量1.1w

点赞数 8

分类专栏： java

本文链接：https://blog.csdn.net/lzm123456lq/article/details/96978647

版权

java 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

完整案例
github自己下下来，就是个很一般的ssm项目，但基本功能都有，已部署到云平台。

后台管理员地址
暑假时候没做完凑合看吧

账号 17679210786 密码 123456 前后台都是，前台可以自己用手机号注册，别删除原来的内容

先贴下图：
显示用户界面
在这里插入图片描述

显示用户前端页面

<%--
  Created by IntelliJ IDEA.
  User: 廖泽铭
  Date: 2019/7/22
  Time: 11:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"  media="all">
<script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<html>
<head>
    <title>显示用户</title>
</head>
<body>
<div class="layui-row" id="EditUser" style="display:none;">
    <div class="layui-col-md10">
        <form class="layui-form layui-from-pane" id="updateUser"   style="margin-top:20px" >

            <input type="hidden" name="isadmin" id="isadmin">
            <input type="hidden" name="id" id="id">
            <input type="hidden" name="isforbid" id="isforbid">
            <input type="hidden" name="isable" id="isable">
            <input type="hidden" name="rtime" id="rtime">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="fname" id="fname"  required  lay-verify="required" autocomplete="off" placeholder="请输入用户名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" id="phone" required  lay-verify="required" autocomplete="off" placeholder="请输入年龄" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" id="email" required  lay-verify="required" autocomplete="off" placeholder="请输入邮箱" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="text" name="password" id="password" required  lay-verify="required" autocomplete="off" placeholder="请输入密码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">真实姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="name" required  lay-verify="required" autocomplete="off" placeholder="请输入真实姓名" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item" id="showImg">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-block">
                    <img class="layui-upload-img"  id="imgshow" src="" style="width:100px;height:100px;" >
                </div>
            </div>


            <div  class="layui-upload"  id="updateImg">
                <button type="button"  class="layui-btn layui-btn-primary" id="img" style="margin-top: 30px;margin-left: 10px">修改头像</button>
                <div class="layui-upload-list" style="margin-left: 120px;margin-top: -50px"  >
                    <img class="layui-upload-img" id="demo1" src="" style="width:100px;height:100px;" >
                    <p id="demoText"></p>
                </div>
            </div>

            <input type="hidden" name="headimg" id="headimg" value="" >


            <div class="layui-form-item">
                <label class="layui-form-label">自我介绍</label>
                <div class="layui-input-block">
                    <input type="text" name="introduce" id="introduce" required  lay-verify="required" autocomplete="off" placeholder="请输入自我介绍" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item" style="margin-top:40px" id="check">
                <div class="layui-input-block">
                    <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter="formDemo" >确认修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>


<div class="demoTable" style="padding: 15px">
    搜索手机号：
    <div class="layui-inline">
        <input class="layui-input" id="find" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload" id="queryRole" >搜索</button>
</div>

<table class="layui-hide" id="Users" lay-filter="test"></table>



<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<style type="text/css">
    td div.layui-table-cell{height:60px;
        line-height: 60px;
        position: relative;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
        padding: 0px 15px;
        overflow: hidden;
    }
</style>

<script>
    layui.use(['table', 'form', 'layer','upload'], function () {
        var table = layui.table,
            layer = layui.layer,
            upload = layui.upload,
             // $ = layui.jquery
            form = layui.form;
        table.render({
            elem: '#Users'
            ,url:'${pageContext.request.contextPath}/ShowAllUser.action'
            ,type:'post'
            ,toolbar: '#toolbarDemo'
            ,title: '用户数据表'
            ,totalRow: true
            ,limit:6
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计'}
                ,{field:'fname', title:'用户名', width:100, edit: 'text',sort: true, totalRow: true}
                ,{field:'phone', title:'手机号', width:120, edit: 'text'}
                ,{field:'email', title:'邮箱', width:100, edit: 'text'}
                ,{field:'password', title:'密码', width:120, sort: true,}
                ,{field:'name', title:'名字', width:120,sort: true}
                ,{field:'idcard', title:'身份证号',width:140,sort: true,}
                ,{field:'headimg', title:'头像', width:'10%',sort:true, templet:'<div><img width="120" height="50" src="/file/{{d.headimg}}"></div>'}
                ,{field:'introduce', title:'介绍', width:160}
                ,{field:'rtime', title:'加入时间', width:140, templet:function (d) {
                        var date=new Date(d.rtime)
                        var year = date.getFullYear()+'年';
                        var month = date.getMonth()+1+'月';
                        var date = date.getDate()+'日';
                        var date1=[year,month,date].join('')
                        return date1;
                    }}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
            ]]
            ,page: true

        });


        // 修改头像
        upload.render({
            elem: '#img'
            ,url: '${pageContext.request.contextPath}/picture/upload.action'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                $("[name=headimg]").val(res.data);
                style:'display:inline-block;max-width:50%;height:auto'
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }else {
                    layer.msg("上传成功");
                }
                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });



        //根据phone关键字查询
        $('#queryRole').on('click', function(){
            var find=document.getElementById("find").value;
            table.reload('Users', {
                page:{ curr:1 },
                url:'${pageContext.request.contextPath}/selectUserByPhone.action',
                where:{'phone':find}
           })
        });


        form.on('submit(formDemo)', function(data) {
            $.ajax({
                url:'${pageContext.request.contextPath}/updateUser.action',
                type:'post',
                contentType:'application/json',
                data:JSON.stringify(data.field),
                success:function (msg) {
                    if(msg!=null){
                        layer.closeAll('loading');
                        layer.load(2);
                        layer.msg("修改成功", {icon: 6});
                        setTimeout(function(){
                            layer.closeAll();//关闭所有的弹出层
                            table.reload("Users");
                        }, 1000);
                        加载层-风格
                    }else{
                        layer.msg("修改失败", {icon: 5});
                    }
                }
            })
            return false;
        })



        //工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选')
                    break;
            };
        });


        //监听工具条
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //查看
            if(obj.event === 'detail'){
                $("#check").hide();
                $("#showImg").show();
                $("#updateImg").hide();
                $("#isadmin").val(data.isadmin);
                $("#id").val(data.id);
                $("#isforbid").val(data.isforbid);
                $("#isable").val(data.isable);
                $("#rtime").val(data.rtime);
                $("#fname").val(data.fname);
                $("#phone").val(data.phone);
                $("#email").val(data.email);
                $("#password").val(data.password);
                $("#name").val(data.name);
                $("#idcard").val(data.idcard);
                $('#imgshow').attr('src', "/file/"+data.headimg);
                $('#demo1').attr('src', "/file/"+data.headimg);
                $("#introduce").val(data.introduce);
                layer.open({
                    type:1,
                    title:"查看个人信息",
                    area: ['520px', '540px'],
                    content: $("#EditUser")
                });
                // layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        url:'${pageContext.request.contextPath}/deleteUser.action',
                        type:'GET',
                        data:{
                            id:data.id
                        },
                        success:function (msg) {
                            if(msg=="1"){
                                layer.msg("删除成功", {icon: 6});
                                setTimeout(function(){
                                    layer.closeAll();//关闭所有的弹出层
                                }, 1000);
                                加载层-风格
                            }else{
                                layer.msg("删除失败", {icon: 5});
                            }
                        }
                    })
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                $("#check").show();
                $("#showImg").hide();
                $("#updateImg").show();
                // layer.alert('编辑行：<br>'+ JSON.stringify(obj.data.address))
                // alert(data.fname);
                $("#id").val(data.id);
                $("#fname").val(data.fname);
                $("#phone").val(data.phone);
                $("#email").val(data.email);
                $("#password").val(data.password);
                $("#name").val(data.name);
                $("#idcard").val(data.idcard);
                $('#imgshow').attr('src', "/file/"+data.headimg);
                $('#demo1').attr('src', "/file/"+data.headimg);
                $("#introduce").val(data.introduce);
                layer.open({
                    type:1,
                    title:"修改个人信息",
                    area: ['520px', '590px'],
                    content: $("#EditUser")
                });
            }
        });

    });

</script>

</body>
</html>

表格分页显示后台代码

    @RequestMapping(value="/ShowAllUser.action",method = RequestMethod.GET)
    @ResponseBody
    public PageResult<List<User>> ShowAllUser(@RequestParam(value = "page") int page , int limit) {
        List<User> users = userService.selectAllUser(page,limit);
        //返回的总记录数
        int count=userService.findUserPageCount();
        PageResult<List<User>> listPageResult=new PageResult<List<User>>("",users,0,count);
        return listPageResult;

    }

根据关键字查询的后台代码，因为是查询一条，所以把limit， page都弄为1

    @RequestMapping(value="/selectUserByPhone.action",method = RequestMethod.GET)
    @ResponseBody
    public PageResult<List<User>> selectUserByPhone(@RequestParam(value = "page") int page , int limit,String phone) {

        System.out.println(phone);
        List<User> users = userService.selectUserByPhone(phone);
        PageResult<List<User>> listPageResult=new PageResult<List<User>>("",users,0,1);
        return listPageResult;
    }

表格返回封装的实体类

package com.lzm.utils;

/**
 * @author lzm
 * @create 2019- 06- 05- 9:25
 */
public class PageResult<T> {

    private String msg;
    //返回的数据
    private  T data;
    private  int code;
    //总记录数
    private  int count;


    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public int getCount() {
        return count;
    }

    public void setCount(int count) {
        this.count = count;
    }

    public PageResult(String msg, T data, int code, int count) {
        this.msg = msg;
        this.data = data;
        this.code = code;
        this.count = count;
    }
}

上传图片的工具类

package com.lzm.controller;

import com.lzm.pojo.ImgResult;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

/**
 * @author lzm
 * @create 2019- 07- 11- 23:19
 */
@Controller
public class UploadController {
    //    上传图片
    @RequestMapping(value = "/picture/upload.action",method = RequestMethod.POST)
    @ResponseBody
    public Map<String,Object> fileupload(@RequestParam("file") MultipartFile file) throws IOException {
        Map<String, Object> map = new HashMap<>();
        map.put("code", 1);
        if (file != null && file.getOriginalFilename() != null && file.getOriginalFilename().length() > 0) {
            String filepath="D:\\upload\\";
            //服务器上路径
//               String filepath="/upload/";
            String originalFilename = file.getOriginalFilename();
            //扩展名
            String extendName = originalFilename.substring(originalFilename.indexOf("."));
            String newfilename = UUID.randomUUID().toString() + extendName;
            File uploadfile = new File(filepath + newfilename);
            file.transferTo(uploadfile);
            map.put("data", newfilename);
            map.put("code", 0);
        }
        return map;
    }


//多图片上传
    @SuppressWarnings("deprecation")
    @RequestMapping("/MultipleUpload.action")
    @ResponseBody
    public ImgResult uplpad(MultipartFile file, HttpServletRequest request) {
        String desFilePath = "";
        String oriName = "";
        ImgResult result = new ImgResult();
        Map<String, String> dataMap = new HashMap<>();
        ImgResult imgResult = new ImgResult();
        try {
            // 1.获取原文件名
            oriName = file.getOriginalFilename();
            // 2.获取原文件图片后缀，以最后的.作为截取(.jpg)
            String extName = oriName.substring(oriName.lastIndexOf("."));
            // 3.生成自定义的新文件名，这里以UUID.jpg|png|xxx作为格式（可选操作，也可以不自定义新文件名）
            String uuid = UUID.randomUUID().toString();
            String newName = uuid + extName;
            // 4.获取要保存的路径文件夹
           String realPath="D:\\upload\\";
//           String realPath="/upload/";
            // 5.保存
            desFilePath = realPath + "\\" + newName;
            File desFile = new File(desFilePath);
            file.transferTo(desFile);
            System.out.println(desFilePath);
            // 6.返回保存结果信息
            result.setCode(0);
            dataMap = new HashMap<>();
            dataMap.put("src", newName);
            result.setData(dataMap);
            result.setMsg(oriName + "上传成功！");
            return result;
        } catch (IllegalStateException e) {
            imgResult.setCode(1);
            System.out.println(desFilePath + "图片保存失败");
            return imgResult;
        } catch (IOException e) {
            imgResult.setCode(1);
            System.out.println(desFilePath + "图片保存失败--IO异常");
            return imgResult;
        }
    }
}

上传图片返回的实体类，通过图片上传将图片存在硬盘中的位置，并返回图片的文件名，并赋值给文本域，最后提交，提交到数据库的是图片的文件名

package com.lzm.pojo;

import java.util.Map;

/**
 * 图片上传建议返回格式 ，当然可以不这么定义
 * { 
 * code": 0 , 
 * msg": "" , 
 * data": { "
 * src":"http://cdn.layui.com/123.jpg" } }
 * 
 * @author liuxuquan
 * @des 根据需要返回的数据格式产生的pojo
 *
 */
public class ImgResult {
	
	//0 表示成功 1表示失败
	private Integer code;
	//信息
	private String msg;
	//url
	private Map<String, String> data;
	
	private Integer totalCount=0;
	private Integer successCount=0;
	private Integer failCount=0;
	
	public ImgResult() {
	}

	public ImgResult(Integer code, String msg, Map<String, String> data) {
		this.code = code;
		this.msg = msg;
		this.data = data;
	}

	public Integer getCode() {
		return code;
	}

	public void setCode(Integer code) {
		this.code = code;
	}

	public String getMsg() {
		return msg;
	}

	public void setMsg(String msg) {
		this.msg = msg;
	}

	public Map<String, String> getData() {
		return data;
	}

	public void setData(Map<String, String> data) {
		this.data = data;
	}

	public Integer getTotalCount() {
		return totalCount;
	}

	public void setTotalCount(Integer totalCount) {
		this.totalCount = totalCount;
	}

	public Integer getSuccessCount() {
		return successCount;
	}

	public void setSuccessCount(Integer successCount) {
		this.successCount = successCount;
	}

	public Integer getFailCount() {
		return failCount;
	}

	public void setFailCount(Integer failCount) {
		this.failCount = failCount;
	}

}

增加用户界面
在这里插入图片描述

增加用户的前端，主要的就是上传图片后返回图片名

<%--
  Created by IntelliJ IDEA.
  User: 廖泽铭
  Date: 2019/7/23
  Time: 10:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"  media="all">
<script src="${pageContext.request.contextPath}/layui/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/js/jquery.js"></script>
<html>
<head>
    <title>增加用户</title>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>增加用户</legend>
</fieldset>
<form class="layui-form"  action="" style="margin-left: 30px">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="fname" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div  class="layui-upload"  id="updateImg" >
        <label class="layui-form-label">用户头像</label>
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="demo1" src="/file/${sessionScope.user.headimg}" style="width:100px;height:100px;" >
            <p id="demoText"></p>
        </div>
        <button type="button"  class="layui-btn" id="img"  style="margin-left: 110px;margin-bottom: 20px">上传头像</button>
    </div>

    <input type="hidden" name="headimg" id="headimg" value="" >

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="tel" name="phone" lay-verify="required|phone" placeholder="请输入手机号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input type="text" name="email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">真实姓名</label>
        <div class="layui-input-block">
            <input type="text" name="name" required  lay-verify="required" placeholder="请输入真实姓名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">身份证号</label>
        <div class="layui-input-block">
            <input type="text" name="idcard" lay-verify="identity"   placeholder="请输入身份证号" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">个人介绍</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入个人介绍" name="introduce" class="layui-textarea"></textarea>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" id="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script>
    //Demo
    layui.use([ 'form', 'layer','upload'], function () {
        var form = layui.form;
            layer = layui.layer,
            upload = layui.upload,

        //监听提交
        form.on('submit(formDemo)', function(data){
            $.ajax({
                url:'${pageContext.request.contextPath}/AddUser.action',
                type:'post',
                contentType:'application/json',
                data:JSON.stringify(data.field),
                success:function (msg) {
                    if(msg==1){
                        layer.closeAll('loading');
                        layer.load(2);
                        layer.msg("添加成功", {icon: 6});
                        setTimeout(function(){
                            layer.closeAll();//关闭所有的弹出层
                        }, 1000);
                        $("#reset").trigger("click");
                        $('#demo1').attr('src', "/file/${sessionScope.user.headimg}");
                        加载层-风格
                    }else if (msg==0) {
                        layer.msg("用户名重复", {icon: 5});
                    }
                    else if (msg==2) {
                        layer.msg("手机号已注册", {icon: 5});
                    }
                }
            })
            return false;
        });


        // 修改头像
        upload.render({
            elem: '#img'
            ,url: '${pageContext.request.contextPath}/picture/upload.action'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                $("[name=headimg]").val(res.data);
                style:'display:inline-block;max-width:50%;height:auto'
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }else {
                    layer.msg("上传成功");
                }
                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            }
        });
    });
</script>
</body>
</html>