一、后端

今天小编分享的是Layui关于会议OA项目的用户管理模块
如下是最终的效果图：

如下是数据库所用到的表：

1、实体类

public class User {
    private Long id;

    private String name;

    private String loginName;

    private String pwd;

    private Long rid;

	public Long getId() {
		return id;
	}

	public void setId(Long id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getLoginName() {
		return loginName;
	}

	public void setLoginName(String loginName) {
		this.loginName = loginName;
	}

	public String getPwd() {
		return pwd;
	}

	public void setPwd(String pwd) {
		this.pwd = pwd;
	}

	public Long getRid() {
		return rid;
	}

	public void setRid(Long rid) {
		this.rid = rid;
	}

	public User() {
		super();
		// TODO Auto-generated constructor stub
	}

	@Override
	public String toString() {
		return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid + "]";
	}
    
    
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

2、dao方法

①、查询

//	查询用户信息及对应的角色，角色是通过case when得来的
	public List<Map<String, Object>> list(User user,PageBean pageBean) throws Exception{
		String sql = "select *,\r\n" + 
				"(case rid\r\n" + 
				"when 1 then '管理员' \r\n" + 
				"when 2 then '发起者' \r\n" + 
				"when 3 then '审批者' \r\n" + 
				"when 4 then '参与者' \r\n" + 
				"when 5 then '会议管理员' \r\n" + 
				"else '其他' end \r\n" + 
				")roleName \r\n" + 
				"from t_oa_user where 1=1";
		String name = user.getName();
	//如果name不为空追加sql语句，通过name进行查询
		if(StringUtils.isNotBlank(name)) {
			sql+=" and name like '%"+name+"%'";
		}
		//当实体类的属性完全包含数据库查询出来的列段的时候使用
//		super.executeQuery(sql, clz, pageBean)
		
		//返回List>，对应的是联表查询，单个实体类对象不完全包含查询的列段
		return super.executeQuery(sql, pageBean);
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

②、增加

//增加
	public int add(User user) throws Exception {
		String sql = "insert into t_oa_user(name,loginName,pwd) values(?,?,?) ";
		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd"});
	}
	
1
2
3
4
5
6

③、修改

//修改
	public int edit(User user) throws Exception {
		String sql = "update t_oa_user set name = ?,loginName = ?,pwd = ? where id = ?";
		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd","id"});
	}
	
1
2
3
4
5
6

④、删除

//删除
	public int del(User user) throws Exception {
		String sql = "delete from t_oa_user where id=? ";
		return super.executeUpdate(sql, user, new String[] {"id"});
	}
1
2
3
4
5

3、测试

接下来我们通过junit对我们的dao方法进行测试

public class UserDaoTest {
	private UserDao u = new UserDao();
	private User user = new User();
	private PageBean pageBean = new PageBean();

	@Test
	public void testList() {
		try {
			List<Map<String, Object>> list = u.list(user , pageBean);
			for (Map<String, Object> map : list) {
				System.out.println(map);
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	@Test
	public void testAdd()  {
		User user = new User();
		user.setName("一家人");
		user.setLoginName("yjr");
		user.setPwd("1234");
		try {
			int i = u.add(user);
			System.out.println(i);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	@Test
	public void testEdit() {
		User user = new User();
		user.setName("一家人2");
		user.setLoginName("yjr2");
		user.setPwd("1234");
		user.setId(13L);
		try {
			int i = u.edit(user);
			System.out.println(i);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	@Test
	public void testDel() {
		User user = new User();
		user.setId(13L);
		try {
			int del = u.del(user);
			System.out.println(del);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

查询：

增加：

当控制台打印为1时，我们数据就添加成功了,在数据库查询
如图所示我们数据添加成功

修改：

数据库查看

删除：

数据库查看，如下图所示我们可以看到为’ 一家人2 '已经被删除

如下图所示关于为什么要放一个L是因为我们的id是long类型

4、Web

UserAction：

public class UserAction extends ActionSupport implements ModelDriver<User>{

	private User user = new User();
	private UserDao userDao = new UserDao();
	
//	写个方法处理前台的请求
	
	public String login(HttpServletRequest req, HttpServletResponse resp) {
		try {
			User u = userDao.login(user);
//			通过账户名查到用户记录
			if(u!=null) {
	//			登陆成功
				ResponseUtil.writeJson(resp, R.ok(200, "成功"));
				req.getSession().setAttribute("user", u);
			}else {
	//			登陆失败
				ResponseUtil.writeJson(resp, R.error(0, "用户名或密码错误"));
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.error(0, "用户名或密码错误"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}

		}
		return null;
	}
	
	//用户查询
	public String list(HttpServletRequest req, HttpServletResponse resp) {
		try {
			PageBean pageBean = new PageBean();
			pageBean.setRequest(req);
			List<Map<String, Object>> list = userDao.list(user, pageBean);
		//注意：Layui中数据表的格式
			ResponseUtil.writeJson(resp, R.ok(0, "用户数据查询成功", pageBean.getTotal(), list));
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.error(0, "用户数据查询失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}

		}
		return null;
	}
	
	
	//用户增加
	public String add(HttpServletRequest req, HttpServletResponse resp) {
		try {
//			rs是sql语句执行的影响行数
			int rs = userDao.add(user);
			if(rs >0) {
				ResponseUtil.writeJson(resp, R.ok(200, "用户数据新增成功"));
			}
			else {
				ResponseUtil.writeJson(resp, R.error(0, "用户数据新增失败"));
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.error(0, "用户数据新增失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}

		}
		return null;
	}
		
	
	//用户修改
	public String edit(HttpServletRequest req, HttpServletResponse resp) {
		try {
//				rs是sql语句执行的影响行数
			int rs = userDao.edit(user);
			if(rs >0) {
				ResponseUtil.writeJson(resp, R.ok(200, "用户数据修改成功"));
			}
			else {
				ResponseUtil.writeJson(resp, R.error(0, "用户数据修改失败"));
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.error(0, "用户数据修改失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}

		}
		return null;
	}
	
	//用户删除
	public String del(HttpServletRequest req, HttpServletResponse resp) {
		try {
//				rs是sql语句执行的影响行数
			int rs = userDao.del(user);
			if(rs >0) {
				ResponseUtil.writeJson(resp, R.ok(200, "用户数据删除成功"));
			}
			else {
				ResponseUtil.writeJson(resp, R.error(0, "用户数据删除失败"));
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.error(0, "用户数据删除失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}

		}
		return null;
	}
	
	@Override
	public User getModel() {
		return user;
	}

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

二、前端

1、页面

页面采用的是数据表格的方式
我们可用从Layui官网中直接复制，如下图：

但小编已经把代码整理好了

①、UserManage.jsp页面

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

关于UserManage页面的js代码，小编把js代码封装成js文件，直接在页面中导入js文件即可

let layer,$,table;
var row;
layui.use(['jquery', 'layer', 'table'], function(){
	layer = layui.layer
	,$ = layui.jquery
	,table = layui.table;
	//初始化数据表格
	initTable();
	//绑定查询按钮的点击事件
	$('#btn_search').click(function(){
		query();
	});
	
	//绑定新增按钮的点击事件
	$('#btn_add').click(function(){
		row=null;
		open('新增');
	});
});


//1.初始化数据表格
function initTable(){
	table.render({           //执行渲染
        elem: '#tb',         //指定原始表格元素选择器（推荐id选择器）
//        url: 'user.action?methodName=list',     //请求地址
        height: 340,         //自定义高度
        loading: false,      //是否显示加载条（默认 true）
        cols: [[             //设置表头
            {field: 'id', title: '用户编号', width: 120},
            {field: 'name', title: '用户名', width: 120},
            {field: 'loginName', title: '登录账号', width: 140},
            {field: '', title: '操作', width: 220,toolbar:'#toolbar'},
        ]]
    });
	
	
	//在页面中的中必须配置lay-filter="tb_goods"属性才能触发属性!!!
	table.on('tool(tb)', function (obj){
		row = obj.data;if(obj.event =="edit"){open("编辑");}elseif(obj.event =="del"){
			layer.confirm('确认删除吗?',{icon:3, title:'提示'},function(index){
			  $.post($("#ctx").val()+'/user.action',{
				  'methodName':'del','id':row.id
			  },function(rs){if(rs.success){//调用查询方法刷新数据query();}else{
	        		   layer.msg(rs.msg,function(){});}},'json');
			  layer.close(index);});}else{}});}//2.点击查询
function query(){
	table.reload('tb',{
        url: $("#ctx").val()+'/user.action',//请求地址
        method:'POST',//请求方式，GET或者POST
        loading:true,//是否显示加载条（默认 true）
        page:true,//是否分页
        where:{//设定异步数据接口的额外参数，任意设
        	'methodName':'list','name':$('#name').val()},  
        request:{//自定义分页请求参数名
            pageName:'page',//页码的参数名称，默认：page
            limitName:'rows'//每页数据量的参数名，默认：limit}});}//3.对话框
function open(title){
    layer.open({
       type:2,//layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
       title:title,
       area:['660px','340px'],//宽高
       skin: 'layui-layer-rim',//样式类名
       content:  $("#ctx").val()+'/jsp/system/userEdit.jsp',//书本编辑页面
       btn:['保存','关闭'],
       yes:function(index, layero){//调用子页面中提供的getData方法，快速获取子页面的form表单数据
           let data= $(layero).find("iframe")[0].contentWindow.getData();
           console.log(data);//判断title标题
           let methodName="add";if(title=="编辑")
        	   methodName="edit";
           $.post($("#ctx").val()+'/user.action?methodName='+methodName,
        		   data,function(rs){if(rs.success){//关闭对话框
        		   layer.closeAll();//调用查询方法刷新数据query();}else{
        		   layer.msg(rs.msg,function(){});}},'json');},
       btn2:function(index, layero){
    	   layer.closeAll();}});}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
如下图中红色框中代码是拿到整个项目的项目名
 
 我们可以在控制台打印一下那串代码
 
 当我们点击查询按钮之后 如下图：
 
②、UserEdit界面（增加和修改）
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/common/head.jsp"%>
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/system/userEdit.js">script>
<title>用户新增title>
head>
<style>
.layui-form-select dl{
	max-height:150px;
}
style>
<body>
<div style="padding:10px;">
    <form class="layui-form layui-form-pane" lay-filter="user">
        <input type="hidden" name="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">
            <label class="layui-form-label">登录密码label>
            <div class="layui-input-block">
                <input type="password" name="pwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
            div>
        div>
    form>
div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
UserEdit js代码
let layer,form,$;
layui.use(['layer','form','jquery'],function(){
	layer=layui.layer,form=layui.form,$=layui.jquery;
	initData();
});

function initData(){
	console.log(parent.row);
	if(null!=parent.row){
	     //因为layui.each内部的逻辑问题导致的所以要先深拷贝一份然后再去val
	     //parent.row：表格行对象
//		table的数据在父页面userManage.jsp
//		点击编辑按钮的时候，当前行赋值给子页面userEdit.jsp
	     form.val('user',$.extend({}, parent.row||{}));//
	     $('#name').attr('readonly','readonly');
	}
}

function getData(){
//	取user form中的值
    return form.val('user');
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2、查询、增加 修改 删除
增加、修改都采用弹出层
 我们可以通过LayUI官网查看
 
查询
js代码
function query(){
	console.log($("#ctx").val())
	table.reload('tb', {
        url: $("#ctx").val()+'/user.action',     //请求地址
        method: 'POST',                    //请求方式，GET或者POST
        loading: true,                     //是否显示加载条（默认 true）
        page: true,                        //是否分页
        where: {                           //设定异步数据接口的额外参数，任意设
        	'methodName':'list',
        	'name':$('#name').val()
        },  
        request: {                         //自定义分页请求参数名
            pageName: 'page', //页码的参数名称，默认：page
            limitName: 'rows' //每页数据量的参数名，默认：limit
        }
   });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
测试：
 
增加
js代码：
function open(title){
    layer.open({
       type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
       title:title,
       area: ['660px', '340px'],   //宽高
       skin: 'layui-layer-rim',    //样式类名
       content:  $("#ctx").val()+'/jsp/system/userEdit.jsp', //书本编辑页面
       btn:['保存','关闭'],
       yes: function(index, layero){
    	   //调用子页面中提供的getData方法，快速获取子页面的form表单数据
           let data= $(layero).find("iframe")[0].contentWindow.getData();
           console.log(data);
           //判断title标题
           let methodName="add";
           if(title=="编辑")
        	   methodName="edit";
           $.post($("#ctx").val()+'/user.action?methodName='+methodName,
        		   data,function(rs){
        	   if(rs.success){
        		   //关闭对话框
        		   layer.closeAll();
        		   //调用查询方法刷新数据
        		   query();
        	   }else{
        		   layer.msg(rs.msg,function(){});
        	   }
           },'json');
       },
       btn2: function(index, layero){
    	   layer.closeAll();
       }
    });
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
测试：
 
注意：当点击保存没反应，有可能是版本问题，该form.val()方法代码是Layui 2.4或2.5所有的，所以在这里我们需要更换Layui文件
如下图可以看到已经增加成功
 
修改
js代码：
let layer,form,$;
layui.use(['layer','form','jquery'],function(){
	layer=layui.layer,form=layui.form,$=layui.jquery;
	initData();
});

function initData(){
	console.log(parent.row);
	if(null!=parent.row){
	     //因为layui.each内部的逻辑问题导致的所以要先深拷贝一份然后再去val
	     //parent.row：表格行对象
//		table的数据在父页面userManage.jsp
//		点击编辑按钮的时候，当前行赋值给子页面userEdit.jsp
	     form.val('user',$.extend({}, parent.row||{}));//
	     $('#name').attr('readonly','readonly');
	}
}

function getData(){
//    


//	取UserEdie页面user form中的值
    return form.val('user');
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
测试：
 
 
 注：该用户名不能修改，因小编在上述js代码中让用户名只读，采用readonly，所以不能修改
删除
js代码
//在页面中的
中必须配置lay-filter="tb_goods"属性才能触发属性!!!
	table.on('tool(tb)', function (obj) {
		row = obj.data;
		if (obj.event == "edit") {
			open("编辑");
		}else if(obj.event == "del"){
			layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
			  $.post($("#ctx").val()+'/user.action',{
				  'methodName':'del',
				  'id':row.id
			  },function(rs){
				  if(rs.success){
	        		   //调用查询方法刷新数据
	        		   query();
	        	   }else{
	        		   layer.msg(rs.msg,function(){});
	        	   }
			  },'json');
			  layer.close(index);
			});
		}else{

		}
	});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
测试：
 
 


                    相关阅读:

                    
【论文解读】针对生成任务的多模态图学习                            

mysql Varchar字符存储时报错                            

STM32CubeMX教程22 FSMC - 8080并行接口TFT-LCD驱动                            

快速上手Linux核心命令（三）：文件和目录操作命令                            

MVP推荐 丨 2024 FISCO-BCOS官方学习路线 ，一定要看的所有内容，都在这里了！                            

设计模式之建造者模式                            

【从零开始玩量化13】quantstats：分析你的量化策略                            

【顺序表的实现】                            

C#winform软件实现一次编译，跨平台windows和linux兼容运行，兼容Visual Studio原生界面Form表单开发                            

大数据在智慧城市建设中的应用                            

                    
                

                    原文地址：https://blog.csdn.net/qq_65345936/article/details/125892917
                

            

                

                    最新文章
                
                

                    
攻防演习之三天拿下官网站群                            

数据安全治理学习——前期安全规划和安全管理体系建设                            

企业安全 | 企业内一次钓鱼演练准备过程                            

内网渗透测试 | Kerberos协议及其部分攻击手法                            

0day的产生 | 不懂代码的"代码审计"                            

安装scrcpy-client模块av模块异常，环境问题解决方案                            

leetcode hot100【LeetCode 279. 完全平方数】java实现                            

OpenWrt下安装Mosquitto                            

AnatoMask论文汇总                            

【AI日记】24.11.01 LangChain、openai api和github copilot                            

                    
                
            

            

                

                    热门文章
                
                

                    
十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！                            

奉劝各位学弟学妹们，该打造你的技术影响力了！                            

五年了，我在 CSDN 的两个一百万。                            

Java俄罗斯方块，老程序员花了一个周末，连接中学年代！                            

面试官都震惊，你这网络基础可以啊！                            

你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法                            

心情不好的时候，用 Python 画棵樱花树送给自己吧                            

通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！                            

13 万字 C 语言从入门到精通保姆级教程2021 年版                            

10行代码集2000张美女图，Python爬虫120例，再上征途