一、后端搭建
①实体类,数据表
表t_oa_user
实体类
package com.xlb.entity;
public class User {
private Long id;
private String name;
private String loginName;
private String pwd;
private Long rid;
public Long getId() {
return id;
}
public void setId(Long 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() {
super();
// TODO Auto-generated constructor stub
}
public User(Long id, String name, String loginName, String pwd, Long rid) {
super();
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 + "]";
}
}
②数据库访问层(Dao方法)
UserDao.java
package com.xlb.dao;
import java.util.List;
import java.util.Map;
import com.xlb.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;
public class UserDao extends BaseDao<User> {
/**
* 登录方法
* @param user 用户对象
* @return 返回一个登录用户
* @throws Exception
*/
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);
//return super.executeQuery(sql, clz, pageBean);
}
/**
* 增加用户
* @param user 用户对象
* @return 影响行数
* @throws Exception
*/
public int add(User user) throws Exception {
String sql = "insert into t_oa_user(name,loginName,pwd) values(?,?,?)";
return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd"});
}
/**
* 修改用户
* @param user 用户信息
* @return 影响行数
* @throws Exception
*/
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"});
}
/**
* 删除用户
* @param user 用户对象
* @return 影响行数
* @throws Exception
*/
public int del(User user) throws Exception {
String sql = "delete from t_oa_user where id = ?";
return super.executeUpdate(sql, user, new String[] {"id"});
}
/**
* 跟据rid分权限(模糊查询)
* @param user
* @param pageBean
* @return
* @throws Exception
*/
public List<Map<String, Object>> listUserRole(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) as roleName \r\n" +
"from t_oa_user where 1=1 ";
String name = user.getName();
if (StringUtils.isNotBlank(name))
sql += " and name like '%" + name + "%'";
//当实体类的属性完全包含数据库查询出来的列段的时候使用
//super.executeQuery(sql, User.class, pageBean);
//返回 List<Map<String, Object>> ,对应的是连表查询,单个实体类对象不完全包含查询的列段
return super.executeQuery(sql, pageBean);
}
}
测试类UserDaoTest.java
package com.xlb.dao;
import static org.junit.Assert.*;
import java.util.List;
import java.util.Map;
import org.junit.After;
import org.junit.Before;
import org.junit.Test;
import com.xlb.entity.User;
import com.zking.util.PageBean;
public class UserDaoTest {
private UserDao ud=new UserDao();
@Before
public void setUp() throws Exception {
}
@After
public void tearDown() throws Exception {
}
@Test
public void testLogin() {
}
@Test
public void testAdd() {
User user = new User();
user.setName("zsaa");
user.setLoginName("yijiajun");
user.setPwd("123123");
try {
ud.add(user);
} catch (Exception e) {
e.printStackTrace();
}
}
@Test
public void testEdit() {
User user = new User();
user.setName("zsaa1111");
user.setLoginName("yijiajun111");
user.setPwd("123123");
user.setId(20L);
try {
ud.edit(user);
} catch (Exception e) {
e.printStackTrace();
}
}
@Test
public void testDel() {
User user = new User();
user.setId(20L);
try {
ud.del(user);
} catch (Exception e) {
e.printStackTrace();
}
}
@Test
public void testListUserRole() {
User user = new User();
PageBean pageBean = new PageBean();
try {
List<Map<String, Object>> listUserRole = ud.listUserRole(user, pageBean);
for (Map<String, Object> map : listUserRole) {
System.out.println(map);
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
结果
查询全部
增加
修改
删除
③业务逻辑层(Web层)
UserAction.java
package com.xlb.web;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.xlb.dao.UserDao;
import com.xlb.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.R;
import com.zking.util.ResponseUtil;
public class UserAction extends ActionSupport implements ModelDriver<User>{
private User user = new User();
private UserDao userDao = new UserDao();
//写一个方法处理前台的请求
public String login(HttpServletRequest req, HttpServletResponse resp) {
try {
User u = userDao.login(user);
if(u != null) {
//登录成功
//ResponseUtil.writeJson(resp, new R().data("code",200).data("msg","成功"));
ResponseUtil.writeJson(resp, R.ok(200, "登录成功"));
req.getSession().setAttribute("user", u);
}
else {
//登录失败
ResponseUtil.writeJson(resp, R.error(0, "用户名密码错误"));
}
} catch (Exception e) {
e.printStackTrace();
//登录失败
try {
ResponseUtil.writeJson(resp, R.error(0, "用户名密码错误"));
} catch (Exception e1) {
e1.printStackTrace();
}
}
return null;
}
@Override
public User getModel() {
return user;
}
//用户查询
public String listUserRole(HttpServletRequest req, HttpServletResponse resp) {
try {
PageBean pageBean = new PageBean();
//初始化pageBean
pageBean.setRequest(req);
//调用方法
List<Map<String, Object>> users = userDao.listUserRole(user, pageBean);
// layui 的code 返回一定要是 0,不能是200,否者返回不了数据
//传输到界面
//pageBean.getTotal()总记录数
ResponseUtil.writeJson(resp, R.ok(0, "用户数据查询成功",pageBean.getTotal(),users));
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, "用户数据查询失败"));
} catch (Exception e1) {
e1.printStackTrace();
}
}
return null;
}
//用户新增
public String add(HttpServletRequest req, HttpServletResponse resp) {
try {
//rs是影响行数
int rs = userDao.add(user);
if(rs > 0) {
ResponseUtil.writeJson(resp, R.ok(200, "用户数据新增成功"));
}
else {
ResponseUtil.writeJson(resp, R.error(0, "用户数据新增失败"));
}
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, "用户数据新增失败"));
} catch (Exception e1) {
e1.printStackTrace();
}
}
return null;
}
//用户删除
public String del(HttpServletRequest req, HttpServletResponse resp) {
try {
//rs是影响行数
int rs = userDao.del(user);
if(rs > 0) {
ResponseUtil.writeJson(resp, R.ok(200, "用户数据删除成功"));
}
else {
ResponseUtil.writeJson(resp, R.error(0, "用户数据删除失败"));
}
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, "用户数据删除失败"));
} catch (Exception e1) {
e1.printStackTrace();
}
}
return null;
}
//用户修改
public String edit(HttpServletRequest req, HttpServletResponse resp) {
try {
//rs是影响行数
int rs = userDao.add(user);
if(rs > 0) {
ResponseUtil.writeJson(resp, R.ok(200, "用户数据修改成功"));
}
else {
ResponseUtil.writeJson(resp, R.error(0, "用户数据修改失败"));
}
} catch (Exception e) {
e.printStackTrace();
try {
ResponseUtil.writeJson(resp, R.error(0, "用户数据修改失败"));
} catch (Exception e1) {
e1.printStackTrace();
}
}
return null;
}
}
二、前端搭建
①html界面代码
main.jsp
<%@ 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">
<!-- 引入 layui.js -->
<script src="static/js/main.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">会议OA项目</div>
<!-- 头部区域(可配合layui 已有的水平导航) -->
<ul class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
</ul>
<!-- 个人头像及账号操作 -->
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-md-inline-block">
<a href="javascript:;">
<img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
tester
</a>
<dl class="layui-nav-child">
<dd><a href="">Your Profile</a></dd>
<dd><a href="">Settings</a></dd>
<dd><a href="login.jsp">Sign out</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical"></i>
</a>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域(可配合layui已有的垂直导航) -->
<ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
</ul>
</div>
</div>
<div class="layui-body" >
<!-- 内容主体区域 -->
<div class="layui-tab" lay-filter="demo" lay-allowClose="true">
<ul class="layui-tab-title">
<li class="" lay-id="11">首页</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">0</div>
</div>
</div>
</div>
<div class="layui-footer">
<!-- 底部固定区域 -->
底部固定区域
</div>
</div>
</body>
</html>
界面效果
userEdit.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/common/header.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>
userManage.jsp
<%@ 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">
<!-- 引入 layui.js -->
<script src="static/js/system/userManage.js"></script>
<title>Insert title here</title>
</head>
</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>
界面效果
②封装对应的js
userEdit.js
let layer,form,$;
var row;
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');
}
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':'listUserRole',
'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表单数据
//jQuery.find
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();
}
});
}
main.js
//JS
let $,element;
layui.use(['jquery','element'],function(){
$ = layui.jquery,element = layui.element;
$.ajax({
url:'permission.action?methodName=menus'
,dataType:'json'
,success:function(data){
let htmlstr = '';
$.each(data,function(i,n){
htmlstr += ' <li class="layui-nav-item layui-nav-itemed">';
htmlstr += ' <a class="" href="javascript:;">'+data[i].text+'</a>';
//判断一级节点是否存在子节点
if(data[i].hasChildren){
htmlstr += '<dl class="layui-nav-child">';
let children = data[i].children;
$.each(children,function(index,node){
htmlstr += '<dd><a href="javascript:;" onClick="openTabs(\''+children[index].text+'\',\''+children[index].attributes.self.url+'\',\''+children[index].id+'\')">'+children[index].text+'</a></dd>';
});
htmlstr += '</dl>';
}
htmlstr += '</li>';
});
$("#menu").html(htmlstr);
}
})
})
/*
1、查找layui的选项卡页面布局代码-静态
2、动态的添加选项卡
3、把选项名换成菜单名
4、重复的tab选项卡不添加,改为选中
*/
function openTabs(title,url,id){
let $node = $("li[lay-id='"+id+"']");
if($node.length == 0){
//新增一个Tab项
element.tabAdd('demo',{
title: title,//用于演示
content: "<iframe frameborder='10' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>",
id:id //实际使用一般是规定好的id
})
}
element.tabChange('demo',id);
}
③公共jsp
header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/layui/css/layui.css">
<!-- 引入 layui.js -->
<script src="${pageContext.request.contextPath }/static/js/layui/layui.js"></script>
<!-- 指定整个项目的跟路径 -->
<base href="${pageContext.request.contextPath }/" />
<input id="ctx" value="${pageContext.request.contextPath}" type="hidden" />
<title>玉渊工作室</title>