• OA项目(一)之用户管理[登录+分页查询]

    目录

    一.数据表设计

     二.代码(后台)

     2.1 实体类

    2.2 dao层

     2.2.1 JUnit测试

    2.3 action

     2.4 mvc.xml配置

    三.代码(前台)

    3.1 登录界面

    3.1.1 登录界面js编写

     3.1.2 运行界面

    3.2 用户界面

    3.2.1 用户分页查询js编写

    3.2.2 运行界面

    一.数据表设计

    用户表(t_oa_user)
    序号列名数据类型长度允许空说明
    1idintNO主键 用户编号
    2namevarchar100NO真实姓名
    3loginNamevarchar100NO用户名
    4pwdvarchar20NO密码
    5ridintNO权限

     二.代码(后台)

     2.1 实体类

    1. package com.zking.oapro.entity;
    2.  
    3. import java.io.Serializable;
    4.  
    5. public class Users implements Serializable {
    6.  
    7. 	private Integer id;// 用户编号
    8. 	private String name;// 真实姓名
    9. 	private String loginName;// 用户名
    10. 	private String pwd;// 密码
    11. 	private int rid;
    12.  
    13. 	public Users() {
    14. 		super();
    15. 		// TODO Auto-generated constructor stub
    16. 	}
    17.  
    18. 	public Users(String loginName, String pwd) {
    19. 		super();
    20. 		this.loginName = loginName;
    21. 		this.pwd = pwd;
    22. 	}
    23.  
    24. 	public Users(Integer id, String name, String loginName, String pwd, int rid) {
    25. 		super();
    26. 		this.id = id;
    27. 		this.name = name;
    28. 		this.loginName = loginName;
    29. 		this.pwd = pwd;
    30. 		this.rid = rid;
    31. 	}
    32.  
    33. 	public Integer getId() {
    34. 		return id;
    35. 	}
    36.  
    37. 	public void setId(Integer id) {
    38. 		this.id = id;
    39. 	}
    40.  
    41. 	public String getName() {
    42. 		return name;
    43. 	}
    44.  
    45. 	public void setName(String name) {
    46. 		this.name = name;
    47. 	}
    48.  
    49. 	public String getLoginName() {
    50. 		return loginName;
    51. 	}
    52.  
    53. 	public void setLoginName(String loginName) {
    54. 		this.loginName = loginName;
    55. 	}
    56.  
    57. 	public String getPwd() {
    58. 		return pwd;
    59. 	}
    60.  
    61. 	public void setPwd(String pwd) {
    62. 		this.pwd = pwd;
    63. 	}
    64.  
    65. 	public int getRid() {
    66. 		return rid;
    67. 	}
    68.  
    69. 	public void setRid(int rid) {
    70. 		this.rid = rid;
    71. 	}
    72.  
    73. 	@Override
    74. 	public String toString() {
    75. 		return "Users [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid
    76. 				+ "]";
    77. 	}
    78.  
    79. }

    2.2 dao层

    1. package com.zking.oapro.dao;
    2.  
    3. import java.sql.ResultSet;
    4. import java.sql.SQLException;
    5. import java.util.List;
    6. import java.util.Map;
    7.  
    8. import com.mysql.jdbc.Connection;
    9. import com.mysql.jdbc.PreparedStatement;
    10. import com.mysql.jdbc.StringUtils;
    11. import com.zking.oapro.entity.Users;
    12. import com.zking.oapro.utils.CommonUtils;
    13. import com.zking.oapro.utils.DBHelper;
    14. import com.zking.oapro.utils.MD5;
    15. import com.zking.oapro.utils.PageBean;
    16.  
    17. public class UserDao extends BaseDao{
    18. 	
    19. 	
    20. 	/**
    21. 	 * 分页查询用户信息
    22. 	 * @param user
    23. 	 * @param pageBean
    24. 	 * @return
    25. 	 */
    26.     @SuppressWarnings("unchecked")
    27. 	public List> queryUserPager(Users user,PageBean pageBean){
    28.     	String sql="select id,name,loginName,pwd,rid,\r\n" + 
    29.     			"(case rid\r\n" + 
    30.     			"   when '1' then '管理员'\r\n" + 
    31.     			"	 when '2' then '发起者'\r\n" + 
    32.     			"	 when '3' then '审批者'\r\n" + 
    33.     			"	 when '4' then '参与者'\r\n" + 
    34.     			"	 when '5' then '会议管理员'\r\n" + 
    35.     			"	 else '其他' end\r\n" + 
    36.     			") rname\r\n" + 
    37.     			"from t_oa_user where 1=1";
    38.     	//按照登录账号模糊查询
    39.     	if(!StringUtils.isNullOrEmpty(user.getLoginName()))
    40.     		sql+=" and loginName like '"+user.getLoginName()+"%'";
    41.     	//按照用户编号降序排序
    42.     	sql+=" order by id desc";
    43.     	System.out.println(sql);
    44.     	
    45.     	return super.executeQuery(sql, pageBean, new CallBack>() {
    46. 			
    47. 			@Override
    48. 			public List> forEach(ResultSet rs) throws SQLException {
    49. 				return CommonUtils.toList(rs);
    50. 			}
    51. 		});
    52.     }
    53. 	
    54.  
    55. 	/**
    56. 	 * 登录
    57. 	 */
    58. 	public Users userLogin(Users use) {
    59. 		// 连接对象
    60. 		Connection conn = null;
    61. 		// 执行对象
    62. 		PreparedStatement ps = null;
    63. 		// 结果集对象
    64. 		ResultSet rs = null;
    65. 		// SQL语句
    66. 		String sql = "select * from t_oa_user where loginName=?";
    67. 		// 用户实体
    68. 		Users users = null;
    69. 		try {
    70. 			// 获取连接
    71. 			conn = (Connection) DBHelper.getConnection();
    72. 			// 将SQL语句传到执行语句中
    73. 			ps = (PreparedStatement) conn.prepareStatement(sql);
    74. 			// 给占位符赋值
    75. 			ps.setString(1, use.getLoginName());
    76. 			// 遍历结果集对象
    77. 			rs = ps.executeQuery();
    78. 			// 判断是否存在用户数据
    79. 			if (rs.next()) {
    80. 				users = new Users(rs.getInt("id"), rs.getString("name"), rs.getString("loginName"), rs.getString("pwd"), rs.getInt("rid"));
    81. 			}
    82. 		} catch (Exception e) {
    83. 			e.printStackTrace();
    84. 		} finally {
    85. 			DBHelper.close(conn, ps, rs);
    86. 		}
    87. 		return users;
    88. 	}
    89.  
    90. 	public static void main(String[] args) {
    91. 		
    92.    System.out.println(new UserDao().userLogin(new Users("zhangsan","1234"))	);	
    93. 		
    94. 	}
    95. 	
    96. }
    97.  
    98.  
    99.  
    100.

     2.2.1 JUnit测试

    1. package com.zking.oapro.dao;
    2.  
    3. import static org.junit.Assert.fail;
    4.  
    5. import java.util.List;
    6. import java.util.Map;
    7.  
    8. import org.junit.Before;
    9. import org.junit.Test;
    10.  
    11. import com.zking.oapro.entity.Users;
    12. import com.zking.oapro.utils.PageBean;
    13.  
    14. public class UserDaoTest {
    15.  
    16. 	UserDao ud=new UserDao();
    17. 	Users user=null;
    18.  
    19. 	
    20. 	@Before
    21. 	public void setUp() throws Exception {
    22. 		user=new Users();
    23. 	}
    24.  
    25. 	@Test
    26. 	public void testQueryUserPager() {
    27. 		  PageBean pageBean=new PageBean();
    28. 		    user.setLoginName("a");
    29. 		    List> list = ud.queryUserPager(user, pageBean);
    30. 		    System.out.println("总记录数:"+pageBean.getTotal());
    31. 		    list.forEach(System.out::println);
    32. 	}
    33.  
    34.  
    35. }

    2.3 action

    1. package com.zking.oapro.action;
    2.  
    3. import java.io.IOException;
    4. import java.util.List;
    5. import java.util.Map;
    6.  
    7. import javax.servlet.ServletException;
    8. import javax.servlet.http.HttpServletRequest;
    9. import javax.servlet.http.HttpServletResponse;
    10. import javax.servlet.http.HttpSession;
    11.  
    12. import com.mysql.jdbc.StringUtils;
    13. import com.zking.mvc.framework.DispatcherAction;
    14. import com.zking.mvc.framework.DriverModel;
    15. import com.zking.oapro.dao.UserDao;
    16. import com.zking.oapro.entity.Users;
    17. import com.zking.oapro.utils.CommonUtils;
    18. import com.zking.oapro.utils.MD5;
    19. import com.zking.oapro.utils.PageBean;
    20.  
    21. public class UserAction extends DispatcherAction implements DriverModel {
    22.  
    23. 	private Users user = new Users();
    24. 	private UserDao ud = new UserDao();
    25.  
    26. 	@Override
    27. 	public Users getModel() {
    28. 		return user;
    29. 	}
    30.  
    31. 	
    32. 	/**
    33. 	 * 分页查询
    34. 	 * 
    35. 	 * @param req
    36. 	 * @param resp
    37. 	 * @return
    38. 	 * @throws ServletException
    39. 	 * @throws IOException
    40. 	 */
    41. 	public String queryUserPager(HttpServletRequest req, HttpServletResponse resp)
    42. 			throws ServletException, IOException {
    43. 		try {
    44. 			PageBean pageBean = new PageBean();
    45. 			pageBean.setRequest(req);
    46. 			List> list = ud.queryUserPager(user, pageBean);
    47. 			CommonUtils.toJson(200, "OK", pageBean.getTotal(), list, resp);
    48. 		} catch (Exception e) {
    49. 			e.printStackTrace();
    50. 			CommonUtils.toJson(500, "分页查询用户信息失败", 0, null, resp);
    51. 		}
    52. 		return null;
    53. 	}
    54.  
    55. 	/**
    56. 	 * 用户登录
    57. 	 * 
    58. 	 * @param req
    59. 	 * @param resp
    60. 	 * @return
    61. 	 * @throws ServletException
    62. 	 * @throws IOException
    63. 	 */
    64. 	public String UserLogin(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    65. 		// 1.判断登录账号和密码是否为空
    66. 		if (StringUtils.isNullOrEmpty(user.getLoginName()) || StringUtils.isNullOrEmpty(user.getPwd())) {
    67. 			CommonUtils.toJson(false, "登录账号或者密码不能为空", resp);
    68. 		} else {
    69. 			Users u = ud.userLogin(user);
    70. 			System.out.println(u);
    71. 			// 判断u是否为空 账号不存在
    72. 			if (u == null) {
    73. 				CommonUtils.toJson(false, "账号不存在", resp);
    74. 				return null;
    75. 			}
    76. 			// 将前端输入的密码首先进行MD5加密处理
    77. 			String pwd = new MD5().getMD5ofStr(user.getPwd());
    78. 			// 判断密码是否正确
    79. 			if (!u.getPwd().equals(pwd)) {
    80. 				
    81. 				CommonUtils.toJson(false, "密码不正确", resp);
    82. 			} else {
    83. 				HttpSession session = req.getSession();
    84.                 session.setAttribute("user", u);
    85. 				CommonUtils.toJson(true, "OK", resp);
    86. 			}
    87. 		}
    88. 		return null;
    89. 	}
    90.  
    91. }

     2.4 mvc.xml配置

    3. config [
    4.        config (action*)>
    5.        action (forward*)>
    6.        
    7.        action
    8.           path CDATA "/"
    9.           type CDATA #REQUIRED
    10.        >
    11.       forward
    12.           name CDATA #REQUIRED 
    13.           path CDATA "/"
    14.           redirect (false|true) "false"
    15.        >
    16.       
    17.     ]>
    18.  
    19. <config>
    20. 	<action type="com.zking.oapro.action.UserAction" path="/userAction">action>
    21. config>

    三.代码(前台)

    3.1 登录界面

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    4. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    5. <html>
    6.     <head>
    7.         <%@include file="/common/head.jsp" %>
    8.         <meta name="viewport" content="width=device-width,initial-scale=1.33,minimum-scale=1.0,maximum-scale=1.0">
    9.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    10.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
    11.         <meta name="renderer" content="webkit">
    12.         <meta http-equiv="Content-Language" content="zh-CN">
    13.         <link rel="stylesheet" rev="stylesheet" href="css/iconfont.css" type="text/css" media="all">
    14.         <link rel="stylesheet" rev="stylesheet" href="css/login.css" type="text/css" media="all">
    15.         <style> body{color:#;}a{color:#;}a:hover{color:#;}.bg-black{background-color:#;}.tx-login-bg{background:url(images/bg.jpg) no-repeat 0 0;}style>
    16.         <script type="text/javascript" src="js/login.js">script>
    17.     head>
    18.     <body class="tx-login-bg">
    19.         <div class="tx-login-box">
    20.             <div class="login-avatar bg-black"><i class="iconfont icon-wode">i>div>
    21. 				<ul class="tx-form-li row">
    22. 					<li class="col-24 col-m-24"><p><input type="text" id="username" name="uname" value="zhangsan" placeholder="登录账号" class="tx-input">p>li>
    23. 					<li class="col-24 col-m-24"><p><input type="password" id="password" name="upwd" value="1234" placeholder="登录密码" class="tx-input">p>li>
    24. 					<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>
    25. 					<li class="col-12 col-m-12"><p><a href="#" class="f-12 f-gray">新用户注册a>p>li>
    26. 					<li class="col-12 col-m-12"><p class="ta-r"><a href="#" class="f-12 f-gray">忘记密码a>p>li>
    27. 					
    28. 				ul>
    29.             div>
    30.     body>
    31. html>

    3.1.1 登录界面js编写

    1. let layer,$;
    2. layui.use(['layer','jquery'],function(){
    3. 	layer=layui.layer,
    4. 	$=layui.jquery;
    5. 	
    6. 	$('#login').click(function(){
    7. 		//禁用按钮
    8. 		$('#login').attr('disabled','disabled').css({'background':'gray'});
    9. 		//获取账号和密码
    10. 		let username=$('#username').val();
    11. 		let password=$('#password').val();
    12. 		
    13. 		console.log('username=%s,password=%s',username,password);
    14. 		
    15. 		//发起ajax请求
    16. 		$.post('userAction.action',{
    17. 			'methodName':'UserLogin',
    18. 		    'loginName':username,
    19. 		    'pwd':password
    20. 		},function(rs){
    21. 			console.log(rs);
    22. 			if(rs.success){
    23. 				layer.msg('登录成功',{icon:6},function(){
    24. 					location.href='index.jsp';
    25. 				});
    26. 			}else{
    27. 				layer.msg(rs.msg,{icon:5},function(){});
    28. 				$('#login').removeAttr('disabled','disabled').css({'background':'#009688'});
    29. 			}
    30. 			},'json');
    31. 	});
    32. 	
    33. });

     3.1.2 运行界面

    3.2 用户界面

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2.     pageEncoding="UTF-8"%>
    4. <html>
    5. <head>
    6. <%@ include file="/common/head.jsp" %>
    7. <script type="text/javascript" src="js/system/userManage.js">script>
    8. head>
    9. <body>
    11. <div class="layui-form-item" style="margin: 15px 0px;text-align: center;">
    12.   <div class="layui-inline">
    13.     <label class="layui-form-label">用户账号label>
    14.     <div class="layui-input-inline">
    15.       <input type="text" id="loginName" autocomplete="off" class="layui-input" style="width: 150px">
    16.     div>
    17.     <div class="layui-inline">
    18.        <button id="btn_search" type="button" class="layui-btn" ><i class="layui-icon">i>查询button>
    19.        <button id="btn_add" type="button" class="layui-btn" ><i class="layui-icon">i>新增button>
    20.     div>
    21. div>
    23. <table id="tb" lay-filter="tb" class="layui-table">table>
    24.  
    25.  
    27. <script type="text/html" id="tbar">
    28. <a class="layui-btn layui-btn-xs" lay-event="reset">重置密码a>
    29. <a class="layui-btn layui-btn-xs" lay-event="edit">修改a>
    30. <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除a>
    31. script>
    32.  
    33. body>
    34. html>

    3.2.1 用户分页查询js编写

    1. let layer,$,table;
    2. var row;
    3. layui.use(['layer','table','jquery'],function(){
    4. 	layer=layui.layer,
    5. 	table=layui.table,
    6. 	$=layui.jquery;
    7. 	
    8. 	initTable();
    9. 	//查询事件
    10. 	$('#btn_search').click(function(){
    11. 		query();
    12. 	});
    13. 	//点击事件
    14. 	$('#btn_add').click(function(){
    15. 		row=null;
    16. 		openLayer('用户新增');
    17. 	});
    18. });
    19.  
    20. //初始化数据表格
    21. function initTable(){
    22. 	table.render({            //执行渲染
    23.         elem: '#tb',   //指定原始表格元素选择器（推荐id选择器）
    24.         height: 420,         //自定义高度
    25.         loading: false,      //是否显示加载条（默认 true）
    26.         cols: [[             //设置表头
    27.             {field: 'id', title: '用户编号', width: 180},
    28.             {field: 'name', title: '用户名称', width: 120},
    29.             {field: 'loginName', title: '用户账号', width: 140},
    30.             {field: 'rname', title: '用户角色', width: 120},
    31.             {field: '', title: '操作', width: 200,toolbar:'#tbar'}
    32.         ]]
    33.    });
    34. }
    35.  
    36. //点击查询
    37. function query(){
    38. 	 table.reload('tb', {
    39. 	        url: 'userAction.action',     //请求地址
    40. 	        method: 'POST',                    //请求方式，GET或者POST
    41. 	        loading: true,                     //是否显示加载条（默认 true）
    42. 	        page: true,                        //是否分页
    43. 	        where: {                           //设定异步数据接口的额外参数，任意设
    44. 	           'loginName':$('#loginName').val(),
    45. 	           'methodName':'queryUserPager'
    46. 	        },  
    47. 	        request: {                         //自定义分页请求参数名
    48. 	            pageName: 'page', //页码的参数名称，默认：page
    49. 	            limitName: 'rows' //每页数据量的参数名，默认：limit
    50. 	        },
    51. 	        //parseData数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式。
    52. 	        parseData: function (res) { //res 即为原始返回的数据
    53. 	        	console.log(res);
    54. 	            return {
    55. 	                "code": res.code == 200 ? 0 : res.code, //解析接口状态，返回结果的code值必须为0
    56. 	                "msg": res.msg,                         //解析提示文本
    57. 	                "count": res.total,                     //解析数据长度
    58. 	                "data": res.data                        //解析数据列表
    59. 	            };
    60. 	        },
    61. 	        done: function (res, curr, count) {
    62. 	        	console.log(res);
    63. 	        }
    64. 	   });
    65. 	 
    66. 	//监听工具条
    67. 	 table.on('tool(tb)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
    68. 	   row = obj.data; //获得当前行数据
    69. 	   var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    70. 	   var tr = obj.tr; //获得当前行 tr 的DOM对象
    71. 	  console.log(row);
    72. 	   if(layEvent === 'reset'){ //重置密码
    73. 		   layer.confirm('您确定要重置密码吗?', {icon: 3, title:'提示'}, function(index){
    74. 			   $.post('userAction.action',{
    75. 				   'methodName':'resetPwd',
    76. 				   'id':row.id
    77. 			   },function(rs){
    78. 	            	 if(rs.success){
    79. 	            		 //刷新父页面的列表
    80. 	            		 query();
    81. 	            	 }else{
    82. 	            		 layer.msg(rs.msg,function(){});
    83. 	            	 }
    84. 	             },'json');
    85. 			   layer.close(index);
    86. 		   });
    87. 	   } else if(layEvent === 'del'){ //删除
    88. 		   layer.confirm('您确定要删除吗?', {icon: 3, title:'提示'}, function(index){
    89. 			   $.post('userAction.action',{
    90. 				   'methodName':'delUser',
    91. 				   'id':row.id
    92. 			   },function(rs){
    93. 	            	 if(rs.success){
    94. 	            		 //刷新父页面的列表
    95. 	            		 query();
    96. 	            	 }else{
    97. 	            		 layer.msg(rs.msg,function(){});
    98. 	            	 }
    99. 	             },'json');
    100. 			   layer.close(index);
    101. 		   });
    102. 	   } else if(layEvent === 'edit'){ //编辑
    103. 		   openLayer('用户修改');
    104. 	   }
    105. 	 });
    106. 	 
    107. }
    108.  
    109. //对话框 用户新增和修改共用
    110. function openLayer(title){
    111. 	 layer.open({
    112.          type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    113.          title:title,
    114.          area: ['640px', '360px'],   //宽高
    115.          skin: 'layui-layer-rim',    //样式类名
    116.          content: 'jsp/system/userEdit.jsp',                 //书本编辑页面
    117.          btn:['保存','关闭'],
    118.          yes:function(index,laypro){
    119.         	 //调用子页面中提供的getData方法，快速获取子页面的form表单数据
    120.              let data= $(laypro).find("iframe")[0].contentWindow.getData();
    121.              console.log(data);
    122.              let methodName="addUser";
    123.              if(title=="用户修改")
    124.             	 methodName="editUser";
    125.              data['methodName']=methodName;
    126.              console.log(data);
    127.              $.post('userAction.action',data,function(rs){
    128.             	 if(rs.success){
    129.             		 //关闭对话框
    130.             		 layer.closeAll();
    131.             		 //刷新父页面的列表
    132.             		 query();
    133.             	 }else{
    134.             		 layer.msg(rs.msg,function(){});
    135.             	 }
    136.              },'json');
    137.          },
    138.          btn2:function(){
    139.         	 //layer.msg('关闭');
    140.         	 layer.closeAll();
    141.          }
    142. 	 });
    143. }

    3.2.2 运行界面

     模糊查询

  • 相关阅读:
    MySQL在线修改表结构-PerconaTookit工具
    Optimize（程序优化）
    Ubuntu18.04启动出现Starting Gnome Display Manager问题
    【计算机网络系列】物理层②：信道复用技术（频分复用、时分复用、波分复用及码分复用）
    RabbitMQ实现数据库与ElasticSearch的数据同步和分享文件过期处理
    无需公网IP、简单3步，直连远程NAS实现高速访问
    ubuntu 20.04 qemu u-boot-2022.10 开发环境搭建
    微软POWERBI连接SAP HANA数据库
    手把手教你做一个天猫精灵（四）
    【每天学习一点新知识】HTTP各个响应状态所表示的含义
  • 原文地址：https://blog.csdn.net/m0_63579794/article/details/126000924