目录
一、页面要求、数据库分析
1)页面要求
2)数据库
进行优化,查询出用户信息及对应角色--case when
rid用户角色:1 管理员 2 发起者 3 审批者 4 参与者 5 会议室管理员
select *,
(case rid
when 1 then '管理员'
when 2 then '发起者'
when 3 then '审批者'
when 4 then '参与者'
when 5 then '会议室管理员'
else '其他' end) roleName
from t_oa_user;
二、前后台编码
后台
我们新建一个用户管理的jsp界面
在其中随便输入几个x,测试一下该界面是否能运行成功
可以的话,我们就上官网找到与我们最终想要展示出来的效果的代码,并拷贝到对应区域,为我所用。拷贝下来的样式效果如下⬇⬇与我们最终想要的效果还有些差别,删删改改一下改成我们需要的样子
删改最后差不多是这个样子
好滴,接下来开始编写后台代码了
UserDao源码
package com.zking.dao;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;
import com.zking.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;
public class UserDao extends BaseDao<User> {
public User login(User user) throws Exception {
String sql="select * from t_oa_user where loginName='"+user.getLoginName()+"' and pwd='"+user.getPwd()+"' ";
//根据sql查询符合条件的用户,通常只会返回一条数据
List<User> users = super.executeQuery(sql, User.class, null);
return users == null || users.size() == 0 ? null : users.get(0);
}
//查询用户信息及对应角色信息,角色用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) roleName \r\n" +
"from t_oa_user where 1=1";
//拿到用户名字
String name = user.getName();
//判断不为空
if(StringUtils.isNotBlank(name)) {
sql+="and name like '%"+name+"%'";
}
return super.executeQuery(sql, pageBean);
}
//增加
public int add(User user) throws Exception {
String sql="insert into t_oa_user(name,loginName,pwd) value(?,?,?)";
return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd"});
}
//删除
public int del(User user) throws Exception {
String sql="delete from t_oa_user where id=?";
return super.executeUpdate(sql, user, new String[] {"id"});
}
//修改
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"});
}
}
先利用Junit测试dao方法
测试查询方法
@Test
public void testList() {
User user=new User();
PageBean pageBean=new PageBean();
try {
List<Map<String, Object>> list = ud.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("yjj");
user.setPwd("123456");
try {
ud.add(user);
} catch (Exception e) {
e.printStackTrace();
}
}
测试修改方法
@Test
public void testEdit() {
User user=new User();
user.setName("易家军");
user.setLoginName("yjjhhh");
user.setPwd("1234");
user.setId(13L);
try {
ud.edit(user);
} catch (Exception e) {
e.printStackTrace();
}
}
测试删除方法
@Test
public void testDel() {
User user=new User();
user.setId(13L);
try {
ud.del(user);
} catch (Exception e) {
e.printStackTrace();
}
}
测试dao方法没问题后,我们编写action方法
UserAction增删改查源码
//用户查询
public String list(HttpServletRequest req, HttpServletResponse resp) {
try {
PageBean pageBean=new PageBean();
pageBean.setRequest(req);
List<Map<String, Object>> users = userDao.list(user, pageBean);
//注意:LayUI中的数据表格的格式
ResponseUtil.write(resp, R.ok(0, "用户数据查询成功",pageBean.getTotal(),users));
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.ok(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.write(resp, R.ok(200, "用户数据新增成功"));
}
else {
ResponseUtil.write(resp, R.error(0, "用户数据新增失败"));
}
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.ok(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.write(resp, R.ok(200, "用户数据删除成功"));
}
else {
ResponseUtil.write(resp, R.error(0, "用户数据删除失败"));
}
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.ok(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.write(resp, R.ok(200, "用户数据修改成功"));
}
else {
ResponseUtil.write(resp, R.error(0, "用户数据修改失败"));
}
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.ok(0, "用户数据修改失败"));
} catch (Exception e1) {
e1.printStackTrace();
}
}
return null;
}
前台
userManage源码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/common/header.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>
</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>
有关UserManage页面的js代码,我把js代码封装成js文件,在页面中直接导入js文件即可,这样界面代码更加简洁
userManage.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'},
]]
});
//在页面中的<table>中必须配置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{
}
});
}
//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();
}
});
}
当我们点击查询⬇⬇⬇
查询功能ok,接下来我们编写增加与修改页面
新建一个增加修改jsp页面
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>
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');
}
点击新增按钮后弹出弹出层
新增成功
❗❗用到的实体类,还是上一期的User
使用Junit测试,记得引入需要测试的类
⬇⬇⬇⬇⬇
这是一个版本错误,在LayUI2.5版本中是没有form表单的,看到这样的错误第一时间先检查版本是否符合,如果不符合,将项目中原有的LayUI文件删除重新导入符合版本的LayUI文件即可,以下我导入的是LayUI2.6
博客中,人物名称被抹掉了一部分,是因为他们都是博主身边的人,咱需要保护他们的个人信息啦