• LayUI(会议oi项目增删改查)

    目录

    一、页面要求、数据库分析

    1）页面要求

              2）数据库

    二、前后台编码

    后台

    UserDao源码

     ​​                 UserAction增删改查源码

     前台

    userManage源码

    userManage.js源码

    UserEdit源码(增加修改界面)

    UserEdit.js源码 

    一、页面要求、数据库分析

    1）页面要求

    2）数据库

    1. 进行优化，查询出用户信息及对应角色--case when
    2. rid用户角色：1 管理员 2 发起者 3 审批者 4 参与者 5 会议室管理员
    3.  
    4. select *,
    5. (case rid
    6. when 1 then '管理员'
    7. when 2 then '发起者'
    8. when 3 then '审批者'
    9. when 4 then '参与者'
    10. when 5 then '会议室管理员'
    11. else '其他' end) roleName
    12. from t_oa_user;

     

    二、前后台编码

    后台

    我们新建一个用户管理的jsp界面

    在其中随便输入几个x，测试一下该界面是否能运行成功

     

    可以的话，我们就上官网找到与我们最终想要展示出来的效果的代码，并拷贝到对应区域，为我所用。拷贝下来的样式效果如下⬇⬇与我们最终想要的效果还有些差别，删删改改一下改成我们需要的样子 

     删改最后差不多是这个样子

     好滴，接下来开始编写后台代码了

    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.  
    14. 	public User login(User user) throws Exception {
    15. 		String sql="select * from t_oa_user where loginName='"+user.getLoginName()+"' and pwd='"+user.getPwd()+"' ";
    16. 		//根据sql查询符合条件的用户，通常只会返回一条数据
    17. 		List users = super.executeQuery(sql, User.class, null);
    18. 		return users == null || users.size() == 0 ? null : users.get(0);
    19. 	}
    20. 	
    21. 	//查询用户信息及对应角色信息，角色用case when得来
    22. 	public List> list(User user,PageBean pageBean) throws Exception{
    23. 		String sql="select *, \r\n" + 
    24. 				"(case rid \r\n" + 
    25. 				"when 1 then '管理员' \r\n" + 
    26. 				"when 2 then '发起者' \r\n" + 
    27. 				"when 3 then '审批者' \r\n" + 
    28. 				"when 4 then '参与者' \r\n" + 
    29. 				"when 5 then '会议室管理员' \r\n" + 
    30. 				"else '其他' end) roleName \r\n" + 
    31. 				"from t_oa_user where 1=1";
    32. 		//拿到用户名字
    33. 		String name = user.getName();
    34. 		//判断不为空
    35. 		if(StringUtils.isNotBlank(name)) {
    36. 			sql+="and name like '%"+name+"%'";
    37. 		}
    38. 		return super.executeQuery(sql, pageBean);
    39. 	}
    40. 	
    41. 	//增加
    42. 	public int add(User user) throws Exception {
    43. 		String sql="insert into t_oa_user(name,loginName,pwd) value(?,?,?)";
    44. 		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd"});
    45. 	}
    46. 	
    47. 	//删除
    48. 	public int del(User user) throws Exception {
    49. 		String sql="delete from t_oa_user where id=?";
    50. 		return super.executeUpdate(sql, user, new String[] {"id"});
    51. 	}
    52. 	
    53. 	//修改
    54. 	public int edit(User user) throws Exception {
    55. 		String sql="update t_oa_user set name=?,loginName=?,pwd=? where id=?";
    56. 		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd","id"});
    57. 	}
    58. 	
    59. 	
    60. }

    先利用Junit测试dao方法

    测试查询方法

    1. @Test
    2. 	public void testList() {
    3. 		User user=new User();
    4. 		PageBean pageBean=new PageBean();
    5. 		try {
    6. 			List> list = ud.list(user, pageBean);
    7. 			for (Map map : list) {
    8. 				System.out.println(map);
    9. 			}
    10. 		} catch (Exception e) {
    11. 			e.printStackTrace();
    12. 		}
    13. 	}

     测试增加方法

    1. @Test
    2. 	public void testAdd() {
    3. 		User user=new User();
    4. 		user.setName("易家军哈哈哈");
    5. 		user.setLoginName("yjj");
    6. 		user.setPwd("123456");
    7. 		try {
    8. 			ud.add(user);
    9. 		} catch (Exception e) {
    10. 			e.printStackTrace();
    11. 		}
    12. 	}

    测试修改方法 

    1. @Test
    2. 	public void testEdit() {
    3. 		User user=new User();
    4. 		user.setName("易家军");
    5. 		user.setLoginName("yjjhhh");
    6. 		user.setPwd("1234");
    7. 		user.setId(13L);
    8. 		try {
    9. 			ud.edit(user);
    10. 		} catch (Exception e) {
    11. 			e.printStackTrace();
    12. 		}
    13. 	}

     

    测试删除方法 

    1. @Test
    2. 	public void testDel() {
    3. 		User user=new User();
    4. 		user.setId(13L);
    5. 		try {
    6. 			ud.del(user);
    7. 		} catch (Exception e) {
    8. 			e.printStackTrace();
    9. 		}
    10. 	}

     ​​​​​​​

     测试dao方法没问题后，我们编写action方法

    UserAction增删改查源码

    1. //用户查询
    2. 	public String list(HttpServletRequest req, HttpServletResponse resp) {
    3. 		try {
    4. 			PageBean pageBean=new PageBean();
    5. 			pageBean.setRequest(req);
    6. 			List> users = userDao.list(user, pageBean);
    7. 			//注意：LayUI中的数据表格的格式
    8. 			ResponseUtil.write(resp, R.ok(0, "用户数据查询成功",pageBean.getTotal(),users));
    9. 		} catch (Exception e) {
    10. 			e.printStackTrace();
    11. 			try {
    12. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据查询失败"));
    13. 			} catch (Exception e1) {
    14. 				e1.printStackTrace();
    15. 			}
    16. 		}
    17. 		return null;
    18. 	}
    19. 	
    20. 	//增加
    21. 	public String add(HttpServletRequest req, HttpServletResponse resp) {
    22. 		try {
    23. 			//rs是sql语句执行的影响行数
    24. 			int rs = userDao.add(user);
    25. 			if(rs>0) {
    26. 				ResponseUtil.write(resp, R.ok(200, "用户数据新增成功"));
    27. 			}
    28. 			else {
    29. 				ResponseUtil.write(resp, R.error(0, "用户数据新增失败"));
    30. 			}
    31. 		} catch (Exception e) {
    32. 			e.printStackTrace();
    33. 			try {
    34. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据新增失败"));
    35. 			} catch (Exception e1) {
    36. 				e1.printStackTrace();
    37. 			}
    38. 		}
    39. 		return null;
    40. 	}
    41. 	
    42. 	//删除
    43. 	public String del(HttpServletRequest req, HttpServletResponse resp) {
    44. 		try {
    45. 			//rs是sql语句执行的影响行数
    46. 			int rs = userDao.del(user);
    47. 			if(rs>0) {
    48. 				ResponseUtil.write(resp, R.ok(200, "用户数据删除成功"));
    49. 			}
    50. 			else {
    51. 				ResponseUtil.write(resp, R.error(0, "用户数据删除失败"));
    52. 			}
    53. 		} catch (Exception e) {
    54. 			e.printStackTrace();
    55. 			try {
    56. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据删除失败"));
    57. 			} catch (Exception e1) {
    58. 				e1.printStackTrace();
    59. 			}
    60. 		}
    61. 		return null;
    62. 	}
    63. 	
    64. 	//修改
    65. 	public String edit(HttpServletRequest req, HttpServletResponse resp) {
    66. 		try {
    67. 			//rs是sql语句执行的影响行数
    68. 			int rs = userDao.edit(user);
    69. 			if(rs>0) {
    70. 				ResponseUtil.write(resp, R.ok(200, "用户数据修改成功"));
    71. 			}
    72. 			else {
    73. 				ResponseUtil.write(resp, R.error(0, "用户数据修改失败"));
    74. 			}
    75. 		} catch (Exception e) {
    76. 			e.printStackTrace();
    77. 			try {
    78. 				ResponseUtil.writeJson(resp, R.ok(0, "用户数据修改失败"));
    79. 			} catch (Exception e1) {
    80. 				e1.printStackTrace();
    81. 			}
    82. 		}
    83. 		return null;
    84. 	}

     前台

    userManage源码

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

    有关UserManage页面的js代码，我把js代码封装成js文件，在页面中直接导入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.  
    22. //1.初始化数据表格
    23. function initTable(){
    24. 	table.render({           //执行渲染
    25.         elem: '#tb',         //指定原始表格元素选择器（推荐id选择器）
    26. //        url: 'user.action?methodName=list',     //请求地址
    27.         height: 340,         //自定义高度
    28.         loading: false,      //是否显示加载条（默认 true）
    29.         cols: [[             //设置表头
    30.             {field: 'id', title: '用户编号', width: 120},
    31.             {field: 'name', title: '用户名', width: 120},
    32.             {field: 'loginName', title: '登录账号', width: 140},
    33.             {field: '', title: '操作', width: 220,toolbar:'#toolbar'},
    34.         ]]
    35.     });
    36. 	
    37. 	
    38. 		//在页面中的中必须配置lay-filter="tb_goods"属性才能触发属性!!!
    39. 	table.on('tool(tb)', function (obj) {
    40. 		row = obj.data;
    41. 		if (obj.event == "edit") {
    42. 			open("编辑");
    43. 		}else if(obj.event == "del"){
    44. 			layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
    45. 			  $.post($("#ctx").val()+'/user.action',{
    46. 				  'methodName':'del',
    47. 				  'id':row.id
    48. 			  },function(rs){
    49. 				  if(rs.success){
    50. 	        		   //调用查询方法刷新数据
    51. 	        		   query();
    52. 	        	   }else{
    53. 	        		   layer.msg(rs.msg,function(){});
    54. 	        	   }
    55. 			  },'json');
    56. 			  layer.close(index);
    57. 			});
    58. 		}else{
    59.  
    60. 		}
    61. 	});
    62. }
    63. //2.点击查询
    64. function query(){
    65. 	table.reload('tb', {
    66.         url: $("#ctx").val()+'/user.action',     //请求地址
    67.         method: 'POST',                    //请求方式，GET或者POST
    68.         loading: true,                     //是否显示加载条（默认 true）
    69.         page: true,                        //是否分页
    70.         where: {                           //设定异步数据接口的额外参数，任意设
    71.         	'methodName':'list',
    72.         	'name':$('#name').val()
    73.         },  
    74.         request: {                         //自定义分页请求参数名
    75.             pageName: 'page', //页码的参数名称，默认：page
    76.             limitName: 'rows' //每页数据量的参数名，默认：limit
    77.         }
    78.    });
    79. }
    80.  
    81. //3.对话框
    82. function open(title){
    83.     layer.open({
    84.        type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    85.        title:title,
    86.        area: ['660px', '340px'],   //宽高
    87.        skin: 'layui-layer-rim',    //样式类名
    88.        content:  $("#ctx").val()+'/jsp/system/userEdit.jsp', //书本编辑页面
    89.        btn:['保存','关闭'],
    90.        yes: function(index, layero){
    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. 当我们点击查询⬇⬇⬇ 
       ​​​​​​​
       查询功能ok，接下来我们编写增加与修改页面
      新建一个增加修改jsp页面
      UserEdit源码(增加修改界面)
      1. <%@ page language="java" contentType="text/html; charset=UTF-8"
      2. 	pageEncoding="UTF-8"%>
      3. <%@include file="/common/head.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的数据在父页面userManage.jsp
      13. //		点击编辑按钮的时候，当前行赋值给子页面userEdit.jsp
      14. 	     form.val('user',$.extend({}, parent.row||{}));//
      15. 	     $('#name').attr('readonly','readonly');
      16. 	}
      17. }
      18.  
      19. function getData(){
      20. //	取user form中的值
      21.     return form.val('user');
      22. }
       ​​​​​​​点击新增按钮后弹出弹出层
      新增成功 
       
       ❗❗用到的实体类，还是上一期的User
      使用Junit测试，记得引入需要测试的类
      博客中，人物名称被抹掉了一部分，是因为他们都是博主身边的人，咱需要保护他们的个人信息啦
       
 
       

       

       

    115. 

                    相关阅读:
      
                    
java计算机毕业设计校园环境保护监督系统源代码+系统+数据库+lw文档                            
      
Go : golang发布三方包流程简介                            
      
从微服务基本概念到核心组件-通过一个实例来讲解和分析                            
      
kobs-ng 编译使用                            
      
Kubernetes 1.25 中的删除和主要变化                            
      
【leetcode】754.到达终点的数字                            
      
基于 attention 机制的 LSTM 神经网络 超短期负荷预测方法学习记录                            
      
从实战出发带你搞懂AXI4 (一、AXI4协议解析)                            
      
京东二面：高并发设计，都有哪些技术方案？                            
      
2_5.Linux存储的基本管理                            
      
                          
                
    116. 
                    原文地址：https://blog.csdn.net/weixin_67450855/article/details/125550766
                
      117.