layuiAdmin后台框架以及动态权限
前言：layuiAdmin是使用layui开发的后台管理框架模板，拿来就用方便了很多后端和前端开发者。关于加载菜单权限问题，小刘使用并且记录了下来；
分析：1.头部导航和左边菜单联动为一个菜单权限。
2.了解layui权限是怎么加载本地静态json的。
3.设计相应权限的数据库表数据
4.后端程序相应的返回相同的json格式的数据
layuiAdmin首页加载权限
// layuimini.init('api/init.json');原项目请求的是这些静态资源
layuimini.init('/permission/initMenu');
下面是静态json格式的权限内容；
创建关于权限的5张表：用户表，角色表，权限表，用户角色表，角色权限表
用户表：
Create Table
CREATE TABLE `user` (
`id` int NOT NULL AUTO_INCREMENT,
`username` varchar(64) DEFAULT NULL,
`password` varchar(64) DEFAULT NULL,
`id_card_no` varchar(100) DEFAULT NULL,
`birthday` date DEFAULT NULL,
`phone` varchar(64) DEFAULT NULL,
`email` varchar(64) DEFAULT NULL,
`sex` char(12) DEFAULT NULL,
`age` int DEFAULT NULL,
`create_time` datetime DEFAULT NULL,
`update_time` datetime DEFAULT NULL,
`province_code` varchar(32) DEFAULT NULL,
`city_code` varchar(32) DEFAULT NULL,
`district_code` varchar(32) DEFAULT NULL,
`address` varchar(32) DEFAULT NULL,
`detail_address` varchar(300) DEFAULT NULL,
`desp` varchar(300) DEFAULT NULL,
`type` int DEFAULT NULL,
`status` int DEFAULT NULL,
`or_del` int DEFAULT NULL,
`or_forbidden` int DEFAULT '0',
`header_image` varchar(300) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8
角色表：
Create Table
CREATE TABLE `role` (
`id` int NOT NULL AUTO_INCREMENT,
`role_name` varchar(64) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8
权限表：
Create Table
CREATE TABLE `permission` (
`id` int NOT NULL AUTO_INCREMENT,
`title` varchar(64) DEFAULT NULL,
`icon` varchar(100) DEFAULT NULL,
`href` varchar(100) DEFAULT NULL,
`father_id` int DEFAULT NULL,
`level` int DEFAULT NULL,
`has_son` int DEFAULT NULL,
`target` varchar(64) DEFAULT '_self',
`sort` int DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=48 DEFAULT CHARSET=utf8
用户角色表
Create Table
CREATE TABLE `user_role` (
`id` int NOT NULL AUTO_INCREMENT,
`user_id` int DEFAULT NULL,
`role_id` int DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8
角色权限表
Create Table
CREATE TABLE `role_permission` (
`id` int NOT NULL AUTO_INCREMENT,
`role_id` int DEFAULT NULL,
`permission_id` int DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=110 DEFAULT CHARSET=utf8
所以要从后台定义请求这些数据
特别注意：一定要按照要求格式，采用递归，由上到下获取数据
/**
* 初始化菜单
* @return
*/
@RequestMapping(value = "/initMenu")
@ResponseBody
public Map initMenu(){
Mapmap=new HashMap<>();
MapclearInfo=new HashMap<>();
clearInfo.put("clearUrl","api/clear.json");
map.put("clearInfo",clearInfo);
MaphomeInfo=new HashMap<>();
homeInfo.put("title","首页");
homeInfo.put("icon","fa fa-home");
homeInfo.put("href","page/welcome-1.html?mpi=m-p-i-0");
map.put("homeInfo",homeInfo);
MaplogoInfo=new HashMap<>();
logoInfo.put("title","layuiAdmin");
logoInfo.put("image","images/logo.png");
logoInfo.put("href","");
map.put("logoInfo",logoInfo);
MapmenuInfo=new LinkedHashMap<>();//保证菜单的顺序
List permission = getPermission(1, 0);
permission.forEach(t->{
menuInfo.put(t.getTitle(),t);
});
map.put("menuInfo",menuInfo);
return map;
}
/**
* 按照需求获取角色的权限
* @return
*/
@RequestMapping(value = "/getPermissionBySelect")
@ResponseBody
public ListgetPermissionBySelect(){
List permission = getPermission(1, 0);
return permission;
}
/**
* 递归获取权限
* @param roleId
* @param permissionId
* @return
*/
public List getPermission(Integer roleId, Integer permissionId){
List list=new ArrayList<>();
ListrolePermission = permissionDao.getListRolePermission(roleId,permissionId);
rolePermission.forEach(t->{
if (t.getPermission().getHasSon()!=0){//严格按照layuiadmin菜单格式
List permission = getPermission(roleId, t.getPermissionId());
t.getPermission().setChild(permission);
}
list.add(t.getPermission());
});
return list;
}
而权限列表页面逻辑分为三个部分
权限列表，可以更新删除权限，删除的同时必须删除角色权限表中的数据，同样采用递归由上到下全部删除
角色列表，实现用户即角色，删除时，所有角色权限相应内容删除。
树形权限菜单，给某个级别的权限添加子集。赋予某个角色相应的权限。
其他的操作再用户管理，操作用户角色关系，可做到用户即角色。
关于权限页面的代码：
//模拟数据有children的才叫节点
data = null;
/**
* 通过角色Id直接获取权限数据
* @param roleId
*/
function getPermissionByRoleId(roleId) {
var sendDate = (new Date()).getTime();
$.ajax({
url: "/permission/getTreePermissionList",
type: "get",
data: {
roleId: roleId
},
async: false,
beforeSend: function () {
var icon_load = ``;
$("#test12").html(icon_load);
//在请求后台数据之前显示loading图标
},
success: function (msg) {
var receiveDate = (new Date()).getTime();
var responseTimeMs = receiveDate - sendDate;
setTimeout(function () {
$("#icon_loading").remove();
data = msg;
console.log(data);
initTreePermission();
}, responseTimeMs);
},
dataType: "json"
});
}
/**
* 初始化权限
*/
function initTreePermission() {
//基本演示
tree.render({
elem: '#test12',
data: data,
showCheckbox: true //是否显示复选框
,
id: 'demoId1',
isJump: true //是否允许点击节点时弹出新窗口跳转
, oncheck: function (obj) {///复选框点击触发的事件，，直接和角色绑定添加即可
console.log(obj.data); //得到当前点击的节点数据
console.log(obj.checked); //得到当前节点的展开状态：open、close、normal
console.log(obj.elem); //得到当前节点元素
},
click: function (obj) {
console.log(obj);
var data = obj.data; //获取当前点击的节点数据
console.log(data);
layer.open({
type: 1,
// closeBtn:0,
title: ['添加子集权限', 'font-size:20px;font-weight:bolder;text-align:center;'],
content: $('#updatePermissionForm'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
skin: 'layui-layer-lan',
area: ['500px', '480px'],
offset: '40px',
// 弹出后，渲染表格
success: function (layero, index) {
$("#updatePermissionForm form")[0].reset();//清空之前弹出的内容
form.val("updatePermissionForm", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
"fatherId": data.id
, "level": data.level + 1
, "hasSon": 0
});
},
cancel: function (index, layero) {
}
});
// layer.msg('状态：' + obj.state + '
节点数据：' + JSON.stringify(data));
}
});
}
//按钮事件test12
util.event('lay-demo', {
getChecked: function (othis) {
var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
console.log("---获取选中的数据--");
console.log(checkedData);
var roleId = $("#editRoleNameByLeft").attr("role_id");
$.ajax({
url: "/permission/savePermissionWithRoleId",
type: "post",
async: false,
data: {
roleId: roleId,
permissionList: JSON.stringify(checkedData)
},
success: function (msg) {
layer.msg("权限保存成功!");
},
dataType: "json"
});
},
setChecked: function () {
tree.setChecked('demoId1', [12, 18]); //勾选指定节点
},
reload: function () {
//重载实例
tree.reload('demoId1', {});
},
addFirstMenu: function () {
//添加一级菜单
// $("#updatePermissionForm form input[name='hasSon']").parent().parent().remove();
// $("#updatePermissionForm form input[name='href']").parent().parent().remove();
layer.open({
type: 1,
// closeBtn:0,
title: ['添加子集权限', 'font-size:20px;font-weight:bolder;text-align:center;'],
content: $('#updatePermissionForm'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
skin: 'layui-layer-lan',
area: ['500px', '480px'],
offset: '40px',
// 弹出后，渲染表格
success: function (layero, index) {
$("#updatePermissionForm form")[0].reset();//清空之前弹出的内容
form.val("updatePermissionForm", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
"fatherId": 0
, "level": 1,
"hasSon": 0
});
},
cancel: function (index, layero) {
}
});
}
});
至此，完成了layuiAdmin的权限菜单的管理设置。
有啥不懂得小伙伴们加群交流啦：852665736；本群致力于一同进步的小伙伴们，大家一起交流探讨，在陌生的城市感受温暖；
无偿免费分享源码以及技术和面试文档，更多优秀精致的源码技术栈分享请关注微信公众号：gh_817962068649 关键字：SSM动态通用权限管理系统