login.jsp（登录界面）
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <%@include file="/common/head.jsp" %> <style> body { color: #; } a { color: #; } a:hover { color: #; } .bg-black { background-color: #; } #bg-video { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } </style> <script type="text/javascript"> layui.use(['layer', 'jquery'], function() { let layer=layui.layer; let $=layui.jquery; $("#login").click(function() { $.ajax({ url: ctx+"/userAction.action?methodName=login", data: { loginName: $("#username").val(), pwd: $("#password").val() }, dataType: 'json', type: 'post', success: function(data) { if(data.code == 1) { layer.msg(data.msg,{icon:1},function(){ location.href="index.jsp"; }); }else{ layer.msg(data.msg,{icon:5},function(){}); } } }) }); }); </script> </head> <body class="tx-login-bg"> <video id="bg-video" autoplay muted loop> <source src="${ctx}/images/4.mp4" type="video/mp4"> </video> <div class="tx-login-box"> <div class="login-avatar bg-black"> <img alt="" src="images/壁纸3.png" style="width:100px;height:65px;border-radius:50%"> </div> <ul class="tx-form-li row"> <li class="col-24 col-m-24"><p><input type="text" id="username" value="yaoyao" placeholder="登录账号" class="tx-input"></p></li> <li class="col-24 col-m-24"><p><input type="password" id="password" value="1234" placeholder="登录密码" class="tx-input"></p></li> <li class="col-24 col-m-24"><p class="tx-input-full"><button id="login" class="tx-btn tx-btn-big bg-black">登录</button></p></li> <li class="col-12 col-m-12"><p><a href="#" class="f-12 f-gray">新用户注册</a></p></li> <li class="col-12 col-m-12"><p class="ta-r"><a href="#" class="f-12 f-gray">忘记密码</a></p></li> </ul> </div> </body> </html>
userManage.jsp (数据绑定，修改，删除)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <%@ include file="/common/head.jsp" %> <title>数据绑定</title> <style> .layui-inline { margin-top: 20px; } </style> <script> let table=null; let $ = null; var row = null; layui.use(['table','jquery'], function(){ table = layui.table; $ = layui.jquery; loadUsers(); $("#queryUser").click(function() { loadUsers(); }); table.on('tool(userTable)', function(e) { // console.log(e); row = e.data; //console.log(row); if('edit' == e.event) { layer.open({ type: 2, //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层） title: '增加用户', area: ['660px', '350px'], //宽高 skin: 'layui-layer-rim', //样式类名 content: ctx+'/jsp/system/userEdit.jsp' }); } if('del' == e.event) { // alert("del = " + row.id); row = e.data; //console.log(row); layer.confirm("亲,真的删除吗?",function(index){ e.del(); layer.close(index); //发送请求到后台调用删除方法 $.ajax({ url: ctx+"/userAction.action?methodName=deleteUser", data: row, type: 'post', dataType: 'json', success: function(resp){ if(resp.code == 0){ var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); loadUsers(); } else{ alert("no"); } } }) }) } if('reset'==e.event){ row = e.data; //console.log(row); layer.confirm("亲,真的重置吗?",function(index){ layer.close(index); //发送请求到后台调用删除方法 $.ajax({ url: ctx+"/userAction.action?methodName=resetPwd", data: row, type: 'post', dataType: 'json', success: function(resp){ if(resp.code == 0){ var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); loadUsers(); } else{ alert("no"); } } }) }) } }); $("#addUser").click(function() { row = null; layer.open({ type: 2, //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层） title: '增加用户', area: ['660px', '350px'], //宽高 skin: 'layui-layer-rim', //样式类名 content: ctx+'/jsp/system/userEdit.jsp' }); }); }); function loadUsers() { table.render({ elem: '#userTable', url: ctx + '/userAction.action?methodName=listUser', cols: [[ {field:'id', width:80, title: 'ID'}, {field:'name', width:180, title: '姓名', sort: true}, {field:'loginName', width:180, title: '登录名', sort: true}, {field:'roleName', width:180, title: '角色'}, {field: '', title: '操作', width: 250, toolbar:'#toolbar'} ]], page: true, request: { pageName: 'page', limitName: 'rows' }, method: 'post', where: { name: $("#name").val() }, loading: true, }); } </script> </head> <body> <!-- 查询条件 --> <div class="layui-inline"> <label class="layui-form-label">姓名：</label> <div class="layui-input-block"> <input type="text" name="name" id="name" placeholder="名称" class="layui-input"> </div> </div> <div class="layui-inline"> <button class="layui-btn" id="queryUser"><i class="layui-icon layui-icon-search"></i>查询</button> <button class="layui-btn layui-btn-normal" id="addUser"><i class="layui-icon layui-icon-add-1"></i>增加</button> </div> <!-- 用户信息表格 --> <table class="layui-hide" id="userTable" lay-filter="userTable"></table> <!-- 工具条 --> <script type="text/html" id="toolbar"> <button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button> <button class="layui-btn layui-btn-sm" lay-event="del">删除</button> <button class="layui-btn layui-btn-sm" lay-event="reset">重置密码</button> </script> </body> </html>
userEdit.jsp（用户新增）
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>新增用户</title> <%@include file="/common/head.jsp" %> <script type="text/javascript"> let layer,form,$; layui.use(['jquery', 'layer','form'],function() { layer=layui.layer,form=layui.form,$=layui.jquery; debugger; //获取用户信息，并回填在表单中，同时将name属性设置为只读，将密码隐藏（不允许在此处改密码） if(null!=parent.row){ form.val('user',$.extend({}, parent.row||{})); $('#name').attr("readonly","readonly"); $('#password').hide(); } form.on('submit(user)', function(data){ let id = $("#id").val(); //如果有id则说明是修改，否则为新增 if(!id) { //增加 $.ajax({ url: ctx + "/userAction.action?methodName=addUser", data: data.field, type: 'post', dataType: 'json', success: function(resp) { if(resp.code == 0) { layer.msg(resp.msg); var index = parent.layer.getFrameIndex(window.name); //再执行关闭 parent.layer.close(index); parent.loadUsers(); } } }); } else { //修改 $.ajax({ url: ctx + "/userAction.action?methodName=updateUser", data: data.field, type: 'post', dataType: 'json', success: function(resp) { if(resp.code == 0) { layer.msg(resp.msg); var index = parent.layer.getFrameIndex(window.name); //再执行关闭 parent.layer.close(index); parent.loadUsers(); } } }); } }); }); </script> </head> <body> <div style="padding:10px;"> <form id="user" class="layui-form layui-form-pane" lay-filter="user"> <input type="hidden" name="id" id="id"/> <div class="layui-form-item"> <label class="layui-form-label">用户名称</label> <div class="layui-input-block"> <input type="text" id="name" name="name" autocomplete="off" placeholder="请输入用户名" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">用户角色</label> <div class="layui-input-block"> <select name="rid"> <option value="">---请选择---</option> <option value="1">管理员</option> <option value="2">发起者</option> <option value="3">审批者</option> <option value="4">参与者</option> <option value="5">会议管理员</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">登录账号</label> <div class="layui-input-block"> <input type="text" name="loginName" lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item" id="password"> <label class="layui-form-label">登录密码</label> <div class="layui-input-block"> <input type="password" name="pwd" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item" style="text-align:center;"> <button type="button" lay-submit="" lay-filter="user" class="layui-btn layui-btn-normal">保存</button> <button type="reset" class="layui-btn">重置</button> </div> </form> </div> </body> </html>
效果展示
登录界面
绑定数据
新增界面 
删除界面
修改界面
