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)

序号	列名	数据类型	长度	允许空	说明
1	id	int		NO	主键 用户编号
2	name	varchar	100	NO	真实姓名
3	loginName	varchar	100	NO	用户名
4	pwd	varchar	20	NO	密码
5	rid	int		NO	权限

 二.代码(后台)

 2.1 实体类

package com.zking.oapro.entity;

import java.io.Serializable;

public class Users implements Serializable {

	private Integer id;// 用户编号
	private String name;// 真实姓名
	private String loginName;// 用户名
	private String pwd;// 密码
	private int rid;

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

	public Users(String loginName, String pwd) {
		super();
		this.loginName = loginName;
		this.pwd = pwd;
	}

	public Users(Integer id, String name, String loginName, String pwd, int rid) {
		super();
		this.id = id;
		this.name = name;
		this.loginName = loginName;
		this.pwd = pwd;
		this.rid = rid;
	}

	public Integer getId() {
		return id;
	}

	public void setId(Integer 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 int getRid() {
		return rid;
	}

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

	@Override
	public String toString() {
		return "Users [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid
				+ "]";
	}

}

2.2 dao层

package com.zking.oapro.dao;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;

import com.mysql.jdbc.Connection;
import com.mysql.jdbc.PreparedStatement;
import com.mysql.jdbc.StringUtils;
import com.zking.oapro.entity.Users;
import com.zking.oapro.utils.CommonUtils;
import com.zking.oapro.utils.DBHelper;
import com.zking.oapro.utils.MD5;
import com.zking.oapro.utils.PageBean;

public class UserDao extends BaseDao{
	
	
	/**
	 * 分页查询用户信息
	 * @param user
	 * @param pageBean
	 * @return
	 */
    @SuppressWarnings("unchecked")
	public List<Map<String,Object>> queryUserPager(Users user,PageBean pageBean){
    	String sql="select id,name,loginName,pwd,rid,\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" + 
    			") rname\r\n" + 
    			"from t_oa_user where 1=1";
    	//按照登录账号模糊查询
    	if(!StringUtils.isNullOrEmpty(user.getLoginName()))
    		sql+=" and loginName like '"+user.getLoginName()+"%'";
    	//按照用户编号降序排序
    	sql+=" order by id desc";
    	System.out.println(sql);
    	
    	return super.executeQuery(sql, pageBean, new CallBack<Map<String,Object>>() {
			
			@Override
			public List<Map<String,Object>> forEach(ResultSet rs) throws SQLException {
				return CommonUtils.toList(rs);
			}
		});
    }
	

	/**
	 * 登录
	 */
	public Users userLogin(Users use) {
		// 连接对象
		Connection conn = null;
		// 执行对象
		PreparedStatement ps = null;
		// 结果集对象
		ResultSet rs = null;
		// SQL语句
		String sql = "select * from t_oa_user where loginName=?";
		// 用户实体
		Users users = null;
		try {
			// 获取连接
			conn = (Connection) DBHelper.getConnection();
			// 将SQL语句传到执行语句中
			ps = (PreparedStatement) conn.prepareStatement(sql);
			// 给占位符赋值
			ps.setString(1, use.getLoginName());
			// 遍历结果集对象
			rs = ps.executeQuery();
			// 判断是否存在用户数据
			if (rs.next()) {
				users = new Users(rs.getInt("id"), rs.getString("name"), rs.getString("loginName"), rs.getString("pwd"), rs.getInt("rid"));
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			DBHelper.close(conn, ps, rs);
		}
		return users;
	}

	public static void main(String[] args) {
		
   System.out.println(new UserDao().userLogin(new Users("zhangsan","1234"))	);	
		
	}
	
}

 2.2.1 JUnit测试

package com.zking.oapro.dao;

import static org.junit.Assert.fail;

import java.util.List;
import java.util.Map;

import org.junit.Before;
import org.junit.Test;

import com.zking.oapro.entity.Users;
import com.zking.oapro.utils.PageBean;

public class UserDaoTest {

	UserDao ud=new UserDao();
	Users user=null;

	
	@Before
	public void setUp() throws Exception {
		user=new Users();
	}

	@Test
	public void testQueryUserPager() {
		  PageBean pageBean=new PageBean();
		    user.setLoginName("a");
		    List<Map<String, Object>> list = ud.queryUserPager(user, pageBean);
		    System.out.println("总记录数:"+pageBean.getTotal());
		    list.forEach(System.out::println);
	}


}

2.3 action

package com.zking.oapro.action;

import java.io.IOException;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.mysql.jdbc.StringUtils;
import com.zking.mvc.framework.DispatcherAction;
import com.zking.mvc.framework.DriverModel;
import com.zking.oapro.dao.UserDao;
import com.zking.oapro.entity.Users;
import com.zking.oapro.utils.CommonUtils;
import com.zking.oapro.utils.MD5;
import com.zking.oapro.utils.PageBean;

public class UserAction extends DispatcherAction implements DriverModel<Users> {

	private Users user = new Users();
	private UserDao ud = new UserDao();

	@Override
	public Users getModel() {
		return user;
	}

	
	/**
	 * 分页查询
	 * 
	 * @param req
	 * @param resp
	 * @return
	 * @throws ServletException
	 * @throws IOException
	 */
	public String queryUserPager(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		try {
			PageBean pageBean = new PageBean();
			pageBean.setRequest(req);
			List<Map<String, Object>> list = ud.queryUserPager(user, pageBean);
			CommonUtils.toJson(200, "OK", pageBean.getTotal(), list, resp);
		} catch (Exception e) {
			e.printStackTrace();
			CommonUtils.toJson(500, "分页查询用户信息失败", 0, null, resp);
		}
		return null;
	}

	/**
	 * 用户登录
	 * 
	 * @param req
	 * @param resp
	 * @return
	 * @throws ServletException
	 * @throws IOException
	 */
	public String UserLogin(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// 1.判断登录账号和密码是否为空
		if (StringUtils.isNullOrEmpty(user.getLoginName()) || StringUtils.isNullOrEmpty(user.getPwd())) {
			CommonUtils.toJson(false, "登录账号或者密码不能为空", resp);
		} else {
			Users u = ud.userLogin(user);
			System.out.println(u);
			// 判断u是否为空 账号不存在
			if (u == null) {
				CommonUtils.toJson(false, "账号不存在", resp);
				return null;
			}
			// 将前端输入的密码首先进行MD5加密处理
			String pwd = new MD5().getMD5ofStr(user.getPwd());
			// 判断密码是否正确
			if (!u.getPwd().equals(pwd)) {
				
				CommonUtils.toJson(false, "密码不正确", resp);
			} else {
				HttpSession session = req.getSession();
                session.setAttribute("user", u);
				CommonUtils.toJson(true, "OK", resp);
			}
		}
		return null;
	}

}

 2.4 mvc.xml配置

<?xml version="1.0" encoding="UTF-8"?>
<!-- config标签:可以包含0~N个action标签 -->
<!DOCTYPE config [
       <!ELEMENT config (action*)>
       <!ELEMENT action (forward*)>
       
       <!ATTLIST action
          path CDATA "/"
          type CDATA #REQUIRED
       >
      <!ATTLIST forward
          name CDATA #REQUIRED 
          path CDATA "/"
          redirect (false|true) "false"
       >
      
    ]>

<config>
	<action type="com.zking.oapro.action.UserAction" path="/userAction"></action>
</config>

三.代码(前台)

3.1 登录界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
    <head>
        <%@include file="/common/head.jsp" %>
        <meta name="viewport" content="width=device-width,initial-scale=1.33,minimum-scale=1.0,maximum-scale=1.0">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="renderer" content="webkit">
        <meta http-equiv="Content-Language" content="zh-CN">
        <link rel="stylesheet" rev="stylesheet" href="css/iconfont.css" type="text/css" media="all">
        <link rel="stylesheet" rev="stylesheet" href="css/login.css" type="text/css" media="all">
        <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>
        <script type="text/javascript" src="js/login.js"></script>
    </head>
    <body class="tx-login-bg">
        <div class="tx-login-box">
            <div class="login-avatar bg-black"><i class="iconfont icon-wode"></i></div>
				<ul class="tx-form-li row">
					<li class="col-24 col-m-24"><p><input type="text" id="username" name="uname" value="zhangsan" placeholder="登录账号" class="tx-input"></p></li>
					<li class="col-24 col-m-24"><p><input type="password" id="password" name="upwd" value="1234" placeholder="登录密码" class="tx-input"></p></li>
					<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>
					<li class="col-12 col-m-12"><p><a href="#" class="f-12 f-gray">新用户注册</a></p></li>
					<li class="col-12 col-m-12"><p class="ta-r"><a href="#" class="f-12 f-gray">忘记密码</a></p></li>
					
				</ul>
            </div>
    </body>
</html>

3.1.1 登录界面js编写

let layer,$;
layui.use(['layer','jquery'],function(){
	layer=layui.layer,
	$=layui.jquery;
	
	$('#login').click(function(){
		//禁用按钮
		$('#login').attr('disabled','disabled').css({'background':'gray'});
		//获取账号和密码
		let username=$('#username').val();
		let password=$('#password').val();
		
		console.log('username=%s,password=%s',username,password);
		
		//发起ajax请求
		$.post('userAction.action',{
			'methodName':'UserLogin',
		    'loginName':username,
		    'pwd':password
		},function(rs){
			console.log(rs);
			if(rs.success){
				layer.msg('登录成功',{icon:6},function(){
					location.href='index.jsp';
				});
			}else{
				layer.msg(rs.msg,{icon:5},function(){});
				$('#login').removeAttr('disabled','disabled').css({'background':'#009688'});
			}
			},'json');
	});
	
});

 3.1.2 运行界面

3.2 用户界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<%@ include file="/common/head.jsp" %>
<script type="text/javascript" src="js/system/userManage.js"></script>
</head>
<body>
<!-- 搜索框 -->
<div class="layui-form-item" style="margin: 15px 0px;text-align: center;">
  <div class="layui-inline">
    <label class="layui-form-label">用户账号</label>
    <div class="layui-input-inline">
      <input type="text" id="loginName" autocomplete="off" class="layui-input" style="width: 150px">
    </div>
    <div class="layui-inline">
       <button id="btn_search" type="button" class="layui-btn" ><i class="layui-icon">&#xe615;</i>查询</button>
       <button id="btn_add" type="button" class="layui-btn" ><i class="layui-icon">&#xe61f;</i>新增</button>
    </div>
</div>
<!-- 数据表格 -->
<table id="tb" lay-filter="tb" class="layui-table"></table>


<!-- 对话框(新增和编辑共用一个页面) -->
<script type="text/html" id="tbar">
<a class="layui-btn layui-btn-xs" lay-event="reset">重置密码</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

</body>
</html>

3.2.1 用户分页查询js编写

let layer,$,table;
var row;
layui.use(['layer','table','jquery'],function(){
	layer=layui.layer,
	table=layui.table,
	$=layui.jquery;
	
	initTable();
	//查询事件
	$('#btn_search').click(function(){
		query();
	});
	//点击事件
	$('#btn_add').click(function(){
		row=null;
		openLayer('用户新增');
	});
});

//初始化数据表格
function initTable(){
	table.render({            //执行渲染
        elem: '#tb',   //指定原始表格元素选择器（推荐id选择器）
        height: 420,         //自定义高度
        loading: false,      //是否显示加载条（默认 true）
        cols: [[             //设置表头
            {field: 'id', title: '用户编号', width: 180},
            {field: 'name', title: '用户名称', width: 120},
            {field: 'loginName', title: '用户账号', width: 140},
            {field: 'rname', title: '用户角色', width: 120},
            {field: '', title: '操作', width: 200,toolbar:'#tbar'}
        ]]
   });
}

//点击查询
function query(){
	 table.reload('tb', {
	        url: 'userAction.action',     //请求地址
	        method: 'POST',                    //请求方式，GET或者POST
	        loading: true,                     //是否显示加载条（默认 true）
	        page: true,                        //是否分页
	        where: {                           //设定异步数据接口的额外参数，任意设
	           'loginName':$('#loginName').val(),
	           'methodName':'queryUserPager'
	        },  
	        request: {                         //自定义分页请求参数名
	            pageName: 'page', //页码的参数名称，默认：page
	            limitName: 'rows' //每页数据量的参数名，默认：limit
	        },
	        //parseData数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式。
	        parseData: function (res) { //res 即为原始返回的数据
	        	console.log(res);
	            return {
	                "code": res.code == 200 ? 0 : res.code, //解析接口状态，返回结果的code值必须为0
	                "msg": res.msg,                         //解析提示文本
	                "count": res.total,                     //解析数据长度
	                "data": res.data                        //解析数据列表
	            };
	        },
	        done: function (res, curr, count) {
	        	console.log(res);
	        }
	   });
	 
	//监听工具条
	 table.on('tool(tb)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	   row = obj.data; //获得当前行数据
	   var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	   var tr = obj.tr; //获得当前行 tr 的DOM对象
	  console.log(row);
	   if(layEvent === 'reset'){ //重置密码
		   layer.confirm('您确定要重置密码吗?', {icon: 3, title:'提示'}, function(index){
			   $.post('userAction.action',{
				   'methodName':'resetPwd',
				   'id':row.id
			   },function(rs){
	            	 if(rs.success){
	            		 //刷新父页面的列表
	            		 query();
	            	 }else{
	            		 layer.msg(rs.msg,function(){});
	            	 }
	             },'json');
			   layer.close(index);
		   });
	   } else if(layEvent === 'del'){ //删除
		   layer.confirm('您确定要删除吗?', {icon: 3, title:'提示'}, function(index){
			   $.post('userAction.action',{
				   'methodName':'delUser',
				   'id':row.id
			   },function(rs){
	            	 if(rs.success){
	            		 //刷新父页面的列表
	            		 query();
	            	 }else{
	            		 layer.msg(rs.msg,function(){});
	            	 }
	             },'json');
			   layer.close(index);
		   });
	   } else if(layEvent === 'edit'){ //编辑
		   openLayer('用户修改');
	   }
	 });
	 
}

//对话框 用户新增和修改共用
function openLayer(title){
	 layer.open({
         type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
         title:title,
         area: ['640px', '360px'],   //宽高
         skin: 'layui-layer-rim',    //样式类名
         content: 'jsp/system/userEdit.jsp',                 //书本编辑页面
         btn:['保存','关闭'],
         yes:function(index,laypro){
        	 //调用子页面中提供的getData方法，快速获取子页面的form表单数据
             let data= $(laypro).find("iframe")[0].contentWindow.getData();
             console.log(data);
             let methodName="addUser";
             if(title=="用户修改")
            	 methodName="editUser";
             data['methodName']=methodName;
             console.log(data);
             $.post('userAction.action',data,function(rs){
            	 if(rs.success){
            		 //关闭对话框
            		 layer.closeAll();
            		 //刷新父页面的列表
            		 query();
            	 }else{
            		 layer.msg(rs.msg,function(){});
            	 }
             },'json');
         },
         btn2:function(){
        	 //layer.msg('关闭');
        	 layer.closeAll();
         }
	 });
}

3.2.2 运行界面

 模糊查询