• Layui之用户管理实例

    录目

    一、前期准备

    二、后端代码

    三、前端代码

    一、前期准备

            前言：

    上一次我们分享了layui的动态添加选项卡，这次要分享的内容是基于上一次的动态选项卡，在选项卡中使用layui完成用户管理功能。

            目的效果展示：

            数据库准备：

     

            LayUi官网找到对应的代码源 

     以及我们目的效果图还需要搜索框的组件：

    我们将官网的前端代码以及js代码copy至我们的jsp页面中即可开始进一步编写后端代码，再我们要根据目的效果图进行修改

    二、后端代码

    UserDao：

    1. package com.zking.dao;
    2.  
    3. import java.sql.SQLException;
    4. import java.util.List;
    5. import java.util.Map;
    6.  
    7. import com.zking.entity.User;
    8. import com.zking.util.BaseDao;
    9. import com.zking.util.PageBean;
    10. import com.zking.util.StringUtils;
    11.  
    12. public class UserDao extends BaseDao{
    13. 	public User login(User user) throws Exception {
    14. 		String sql = "select * from t_oa_user where loginName = '"+user.getLoginName()+"' and pwd = '"+user.getPwd()+"'";
    15. 		List users = super.executeQuery(sql, User.class,null);
    16. 		return users == null || users.size() == 0 ? null : users.get(0);
    17. 	}
    18. 	
    19. //	查询用户信息以及对应角色，角色通过case when得出
    20. 	public List> list(User user,PageBean pageBean) throws Exception{
    21. 		String sql = "SELECT * \r\n" + 
    22. 				",( CASE rid \r\n" + 
    23. 				"WHEN 1 THEN '管理员' \r\n" + 
    24. 				"WHEN 2 THEN '发起者' \r\n" + 
    25. 				"WHEN 3 THEN '审批者' \r\n" + 
    26. 				"WHEN 4 THEN '参与者' \r\n" + 
    27. 				"WHEN 5 THEN '会议室管理员' \r\n" + 
    28. 				"ELSE '其他' END ) roleName \r\n" + 
    29. 				"FROM \r\n" + 
    30. 				"t_oa_user where 1=1";
    31. 		String name = user.getName();
    32. 		if(StringUtils.isNotBlank(name)) {
    33. 			sql += " and name like '%"+name+"%'";
    34. 		}
    35. 		return super.executeQuery(sql, pageBean);
    36. 	}
    37. 	
    38. 	public int add(User user) throws Exception {
    39. 		String sql = "insert into t_oa_user(name,loginName,pwd) values(?,?,?)";
    40. 		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd"});
    41. 	}
    42. 	
    43. 	public int del(User user) throws Exception {
    44. 		String sql = "delete from t_oa_user where id = ?";
    45. 		return super.executeUpdate(sql, user, new String[] {"id"});
    46. 	}
    47. 	
    48. 	public int edit(User user) throws Exception {
    49. 		String sql = "update t_oa_user set where name=?,loginName=?,pwd=? where id=?";
    50. 		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd","id"});
    51. 	}
    52. }

    在这里建议大家可以使用Junit进行测试在这丽小编就不展示了！

     UserACtion：
     

    1. package com.zking.web;
    2.  
    3. import java.util.List;
    4. import java.util.Map;
    5.  
    6. import javax.servlet.http.HttpServletRequest;
    7. import javax.servlet.http.HttpServletResponse;
    8.  
    9. import com.zking.dao.UserDao;
    10. import com.zking.entity.User;
    11. import com.zking.framework.ActionSupport;
    12. import com.zking.framework.ModelDriver;
    13. import com.zking.util.PageBean;
    14. import com.zking.util.R;
    15. import com.zking.util.ResponseUtil;
    16.  
    17. public class UserAction extends ActionSupport implements ModelDriver{
    18. 	private User user = new User();
    19. 	private UserDao userDao = new UserDao();
    20. 	public String login(HttpServletRequest req, HttpServletResponse resp) {
    21. 		try {
    22. 			User u = userDao.login(user);
    23. 			if(u != null) {
    24. 				ResponseUtil.writeJson(resp, R.ok(200, "成功"));
    25. 			}else {
    26. 				ResponseUtil.writeJson(resp, R.error(0, "账户或密码错误"));
    27. 				
    28. 			}
    29. 		} catch (Exception e) {
    30. 			e.printStackTrace();
    31. 			try {
    32. 				ResponseUtil.writeJson(resp, R.error(0, "账户或密码错误"));
    33. 			} catch (Exception e1) {
    34. 				// TODO Auto-generated catch block
    35. 				e1.printStackTrace();
    36. 			}
    37. 		}
    38. 		return null;
    39. 	}
    40. 	
    41. //	用户查询
    42. 	public String list(HttpServletRequest req, HttpServletResponse resp) {
    43. 		try {
    44. 			PageBean pageBean = new PageBean();
    45. 			pageBean.setRequest(req);
    46. 			List> list = userDao.list(user, pageBean);
    47. //			遵循layui中的格式
    48. 			ResponseUtil.writeJson(resp, R.ok(0, "用户数据查询成功",pageBean.getTotal(),user));
    49. 		} catch (Exception e) {
    50. 			e.printStackTrace();
    51. 			try {
    52. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据查询失败"));
    53. 			} catch (Exception e1) {
    54. 				// TODO Auto-generated catch block
    55. 				e1.printStackTrace();
    56. 			}
    57. 		}
    58. 		return null;
    59. 	}
    60. 	
    61. 	public String add(HttpServletRequest req, HttpServletResponse resp) {
    62. 		try {
    63. 			int rs = userDao.add(user);
    64. 			if(rs>0) {
    65. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据新增成功"));
    66. 			}else {
    67. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据新增失败"));
    68. 			}
    69. 		} catch (Exception e) {
    70. 			e.printStackTrace();
    71. 			try {
    72. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据新增失败"));
    73. 			} catch (Exception e1) {
    74. 				// TODO Auto-generated catch block
    75. 				e1.printStackTrace();
    76. 			}
    77. 		}
    78. 		return null;
    79. 	}
    80. 	
    81. 	public String del(HttpServletRequest req, HttpServletResponse resp) {
    82. 		try {
    83. 			int rs = userDao.del(user);
    84. 			if(rs>0) {
    85. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据删除成功"));
    86. 			}else {
    87. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据删除失败"));
    88. 			}
    89. 		} catch (Exception e) {
    90. 			e.printStackTrace();
    91. 			try {
    92. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据删除失败"));
    93. 			} catch (Exception e1) {
    94. 				// TODO Auto-generated catch block
    95. 				e1.printStackTrace();
    96. 			}
    97. 		}
    98. 		return null;
    99. 	}
    100. 	public String edit(HttpServletRequest req, HttpServletResponse resp) {
    101. 		try {
    102. 			int rs = userDao.add(user);
    103. 			if(rs>0) {
    104. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据修改成功"));
    105. 			}else {
    106. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据修改失败"));
    107. 			}
    108. 		} catch (Exception e) {
    109. 			e.printStackTrace();
    110. 			try {
    111. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据修改失败"));
    112. 			} catch (Exception e1) {
    113. 				// TODO Auto-generated catch block
    114. 				e1.printStackTrace();
    115. 			}
    116. 		}
    117. 		return null;
    118. 	}
    119.  
    120. 	@Override
    121. 	public User getModel() {
    122. 		return user;
    123. 	}
    124. 	
    125. }

    配置文件在之前已经配置完成了，有第一次点进小编博客的可以参考前面的第三篇文章完成XML文件配置 

    三、前端代码

    前端代码我们首先分析不仅仅是只有一个用户管理的目的界面，我们点击新增和修改的时候还需要弹出类似于模态框的新界面所以一共是两个界面

    UserManage.jsp

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2. 	pageEncoding="UTF-8"%>
    3. <%@include file="/common/header.jsp"%>
    4. html>
    5. <html>
    6. <head>
    7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    8. <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/system/userManage.js">script>
    9. <title>用户管理title>
    10. head>
    11. <body>
    12. 	
    13. 	<div class="layui-form-item">
    14. 	  <div class="layui-inline">
    15. 	    <label class="layui-form-label">用户名：label>
    16. 	    <div class="layui-input-inline">
    17. 	      <input type="text" id="name" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    18. 	    div>
    19. 	  div>
    20. 	  
    21. 	  <div class="layui-inline">
    22. 	    <div class="layui-input-inline">
    23. 	      <button id="btn_search" type="button" class="layui-btn layui-btn-normal">
    24. 	      	<i class="layui-icon layui-icon-search">i>
    25. 	      	查询
    26. 	      button>
    27. 	      <button id="btn_add" type="button" class="layui-btn">新增button>
    28. 	    div>
    29. 	  div>
    30. 	  
    31. 	div>
    32. 	
    33. 	<table id="tb" lay-filter="tb" class="layui-table" style="margin-top:-15px;">table>
    34. 	
    35. 	
    36. 	<script type="text/html" id="toolbar">
    37.  		<button class="layui-btn layui-btn-sm" lay-event="edit">编辑button>
    38.  		<button class="layui-btn layui-btn-sm" lay-event="del">删除button>
    39.  		<button class="layui-btn layui-btn-sm" lay-event="reset">重置密码button>
    40. 	script>
    41. body>
    42. html>

    userEdit.jsp

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2. 	pageEncoding="UTF-8"%>
    3. <%@include file="/common/header.jsp"%>
    4. html>
    5. <html>
    6. <head>
    7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    8. <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/system/userEdit.js">script>
    9. <title>用户新增title>
    10. head>
    11. <style>
    12. .layui-form-select dl{
    13. 	max-height:150px;
    14. }
    15. style>
    16. <body>
    17. <div style="padding:10px;">
    18.     <form class="layui-form layui-form-pane" lay-filter="user">
    19.         <input type="hidden" name="id"/>
    20.         <div class="layui-form-item">
    21.             <label class="layui-form-label">用户名称label>
    22.             <div class="layui-input-block">
    23.                 <input type="text" id="name" name="name" autocomplete="off" placeholder="请输入用户名" class="layui-input">
    24.             div>
    25.         div>
    26.         <div class="layui-form-item">
    27.             <label class="layui-form-label">用户角色label>
    28.             <div class="layui-input-block">
    29.                 <select name="rid">
    30.                     <option value="">---请选择---option>
    31.                     <option value="1">管理员option>
    32.                     <option value="2">发起者option>
    33.                     <option value="3">审批者option>
    34.                     <option value="4">参与者option>
    35.                     <option value="5">会议管理员option>
    36.                 select>
    37.             div>
    38.         div>
    39.         <div class="layui-form-item">
    40.             <label class="layui-form-label">登录账号label>
    41.             <div class="layui-input-block">
    42.                 <input type="text" name="loginName" lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
    43.             div>
    44.         div>
    45.         <div class="layui-form-item">
    46.             <label class="layui-form-label">登录密码label>
    47.             <div class="layui-input-block">
    48.                 <input type="password" name="pwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
    49.             div>
    50.         div>
    51.     form>
    52. div>
    53. body>
    54. html>

    对应的JS逻辑代码进行封装：

     userManage.js:

    1. let layer,$,table;
    2. var row;
    3. layui.use(['jquery','layer','table'],function(){
    4. 	layer=layui.layer,
    5. 	$=layui.jquery,
    6. 	table=layui.table;
    7. 	//初始化表格
    8. 	initTable();
    9. 	//绑定查询按钮的点击事件
    10. 	$('#btn_search').click(function(){
    11. 		query();
    12. 	});
    13. 	
    14. 	//绑定新增按钮的点击事件
    15. 	$('#btn_add').click(function(){
    16. 		row=null;
    17. 		open('新增');
    18. 	});
    19. });
    20.  
    21. //1.初始化数据表格
    22. function initTable(){
    23. 	table.render({           //执行渲染
    24.         elem: '#tb',         //指定原始表格元素选择器（推荐id选择器）
    25. //        url: 'user.action?methodName=list',     //请求地址
    26.         height: 340,         //自定义高度
    27.         loading: false,      //是否显示加载条（默认 true）
    28.         cols: [[             //设置表头
    29.             {field: 'id', title: '用户编号', width: 120},
    30.             {field: 'name', title: '用户名', width: 120},
    31.             {field: 'loginName', title: '登录账号', width: 140},
    32.             {field: '', title: '操作', width: 220,toolbar:'#toolbar'},
    33.         ]]
    34.     });
    35. 	
    36. 	//在页面中的中必须配置lay-filter="tb_goods"属性才能触发属性!!!
    37. 	table.on('tool(tb)', function (obj) {
    38. 		row = obj.data;
    39. 		if (obj.event == "edit") {
    40. 			open("编辑");
    41. 		}else if(obj.event == "del"){
    42. 			layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
    43. 			  $.post($("#ctx").val()+'/user.action',{
    44. 				  'methodName':'del',
    45. 				  'id':row.id
    46. 			  },function(rs){
    47. 				  if(rs.success){
    48. 	        		   //调用查询方法刷新数据
    49. 	        		   query();
    50. 	        	   }else{
    51. 	        		   layer.msg(rs.msg,function(){});
    52. 	        	   }
    53. 			  },'json');
    54. 			  layer.close(index);
    55. 			});
    56. 		}else{
    57.  
    58. 		}
    59. 	});
    60. }
    61.  
    62. //2.点击查询
    63. function query(){
    64. 	table.reload('tb', {
    65.         url: $("#ctx").val()+'/user.action',     //请求地址
    66.         method: 'POST',                    //请求方式，GET或者POST
    67.         loading: true,                     //是否显示加载条（默认 true）
    68.         page: true,                        //是否分页
    69.         where: {                           //设定异步数据接口的额外参数，任意设
    70.         	'methodName':'list',
    71.         	'name':$('#name').val()
    72.         },  
    73.         request: {                         //自定义分页请求参数名
    74.             pageName: 'page', //页码的参数名称，默认：page
    75.             limitName: 'rows' //每页数据量的参数名，默认：limit
    76.         }
    77.    });
    78. }
    79.  
    80. //3.对话框
    81. function open(title){
    82.     layer.open({
    83.        type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    84.        title:title,
    85.        area: ['660px', '340px'],   //宽高
    86.        skin: 'layui-layer-rim',    //样式类名
    87.        content:  $("#ctx").val()+'/jsp/system/userEdit.jsp', //书本编辑页面
    88.        btn:['保存','关闭'],
    89.        yes: function(index, layero){
    90.     	   //jquery.find
    91.     	   //调用子页面中提供的getData方法，快速获取子页面的form表单数据
    92.            let data= $(layero).find("iframe")[0].contentWindow.getData();
    93.            console.log(data);
    94.            //判断title标题
    95.            let methodName="add";
    96.            if(title=="编辑")
    97.         	   methodName="edit";
    98.            $.post($("#ctx").val()+'/user.action?methodName='+methodName,
    99.         		   data,function(rs){
    100.         	   if(rs.success){
    101.         		   //关闭对话框
    102.         		   layer.closeAll();
    103.         		   //调用查询方法刷新数据
    104.         		   query();
    105.         	   }else{
    106.         		   layer.msg(rs.msg,function(){});
    107.         	   }
    108.            },'json');
    109.        },
    110.        btn2: function(index, layero){
    111.     	   layer.closeAll();
    112.        },
    113.     });
    114.  }
    115.         userEdit.jsp
      116. userEdit.js
      1.  
      2. let layer,form,$;
      3. layui.use(['layer','form','jquery'],function(){
      4. 	layer=layui.layer,form=layui.form,$=layui.jquery;
      5. 	initData();
      6. });
      7.  
      8. function initData(){
      9. 	console.log(parent.row);
      10. 	if(null!=parent.row){
      11. 	     //因为layui.each内部的逻辑问题导致的所以要先深拷贝一份然后再去val
      12. 	     //parent.row：表格行对象
      13. 		 //table的数据在父页面userManager.js
      14. 		 //点击编辑按钮的时候，当前
      15. 	     form.val('user',$.extend({}, parent.row||{}));
      16. 	     $('#name').attr('readonly','readonly');
      17. 	}
      18. }
      19.  
      20. function getData(){
      21. 	//
      22. 	//取 user from中的值
      23. 	return form.val('user');
      24. }
      
                
                    
                

                
    116. 

                    相关阅读:
      
                    
Softek Barcode Reader 9.1.5                            
      
python+django+vue个人简历管理系统                            
      
Infoblox DDI NIOS 8.5.2 -- DDI 核心网络服务管理                            
      
日语                            
      
自然语言处理从零到入门 NLP                            
      
js正则表达式之中文验证(转)                            
      
Spring内存马分析                            
      
win10 eclipse安装教程--                            
      
代码随想录二刷|滑动窗口                            
      
c++实现的一个定时器实例                            
      
                          
                
    117. 
                    原文地址：https://blog.csdn.net/weixin_66110079/article/details/125904150
                
      118.