目录
本章节目标：
完成OA项目用户登录及首页展示
一.用户登录
用户查询
用户角色case when后台处理
用户新增
用户修改
用户删除
重置密码
安全退出
1.用户查询SQL语句
2.后台增删改查方法及测试
3.web层的编写
4.增删改查需要用到的所有组件-来自于官网
如搜索框，数据表格，工具栏，弹出层，form数据回显，父子页面传参
5.完全依葫芦画瓢，copy完成相对应功能
6.将使用一个MVC自定义框架
User.java
package com.zking.oa.model;
import java.io.Serializable;
import org.lisen.mvc.util.AutoIncrement;
import org.lisen.mvc.util.Ignore;
import org.lisen.mvc.util.Key;
import org.lisen.mvc.util.Table;
@Table("t_oa_user")
public class User implements Serializable{
@AutoIncrement
@Key
private Integer id;
private String name;
private String loginName;
private String pwd;
private long rid;
//忽略字段
@Ignore
private String roleName;
public String getRoleName() {
if(this.rid == 1) return "管理员";
if(this.rid == 2) return "发起者";
if(this.rid == 3) return "审批者";
if(this.rid == 4) return "参与者";
if(this.rid == 5) return "会议管理员";
return "";
}
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 long getRid() {
return rid;
}
public void setRid(long rid) {
this.rid = rid;
}
public User() {
// TODO Auto-generated constructor stub
}
public User(int id, String name, String loginName, String pwd, long rid) {
this.id = id;
this.name = name;
this.loginName = loginName;
this.pwd = pwd;
this.rid = rid;
}
public User(String name, String loginName, String pwd, long rid) {
this.name = name;
this.loginName = loginName;
this.pwd = pwd;
this.rid = rid;
}
@Override
public String toString() {
return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid + "]";
}
}
UserDao.java
package com.zking.oa.dao;
import java.util.ArrayList;
import java.util.List;
import org.junit.Test;
import org.lisen.mvc.util.DbTemplate;
import org.lisen.mvc.util.PageBean;
import com.zking.oa.model.User;
import com.zking.oa.util.MD5;
public class UserDao implements IUserDao {
@Override
public User loadUser(String loginName) {
String sql = "select * from t_oa_user where loginName = ?";
if(loginName == null || "".equals(loginName)) return null;
List<User> users = DbTemplate.query(sql, new Object[] {loginName}, User.class);
return users == null || users.size() == 0 ? null : users.get(0);
}
@Override
public List<User> listUser(User user,PageBean pageBean){
String sql="select * from t_oa_user ";
//用来保存参数
List<Object> param = new ArrayList<>();
if(user !=null && !"".equals(user.getName())) {
sql+="where name like ?";
param.add(user.getName()+"%");
}
return DbTemplate.query(sql, param.toArray(), pageBean,User.class);
}
@Test
public void testListUser() {
User u = new User();
u.setName("瑶");
List<User> listuser = listUser(u, PageBean());
//System.out.println(listuser);
}
@Override
public void addUser(User user) {
DbTemplate.save(user);
}
@Override
public void updateUser(User user) {
String sql="update t_oa_user set loginName=?,rid=? where id=?";
DbTemplate.update(sql, new Object[] {user.getLoginName(),user.getRid(),user.getId()});
}
@Override
public void deleteUser(User user) {
String sql="delete from t_oa_user where id=?";
DbTemplate.update(sql, new Object[] {
user.getId()
});
}
@Override
public void resetPwd(User user) {
String sql="update t_oa_user set pwd=? where id=?";
DbTemplate.update(sql, new Object[] {
new MD5().getMD5ofStr("1234"),
user.getId()
});
}
private PageBean PageBean() {
// TODO Auto-generated method stub
return null;
}
public static void main(String[] args) {
UserDao userDao = new UserDao();
User loadUser = userDao.loadUser("dg");
System.out.println(loadUser);
}
}
IUserDao.java
package com.zking.oa.dao;
import java.util.List;
import org.lisen.mvc.util.PageBean;
import com.zking.oa.model.User;
public interface IUserDao {
/**
* 通过登录名获取用户信息
* @param loginName 登录名
* @return User
*/
User loadUser(String loginName);
/**
* 通过用户查询
* @param user
* @param pageBean
* @return
*/
List<User> listUser(User user, PageBean pageBean);
/**
* 增加用户
* @param user
*/
void addUser(User user);
/**
* 修改用户
* @param user
*/
void updateUser(User user);
/**
* 删除用户
* @param user
*/
void deleteUser(User user);
/**
* 重置密码
* @param user
*/
void resetPwd(User user);
}
UserAction.java
package com.zking.oa.action;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.lisen.mvc.framework.AbstractDispatchAction;
import org.lisen.mvc.framework.ModelDrive;
import org.lisen.mvc.util.PageBean;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zking.oa.model.User;
import com.zking.oa.service.IUserService;
import com.zking.oa.service.UserService;
import com.zking.oa.util.CommonUtil;
import com.zking.oa.util.MD5;
public class UserAction extends AbstractDispatchAction implements ModelDrive {
private User user = new User();
@Override
public Object getModel() {
return user;
}
private IUserService service = new UserService();
public void login(HttpServletRequest req, HttpServletResponse resp) {
User db_user = service.loadUser(user.getLoginName());
if(db_user != null && user.getLoginName().equals(db_user.getLoginName())) {
if(user.getPwd() != null) {
//得到前台传过来的密码，然后进行MD5计算，在和数据库中的配置进行比较
String tmp = user.getPwd();
MD5 md5 = new MD5();
String _pwd = md5.getMD5ofStr(tmp);
if(_pwd.equals(db_user.getPwd())) {
CommonUtil.sendResponse(1, "用户名密码正确", resp);
//登录成功，则将用户放入session中
req.getSession().setAttribute("user", db_user);
}else {
CommonUtil.sendResponse(-1, "密码不正确", resp);
}
}
} else {
CommonUtil.sendResponse(-1, "用户名不存在", resp);
}
}
public void logout(HttpServletRequest req,HttpServletResponse resp) {
req.getSession().invalidate();
CommonUtil.sendResponse(1, "安全退出", resp);
}
public void listUser(HttpServletRequest req,HttpServletResponse resp) {
try {
PageBean pageBean = new PageBean();
pageBean.setRequest(req);
List<User> list = service.listUser(user, pageBean);
CommonUtil.sendResponse(0, "成功",pageBean.getTotal() , list, resp);
} catch (Exception e) {
e.printStackTrace();
}
}
public void addUser(HttpServletRequest req,HttpServletResponse resp) {
try {
MD5 md5 = new MD5();
user.setPwd(md5.getMD5ofStr(user.getPwd()));
service.addUser(user);
CommonUtil.sendResponse(0, "增加用户成功", resp);
} catch (Exception e) {
e.printStackTrace();
CommonUtil.sendResponse(-1, "增加用户失败", resp);
}
}
public void updateUser(HttpServletRequest req,HttpServletResponse resp) {
try {
service.updateUser(user);
CommonUtil.sendResponse(0, "修改用户成功", resp);
} catch (Exception e) {
e.printStackTrace();
CommonUtil.sendResponse(-1, "修改用户失败", resp);
}
}
public void deleteUser(HttpServletRequest req,HttpServletResponse resp) {
try {
service.deleteUser(user);
CommonUtil.sendResponse(0, "删除用户成功", resp);
} catch (Exception e) {
e.printStackTrace();
CommonUtil.sendResponse(-1, "删除用户失败", resp);
}
}
public void resetPwd(HttpServletRequest req,HttpServletResponse resp) {
try {
service.resetPwd(user);
CommonUtil.sendResponse(0, "密码修改成功", resp);
} catch (Exception e) {
e.printStackTrace();
CommonUtil.sendResponse(-1, "密码修改失败", resp);
}
}
}
login.jsp（登录界面）
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<%@include file="/common/head.jsp" %>
<style>
body {
color: #;
}
a {
color: #;
}
a:hover {
color: #;
}
.bg-black {
background-color: #;
}
#bg-video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
</style>
<script type="text/javascript">
layui.use(['layer', 'jquery'], function() {
let layer=layui.layer;
let $=layui.jquery;
$("#login").click(function() {
$.ajax({
url: ctx+"/userAction.action?methodName=login",
data: {
loginName: $("#username").val(),
pwd: $("#password").val()
},
dataType: 'json',
type: 'post',
success: function(data) {
if(data.code == 1) {
layer.msg(data.msg,{icon:1},function(){
location.href="index.jsp";
});
}else{
layer.msg(data.msg,{icon:5},function(){});
}
}
})
});
});
</script>
</head>
<body class="tx-login-bg">
<video id="bg-video" autoplay muted loop>
<source src="${ctx}/images/4.mp4" type="video/mp4">
</video>
<div class="tx-login-box">
<div class="login-avatar bg-black">
<img alt="" src="images/壁纸3.png" style="width:100px;height:65px;border-radius:50%">
</div>
<ul class="tx-form-li row">
<li class="col-24 col-m-24"><p><input type="text" id="username" value="yaoyao" placeholder="登录账号" class="tx-input"></p></li>
<li class="col-24 col-m-24"><p><input type="password" id="password" 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>
userManage.jsp (数据绑定，修改，删除)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@ include file="/common/head.jsp" %>
<title>数据绑定</title>
<style>
.layui-inline {
margin-top: 20px;
}
</style>
<script>
let table=null;
let $ = null;
var row = null;
layui.use(['table','jquery'], function(){
table = layui.table;
$ = layui.jquery;
loadUsers();
$("#queryUser").click(function() {
loadUsers();
});
table.on('tool(userTable)', function(e) {
// console.log(e);
row = e.data;
//console.log(row);
if('edit' == e.event) {
layer.open({
type: 2, //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
title: '增加用户',
area: ['660px', '350px'], //宽高
skin: 'layui-layer-rim', //样式类名
content: ctx+'/jsp/system/userEdit.jsp'
});
}
if('del' == e.event) {
// alert("del = " + row.id);
row = e.data;
//console.log(row);
layer.confirm("亲,真的删除吗?",function(index){
e.del();
layer.close(index);
//发送请求到后台调用删除方法
$.ajax({
url: ctx+"/userAction.action?methodName=deleteUser",
data: row,
type: 'post',
dataType: 'json',
success: function(resp){
if(resp.code == 0){
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
loadUsers();
}
else{
alert("no");
}
}
})
})
}
if('reset'==e.event){
row = e.data;
//console.log(row);
layer.confirm("亲,真的重置吗?",function(index){
layer.close(index);
//发送请求到后台调用删除方法
$.ajax({
url: ctx+"/userAction.action?methodName=resetPwd",
data: row,
type: 'post',
dataType: 'json',
success: function(resp){
if(resp.code == 0){
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
loadUsers();
}
else{
alert("no");
}
}
})
})
}
});
$("#addUser").click(function() {
row = null;
layer.open({
type: 2, //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
title: '增加用户',
area: ['660px', '350px'], //宽高
skin: 'layui-layer-rim', //样式类名
content: ctx+'/jsp/system/userEdit.jsp'
});
});
});
function loadUsers() {
table.render({
elem: '#userTable',
url: ctx + '/userAction.action?methodName=listUser',
cols: [[
{field:'id', width:80, title: 'ID'},
{field:'name', width:180, title: '姓名', sort: true},
{field:'loginName', width:180, title: '登录名', sort: true},
{field:'roleName', width:180, title: '角色'},
{field: '', title: '操作', width: 250, toolbar:'#toolbar'}
]],
page: true,
request: {
pageName: 'page',
limitName: 'rows'
},
method: 'post',
where: {
name: $("#name").val()
},
loading: true,
});
}
</script>
</head>
<body>
<!-- 查询条件 -->
<div class="layui-inline">
<label class="layui-form-label">姓名：</label>
<div class="layui-input-block">
<input type="text" name="name" id="name" placeholder="名称" class="layui-input">
</div>
</div>
<div class="layui-inline">
<button class="layui-btn" id="queryUser"><i class="layui-icon layui-icon-search"></i>查询</button>
<button class="layui-btn layui-btn-normal" id="addUser"><i class="layui-icon layui-icon-add-1"></i>增加</button>
</div>
<!-- 用户信息表格 -->
<table class="layui-hide" id="userTable" lay-filter="userTable"></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>userEdit.jsp（用户新增）
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新增用户</title>
<%@include file="/common/head.jsp" %>
<script type="text/javascript">
let layer,form,$;
layui.use(['jquery', 'layer','form'],function() {
layer=layui.layer,form=layui.form,$=layui.jquery;
debugger;
//获取用户信息，并回填在表单中，同时将name属性设置为只读，将密码隐藏（不允许在此处改密码）
if(null!=parent.row){
form.val('user',$.extend({}, parent.row||{}));
$('#name').attr("readonly","readonly");
$('#password').hide();
}
form.on('submit(user)', function(data){
let id = $("#id").val();
//如果有id则说明是修改，否则为新增
if(!id) {
//增加
$.ajax({
url: ctx + "/userAction.action?methodName=addUser",
data: data.field,
type: 'post',
dataType: 'json',
success: function(resp) {
if(resp.code == 0) {
layer.msg(resp.msg);
var index = parent.layer.getFrameIndex(window.name);
//再执行关闭
parent.layer.close(index);
parent.loadUsers();
}
}
});
} else {
//修改
$.ajax({
url: ctx + "/userAction.action?methodName=updateUser",
data: data.field,
type: 'post',
dataType: 'json',
success: function(resp) {
if(resp.code == 0) {
layer.msg(resp.msg);
var index = parent.layer.getFrameIndex(window.name);
//再执行关闭
parent.layer.close(index);
parent.loadUsers();
}
}
});
}
});
});
</script>
</head>
<body>
<div style="padding:10px;">
<form id="user" class="layui-form layui-form-pane" lay-filter="user">
<input type="hidden" name="id" id="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" id="password">
<label class="layui-form-label">登录密码</label>
<div class="layui-input-block">
<input type="password" name="pwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item" style="text-align:center;">
<button type="button" lay-submit="" lay-filter="user" class="layui-btn layui-btn-normal">保存</button>
<button type="reset" class="layui-btn">重置</button>
</div>
</form>
</div>
</body>
</html>效果展示
登录界面
绑定数据
新增界面 
删除界面
修改界面
扫一扫
2459
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
