OA项目之用户登录&首页展示（二）-阿里云开发者社区

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>