• LayUi-----------用户管理

    前言

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

    一、准备工作

    预期效果

     

    来看一下我们这次要用到的数据库 

     

     

     在layui的参考网站找到我们要用到内表格以及弹出层代码。

     

     编辑或者删除是根据lay-event来的

     这就是这次用户管理要准备组件。搭建好基本界面框架，接下来进入编码阶段。

    二、编码

            1、后端代码

            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. }

     测试一下是否可用。

            UserDaoTest

    1. package com.zking.dao;
    2.  
    3. import static org.junit.Assert.*;
    4.  
    5. import java.util.List;
    6. import java.util.Map;
    7.  
    8. import org.junit.After;
    9. import org.junit.Before;
    10. import org.junit.Test;
    11.  
    12. import com.zking.entity.User;
    13. import com.zking.util.PageBean;
    14.  
    15. public class UserDaoTest {
    16.  
    17. 	private UserDao userDao = new UserDao();
    18. 	
    19. 	@Before
    20. 	public void setUp() throws Exception {
    21. 	}
    22.  
    23. 	@After
    24. 	public void tearDown() throws Exception {
    25. 	}
    26.  
    27. 	@Test
    28. 	public void testList() {
    29. 		User user = new User();
    30. 		PageBean pageBean = new PageBean();
    31. 		try {
    32. 			List> list = userDao.list(user, pageBean);
    33. 			for (Map map : list) {
    34. 				System.out.println(map);
    35. 			}
    36. 		} catch (Exception e) {
    37. 			e.printStackTrace();
    38. 		}
    39. 	}
    40.  
    41. 	@Test
    42. 	public void testAdd() {
    43. 		User user = new User();
    44. 		user.setName("老六");
    45. 		user.setLoginName("ll");
    46. 		user.setPwd("1234");
    47. 		try {
    48. 			userDao.add(user);
    49. 		} catch (Exception e) {
    50. 			// TODO Auto-generated catch block
    51. 			e.printStackTrace();
    52. 		}
    53. 	}
    54.  
    55. 	@Test
    56. 	public void testDel() {
    57. 		User user = new User();
    58. 		user.setId(13L);
    59. 		try {
    60. 			userDao.del(user);
    61. 		} catch (Exception e) {
    62. 			// TODO Auto-generated catch block
    63. 			e.printStackTrace();
    64. 		}
    65. 	}
    66.  
    67. 	@Test
    68. 	public void testEdit() {
    69. 		User user = new User();
    70. 		user.setName("老六2");
    71. 		user.setLoginName("ll2");
    72. 		user.setPwd("1234");
    73. 		user.setId(13L);
    74. 		try {
    75. 			userDao.edit(user);
    76. 		} catch (Exception e) {
    77. 			// TODO Auto-generated catch block
    78. 			e.printStackTrace();
    79. 		}
    80. 	}
    81.  
    82. }

    查询：

     

    新增：​​​​​​​ 

     

    修改：​​​​​​​

     

    删除： 

     

     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, new R()
    25. //						.data("code", 200)
    26. //						.data("msg","成功")
    27. //						);
    28. 				ResponseUtil.writeJson(resp, R.ok(200, "成功"));
    29. 			}else {
    30. //				/*ResponseUtil.writeJson(resp, new R()
    31. //						.data("code", 0)
    32. //						.data("msg","账户或密码错误")
    33. //						);*/
    34. 				ResponseUtil.writeJson(resp, R.error(0, "账户或密码错误"));
    35. 				
    36. 			}
    37. 		} catch (Exception e) {
    38. 			e.printStackTrace();
    39. 			try {
    40. 				ResponseUtil.writeJson(resp, R.error(0, "账户或密码错误"));
    41. 			} catch (Exception e1) {
    42. 				// TODO Auto-generated catch block
    43. 				e1.printStackTrace();
    44. 			}
    45. 		}
    46. 		return null;
    47. 	}
    48. 	
    49. //	用户查询
    50. 	public String list(HttpServletRequest req, HttpServletResponse resp) {
    51. 		try {
    52. 			PageBean pageBean = new PageBean();
    53. 			pageBean.setRequest(req);
    54. 			List> list = userDao.list(user, pageBean);
    55. //			遵循layui中的格式
    56. 			ResponseUtil.writeJson(resp, R.ok(0, "用户数据查询成功",pageBean.getTotal(),user));
    57. 		} catch (Exception e) {
    58. 			e.printStackTrace();
    59. 			try {
    60. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据查询失败"));
    61. 			} catch (Exception e1) {
    62. 				// TODO Auto-generated catch block
    63. 				e1.printStackTrace();
    64. 			}
    65. 		}
    66. 		return null;
    67. 	}
    68. 	
    69. 	public String add(HttpServletRequest req, HttpServletResponse resp) {
    70. 		try {
    71. 			int rs = userDao.add(user);
    72. 			if(rs>0) {
    73. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据新增成功"));
    74. 			}else {
    75. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据新增失败"));
    76. 			}
    77. 		} catch (Exception e) {
    78. 			e.printStackTrace();
    79. 			try {
    80. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据新增失败"));
    81. 			} catch (Exception e1) {
    82. 				// TODO Auto-generated catch block
    83. 				e1.printStackTrace();
    84. 			}
    85. 		}
    86. 		return null;
    87. 	}
    88. 	
    89. 	public String del(HttpServletRequest req, HttpServletResponse resp) {
    90. 		try {
    91. 			int rs = userDao.del(user);
    92. 			if(rs>0) {
    93. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据删除成功"));
    94. 			}else {
    95. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据删除失败"));
    96. 			}
    97. 		} catch (Exception e) {
    98. 			e.printStackTrace();
    99. 			try {
    100. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据删除失败"));
    101. 			} catch (Exception e1) {
    102. 				// TODO Auto-generated catch block
    103. 				e1.printStackTrace();
    104. 			}
    105. 		}
    106. 		return null;
    107. 	}
    108. 	public String edit(HttpServletRequest req, HttpServletResponse resp) {
    109. 		try {
    110. 			int rs = userDao.add(user);
    111. 			if(rs>0) {
    112. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据修改成功"));
    113. 			}else {
    114. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据修改失败"));
    115. 			}
    116. 		} catch (Exception e) {
    117. 			e.printStackTrace();
    118. 			try {
    119. 				ResponseUtil.writeJson(resp, R.error(0, "用户数据修改失败"));
    120. 			} catch (Exception e1) {
    121. 				// TODO Auto-generated catch block
    122. 				e1.printStackTrace();
    123. 			}
    124. 		}
    125. 		return null;
    126. 	}
    127.  
    128. 	@Override
    129. 	public User getModel() {
    130. 		return user;
    131. 	}
    132. 	
    133. 	
    134. }

             2、前端代码

            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>

              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
      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>
              userEdit.js
      1. let layer,form,$;
      2. layui.use(['layer','form','jquery'],function(){
      3. 	layer=layui.layer,form=layui.form,$=layui.jquery;
      4. 	initData();
      5. });
      6.  
      7. function initData(){
      8. 	console.log(parent.row);
      9. 	if(null!=parent.row){
      10. 	     //因为layui.each内部的逻辑问题导致的所以要先深拷贝一份然后再去val
      11. 	     //parent.row：表格行对象
      12. 		 //table的数据在父页面userManager.js
      13. 		 //点击编辑按钮的时候，当前
      14. 	     form.val('user',$.extend({}, parent.row||{}));
      15. 	     $('#name').attr('readonly','readonly');
      16. 	}
      17. }
      18.  
      19. function getData(){
      20. 	//
      21. 	//取 user from中的值
      22. 	return form.val('user');
      23. }
       
       
       
       
    115. 

                    相关阅读:
      
                    
深度学习概述：从基础概念、计算步骤到调优方法                            
      
android 性能优化                            
      
C#里的var和dynamic区别到底是什么，你真的搞懂了嘛                            
      
ubuntu20.04下源码安装hyperscan库安装记录                            
      
备战金九银十，这份分布式架构文档：ZK+高可用+缓存+事务+中间件绝了                            
      
Google Earth 成长历程的15个小故事                            
      
GPU算力租用平台推荐                            
      
3D数学之三角公式                            
      
智能小车之测速小车原理和开发                            
      
leetcode 61. 旋转链表                            
      
                          
                
    116. 
                    原文地址：https://blog.csdn.net/qq_62331938/article/details/125901294
                
      117.