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> 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>() {
			
			@Override
			public List> 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> 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 {

	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> 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配置

       
       
       
      
      
    ]>


	

三.代码(前台)

3.1 登录界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

    
        <%@include file="/common/head.jsp" %>
        
        
        
        
        
        
        
        
        
    
    
        

            

				

					

					

					
登录
					
新用户注册
					
忘记密码
					
				
            
    

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"%>



<%@ include file="/common/head.jsp" %>





  

    用户账号
    

      
    
    

       查询
       新增
    

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 运行界面

 模糊查询