该项目展示了如何利用layUI框架构建一个权限管理系统，包括用户、角色和菜单的多对多关系管理。通过登录界面、用户管理、角色管理和数据管理等功能，实现了后台DAO、Util和Web层的交互。系统包含formSelects-v3.js插件以增强界面交互。
maven与layUI的权限设计
项目介绍
这次项目主要做的就是学会使用layUI做一个权限，可以适应于多个权限的使用，这里主要是3个角色，用户，角色，和菜单，实现多对多的关系，有两个中间的媒介，直接将表展示出来吧！
/*
MySQL Data Transfer
Source Host: localhost
Source Database: t_hgy
Target Host: localhost
Target Database: t_hgy
Date: 2019/7/10 ������ 23:27:12
*/
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for part
-- ----------------------------
DROP TABLE IF EXISTS `part`;
CREATE TABLE `part` (
`part_id` int(20) NOT NULL AUTO_INCREMENT COMMENT '标识列，自增',
`part_name` varchar(150) NOT NULL COMMENT '角色名',
`description` varchar(255) DEFAULT NULL COMMENT '说明',
`statu` int(255) DEFAULT '1' COMMENT '角色状态（1可以2不可用）',
PRIMARY KEY (`part_id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=20 DEFAULT CHARSET=utf8mb4 ROW_FORMAT=COMPACT;
-- ----------------------------
-- Table structure for part_and_permission
-- ----------------------------
DROP TABLE IF EXISTS `part_and_permission`;
CREATE TABLE `part_and_permission` (
`part_id` bigint(20) NOT NULL COMMENT '角色id',
`permission_id` bigint(20) NOT NULL COMMENT '菜单id'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 ROW_FORMAT=COMPACT;
-- ----------------------------
-- Table structure for permission
-- ----------------------------
DROP TABLE IF EXISTS `permission`;
CREATE TABLE `permission` (
`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '菜单id',
`name` varchar(255) DEFAULT NULL COMMENT '菜单名',
`url` varchar(255) DEFAULT NULL COMMENT '跳转路径',
`pId` bigint(20) DEFAULT NULL COMMENT '父节点id',
`type` int(255) DEFAULT NULL COMMENT '菜单类型 1菜单 2按钮',
PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8mb4 ROW_FORMAT=COMPACT;
-- ----------------------------
-- Table structure for t_clazz
-- ----------------------------
DROP TABLE IF EXISTS `t_clazz`;
CREATE TABLE `t_clazz` (
`cid` int(11) NOT NULL AUTO_INCREMENT,
`cname` varchar(255) DEFAULT NULL,
`cteachar` varchar(255) DEFAULT NULL,
`pic` varchar(255) DEFAULT NULL,
PRIMARY KEY (`cid`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8;
-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
`user_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '标识列，自增',
`user_name` varchar(255) NOT NULL COMMENT '名称',
`pwd` varchar(255) NOT NULL COMMENT '密码',
`statu` bigint(255) NOT NULL DEFAULT '1' COMMENT '默认为1即可用，0为不可用',
PRIMARY KEY (`user_id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=40 DEFAULT CHARSET=utf8mb4 ROW_FORMAT=COMPACT;
-- ----------------------------
-- Table structure for user_and_part
-- ----------------------------
DROP TABLE IF EXISTS `user_and_part`;
CREATE TABLE `user_and_part` (
`user_id` bigint(20) NOT NULL COMMENT '管理人员id',
`part_id` bigint(20) NOT NULL COMMENT '角色id'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 ROW_FORMAT=COMPACT;
-- ----------------------------
-- Records
-- ----------------------------
INSERT INTO `part` VALUES ('15', '普通用户', '只能进行普通数据的管理，不能进行用户和角色的管理', '1');
INSERT INTO `part` VALUES ('17', '超级管理员', '角色，用户，普通数据的管理', '1');
INSERT INTO `part` VALUES ('19', '胡桂云123', '爱的色放三', '0');
INSERT INTO `part_and_permission` VALUES ('17', '1');
INSERT INTO `part_and_permission` VALUES ('17', '2');
INSERT INTO `part_and_permission` VALUES ('17', '3');
INSERT INTO `part_and_permission` VALUES ('17', '4');
INSERT INTO `part_and_permission` VALUES ('17', '5');
INSERT INTO `part_and_permission` VALUES ('19', '4');
INSERT INTO `part_and_permission` VALUES ('19', '5');
INSERT INTO `part_and_permission` VALUES ('15', '4');
INSERT INTO `part_and_permission` VALUES ('15', '5');
INSERT INTO `permission` VALUES ('1', '权限管理', null, '0', '1');
INSERT INTO `permission` VALUES ('2', '用户管理', '/userManagement.jsp', '1', '1');
INSERT INTO `permission` VALUES ('3', '角色管理', '/partManagement.jsp', '1', '1');
INSERT INTO `permission` VALUES ('4', '普通数据', null, '0', '1');
INSERT INTO `permission` VALUES ('5', '普通数据管理', '/Clazz.jsp', '4', '1');
INSERT INTO `t_clazz` VALUES ('1', 'T224', '李晓', '东方故事');
INSERT INTO `t_clazz` VALUES ('2', 'T225', '小四', '阿斯蒂芬');
INSERT INTO `t_clazz` VALUES ('3', 'T226', '李晓', '散打');
INSERT INTO `user` VALUES ('38', 'admin', '123', '1');
INSERT INTO `user` VALUES ('39', '胡桂云', '123', '1');
INSERT INTO `user_and_part` VALUES ('38', '17');
INSERT INTO `user_and_part` VALUES ('39', '15');
目录结构
这里需要说一下那个formSelects-v3.js是layUI的一个插件，用户界面角色下拉框
文件配置
pom.xml
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.hu</groupId>
<artifactId>T224</artifactId>
<packaging>war</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>T224 Maven Webapp</name>
<url>http://maven.apache.org</url>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>
<!--servlet依赖 -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<!-- mySql 依赖 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.44</version>
</dependency>
<!-- 引用struts2框架核心依赖 -->
<dependency>
<groupId>org.apache.struts</groupId>
<artifactId>struts2-core</artifactId>
<version>2.5.16</version>
</dependency>
<!-- hutoll工具包 -->
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>4.5.16</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.47</version>
</dependency>
</dependencies>
<build>
<finalName>T224</finalName>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.7.0</version>
<configuration>
<source>1.8</source>
<target>1.8</target>
<encoding>UTF-8</encoding>
</configuration>
</plugin>
</plugins>
</build>
</project>
wab.xml
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<display-name>Archetype Created Web Application</display-name>
<filter>
<filter-name>EncodingFiter</filter-name>
<filter-class>com.crud.util.EncodingFiter</filter-class>
</filter>
<filter-mapping>
<filter-name>EncodingFiter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>*.action</url-pattern>
</filter-mapping>
</web-app>
前台代码
登录的login.jsp 与login.js
login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/layui/css/layui.css" media="all">
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/css/login.css">
<script src="${pageContext.request.contextPath }/static/js/layui/layui.all.js"></script>
<style>
video {
object-fit: fill;
width: 1420px;
height: 700px;
}
</style>
</head>
<body>
<input type="hidden" id="path" value="${pageContext.request.contextPath}">
<video class="video-player" preload="auto" autoplay="autoplay" loop="loop" data-height="1080"
width="1920">
<!---->
<source src="${pageContext.request.contextPath }/static/admin/mv.mp4" type="video/mp4">
</video>
<div class="video_mask"></div>
<div class="login">
<h1>管理员登录</h1>
<form class="layui-form">
<div class="layui-form-item">
<input class="layui-input" id="user_name" name="user_name" placeholder="用户名" value=""
lay-verify="required" lay-verType="tips" type="text" autocomplete="off">
</div>
<div class="layui-form-item">
<input class="layui-input" id="pwd" name="pwd" placeholder="密码" value=""
lay-verify="required" lay-verType="tips" type="password" autocomplete="off">
</div>
<button class="layui-btn login_btn" lay-submit="" lay-filter="login">登录</button>
</form>
</div>
<script src="${pageContext.request.contextPath }/static/js/login.js"></script>
</body>
</html>
login.js
layui.config({
base: "static/js/"
}).use(['form', 'layer'], function () {
var form = layui.form,
layer = parent.layer === undefined ? layui.layer : parent.layer,
$ = layui.jquery;
//获取绝对路径
var path = $("#path").val();
//登录按钮事件
form.on("submit(login)", function (data) {
// $.ajaxSettings.async = false;
$.post(path + "/sy/userAction_login.action", {
user_name: $('#user_name').val(),
pwd: $('#pwd').val()
}, function (data) {
console.log(data);
if (data > 0) {
//登录成功
layer.msg("登录成功", {
icon:1,time: 1000}, function () {
parent.location.href = path + '/index.jsp';
})
} else {
layer.msg("登录失败,帐号或密码错误或帐号不可用", {
icon:2,time: 1000}, function () {
})
}
})
return false;
})
});
function refreshCode() {
var captcha = document.getElementById("captcha");
captcha.src = "/captcha.jpg?t=" + new Date().getTime();
}
用户管理和js
usermanagement.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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">
<link rel="stylesheet"
href="${pageContext.request.contextPath}/static/js/layui/css/layui.css"
media="all">
<script type="text/javascript"
src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextPath}/static/js/layui/layui.js"></script>
</head>
<body>
<input type="hidden" id="path"
value="${pageContext.request.contextPath}" />
<!--搜索维度-->
<div class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" id='user_name' name="user_name"
lay-verify="required" placeholder="请输入用户名" autocomplete="true"
class="layui-input">
</div>
<label class="layui-form-label">角色</label>
<div class="layui-input-inline">
<select xm-select="user_part_id" xm-select-type="2"
id="user_part_id" xm-select-skin="primary">
</select>
</div>
<button class="layui-btn" data-type="reload">查询</button>
<button class="layui-btn layui-btn-danger" data-type="add">新建</button>
</div>
</div>
<!--显示数据的表格-->
<div class="demoTable">
<div class=layui-form>
<table class="layui-table" id="LAY_table_user" lay-filter="user"
lay-data="{id: 'idTest'}">
</table>
</div>
</div>
<!--弹出层-->
<div class="site-text" style="margin: 5%; display: none" id="box1"
target="test123">
<form method="post" class="layui-form layui-form-pane"
onsubmit="return false" id="users">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" class="layui-input text_add" id="user_names"
name=user_names>
</div>
<br> <label class="layui-form-label"> 用户密码</label>
<div class="layui-input-block">
<input type="password" class="layui-input" id="pwd" name=pwd><br>
</div>
</div>
<label class="layui-form-label">选择角色</label>
<div class="layui-input-block">
<select xm-select="user_part_ids" xm-select-type="2"
id="user_part_ids" xm-select-skin="primary">
</select>
</div>
</form>
</div>
<!--按钮菜单-->
<script type="text/html" id="barDemo">
{
{
# if(d.statu==0){
}}
<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="begin">启用</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>
{
{
# }else{
}}
<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="end">禁用</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>
<script src="${pageContext.request.contextPath}/static/js/userManagement.js"></script>
</body>
</HTML>
usermanagement.js
var path = document.getElementById("path").value;
layui.config({
base : path + '/static/js/' // 此处写的相对路径, 实际以项目中的路径为准
}).extend({
formSelects : 'formSelects-v3'
});
// 用户管理
layui
.use(
[ 'table', 'form', 'jquery', 'formSelects' ],
// , 'from'
function() {
var table = layui.table, form = layui.form, formSelects = layui.formSelects;
// 第一个实例
table.render({
elem : '#LAY_table_user',
// height: 300,
url : path + '/sy/userAction_query.action'// 数据接口
,
// defaultToolbar : [ 'filter', 'print', 'exports' ],
page : true // 开启分页
,
limit : 10,
limits : [ 5, 10, 15 ],
cellMinWidth : 80,
cols : [ [ {
field : 'user_id',
title : '编号',
sort : true,
// width: 80,
}, {
field : 'user_name',
title : '用户名',
// width: 80,
}, {
field : 'part_names',
title : '角色',
// width: 180,
}, {
fixed : 'right',
title : '操作',
align : 'center',
toolbar : '#barDemo'
} ] ],
id : 'testReload',
});
table.on('checkbox(user)', function(obj) {
console.log(obj)
});
// 上方菜单
var $ = layui.$, active = {
// 查询
reload : function() {
// 执行重载
table.reload('testReload', {
page : {
curr : 1
// 重新从第 1 页开始
},
where : {
user_name : $('#user_name').val(),
part_ids : formSelects.value(
'user_part_id', 'valStr')
}
});
},
add : function() {
// 添加
$('#user_names').prop('disabled', false)// 设置可用
$('#user_names').removeClass('layui-disabled')
layer.open({
type : 1,
title : '添加用户',
maxmin : true,
shadeClose : true, // 点击遮罩关闭层
area : [ '80%', '80%' ],
content : $('#box1'),
btn : [ '确定', '取消' ],
success : function(layero, index) {
// 弹出后执行的函数
formSelects.value('user_part_ids', []);
},
yes : function(index, layero) {
// 确定执行函数
// 执行添加方法
$.post(path
+ '/sy/userAction_add.action', {
user_name : $('#user_names').val(),// 用户名
pwd : $('#pwd').val(),// 密码
part_ids : formSelects.value(
"user_part_ids", 'valStr')
}, function(data) {
if (data > 0) {
layer.alert('添加成功', {
icon : 1,
title : '提示'
}, function(i) {
layer.close(i);
layer.close(index);// 关闭弹出层
$("#users")[0].reset()// 重置form
})
table.reload('testReload', {
// 重载表格
page : {
curr : 1
// 重新从第 1 页开始
}
})
} else 
最低0.47元/天 解锁文章
扫一扫
487
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
