权限管理是所有后台系统的都会涉及的一个重要组成部分，主要目的是对不同的人访问资源进行权限的控制，避免因权限控制缺失或操作不当引发的风险问题，如操作错误，隐私数据泄露等问题。本系统基于JSP+Servlet+JDBC+LayUI的技术，在系统的设计与开发过程中严格遵守软件工程的规范，运用软件设计模式，从而减少系统模块间的偶合，力求做到系统的稳定性、可重用性和可扩充性。
通用的权限管理系统需要考虑用户权限控制问题，可以采用RBAC（基于角色的访问控制）模型进行设计和实现。
基于角色的访问控制系统可以通过确定用户所扮演的角色和其权限来实现对不同操作和资源的限制和控制。包括用户管理、角色管理、权限管理等模块，实现对用户、角色、权限的统一管理和控制。
1. 用户登录；
2. 用户管理：选择角色添加用户，修改某个用户的信息，删除某个用户的信息，根据用户名或者角色查询符合条件的用户信息；
4. 角色管理：对角色基本信息的增删改查操作；
5. 菜单管理：在某个父级菜单下添加子菜单信息，删除选择的菜单及其子菜单信息，修改某个菜单的信息；
系统的功能模块图如下图所示：
表关系是指表之间的关系，包括主外键、外键、唯一键等。在设计表关系时，需要确定表之间的关系，并为每个表创建一个唯一的标识符。
用户——角色——菜单，思考三张表之间有怎样的关系。
用户面对角色：一个用户可以有多个角色，一个角色也可以有多个用户。但一般我们只分配一个角色，所以也可以在用户表中再加一个角色id。
角色面对菜单：一个角色可以有多个菜单，一个菜单也可以被多个角色拥有。所以也是多对多的关系。那么就要有角色菜单关联表（RoleMenus）：角色id、菜单id。
layui.config({
base: '../layui/'
}).use(['layer', 'util', 'treeTable', 'iconPicker','form'], function () {
var $ = layui.jquery;
var layer = layui.layer;
var util = layui.util;
var treeTable = layui.treeTable;
var iconPicker = layui.iconPicker;
var form = layui.form;
$('body').removeClass('layui-hide');
// 渲染表格
var menuTable = treeTable.render({
elem: '#demoTreeTb',
url: '../menu?type=getMenu',
toolbar: '#toolbar',
height: 'full-100',
tree: {
iconIndex: 2,
isPidData: true,
idName: 'mid',
pidName: 'pid'
},
defaultToolbar: ['filter', 'print', 'exports'],
cols: [
[
{type: 'numbers'},
{type: 'checkbox'},
{field: 'menuName', title: '菜单名称', minWidth: 125},
{
title: '菜单图标', align: 'center',
templet: '<p><i class="layui-icon {{d.menuIcon?d.menuIcon:""}}"></i></p>'
},
{field: 'menuUrl', title: '菜单路径'},
{title: '菜单类型',templet:'#menuType'},
{field:'menuState',title: '菜单状态'},
{align: 'center', toolbar: '#tbBar', title: '操作', width: 120}
]
],
style: 'margin-top:10px;'
});
// 工具列点击事件
treeTable.on('tool(demoTreeTb)', function (obj) {
var event = obj.event;
var data = obj.data;
if (event === 'del') {
$.ajax({
url:'../menu?type=deleteMenu',
type:'post',
data:{mid:data.mid},
dataType:'json',
success:function(data){
layer.msg(data.msg, {
time: 2000 //2秒关闭（如果不配置，默认是3秒）
});
},
error:function(err){
console.log(err)
}
});
//重载树形表格
menuTable.reload();
} else if (event === 'edit') {
//获取上以及菜单
getPid();
//清空数据
$("#menu-name").val(data.menuName);
$("#pid").val(data.pid);
$("#mid").val(data.mid);
$("#menu-url").val(data.menuUrl);
$("#menu-type").val(data.menuType);
if(data.menuState=="启用"){
$("#menu-state").checked = true;
}else{
$("#menu-state").checked = false;
}
/**
* 选中图标 （常用于更新时默认选中图标）
* @param filter lay-filter
* @param iconName 图标名称，自动识别fontClass/unicode
*/
iconPicker.checkIcon('iconPicker', data.menuIcon);
//更新渲染
form.render(null,'edit-form');
//弹层组件
layer.open({
type: 1,
title: '修改菜单信息',
content: $("#edit"),
area: ['750px', '400px']
})
}
});
//图标插件
iconPicker.render({
// 选择器，推荐使用input
elem: '#menu-icon',
// 数据类型：fontClass/unicode，推荐使用fontClass
type: 'fontClass',
// 是否开启搜索：true/false
search: true,
// 是否开启分页
page: true,
// 每页显示数量，默认12
limit: 12,
// 点击回调
click: function(data) {
$("#menu-icon").val(data.icon);
}
});
// 头部工具栏点击事件
treeTable.on('toolbar(demoTreeTb)', function (obj) {
switch (obj.event) {
case 'add':
//获取上以及菜单
getPid();
//清空数据
$("#menu-name").val("");
$("#pid").val(0);
$("#mid").val("");
$("#menu-icon").val("");
$("#menu-url").val("");
$("#menu-type").val("");
//更新渲染
form.render(null,'edit-form');
//弹层组件
layer.open({
type: 1,
title: '新增菜单信息',
content: $("#edit"),
area: ['750px', '400px']
})
break;
case 'expandAll':
// 全部展开
menuTable.expandAll();
break;
case 'foldAll':
// 全部折叠
menuTable.foldAll();
break;
}
});
function getPid(){
//获取角色信息
$.ajax({
url:'../menu?type=getMenu',
async:false,
dataType:'json',
success:function(data){
$("#pid").html("");
$("#pid").append("<option value='0'>无</option>")
$(data.data).each(function(){
if(this.menuType==="导航"){
$("#pid").append("<option value="+this.mid+" >"+this.menuName+"</option>")
}
})
}
});
}
//保存事件触发
form.on('submit(save)',function(data){
layer.closeAll('page'); //关闭所有页面层
$.ajax({
url:'../menu?type=saveMenu',
type:'post',
data:data.field,
dataType:'json',
success:function(data){
layer.msg(data.msg, {
time: 2000 //2秒关闭（如果不配置，默认是3秒）
});
},
error:function(err){
console.log(err)
}
});
//重载树形表格
menuTable.reload();
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
});
