尚硅谷尚筹网单一架构知识十六权限构建和树形菜单二·

1 权限验证

2 给Admin分配Role

2.1 创建中间表
CREATE TABLE inner_admin_role (
id INT (11) NOT NULL auto_increment,
admin_id INT (11),
role_id INT (11),
PRIMARY KEY (id)
);

3 创建权限模型

3.1 建表
CREATE TABLE t_auth (
id int(11) NOT NULL AUTO_INCREMENT,
name varchar(200) DEFAULT NULL,
title varchar(200) DEFAULT NULL,
category_id int(11) DEFAULT NULL,
PRIMARY KEY (id)
);
3.2 字段说明
id：主键
name：实际权限信息。
user:add
user:delete
role:delete
role:get
……
※这里使用的“:”没有任何语法层面的要求，仅仅是表示“模块:操作”含义。
title：页面显示信息
category_id：权限分类id。这个字段关联本表中的其他记录的id字段，已便于使用树形结构显示权限数据。
页面上对应的显示效果如下所示：

INSERT INTO t_auth(id,name,title,category_id) VALUES(1,’’,‘用户模块’,NULL);
INSERT INTO t_auth(id,name,title,category_id) VALUES(2,‘user:delete’,‘删除’,1);
INSERT INTO t_auth(id,name,title,category_id) VALUES(3,‘user:get’,‘查询’,1);
INSERT INTO t_auth(id,name,title,category_id) VALUES(4,’’,‘角色模块’,NULL);
INSERT INTO t_auth(id,name,title,category_id) VALUES(5,‘role:delete’,‘删除’,4);
INSERT INTO t_auth(id,name,title,category_id) VALUES(6,‘role:get’,‘查询’,4);
INSERT INTO t_auth(id,name,title,category_id) VALUES(7,‘role:add’,‘新增’,4);
3.3 inner_role_auth中间表
CREATE TABLE inner_role_auth (
role_id int(11) DEFAULT NULL,
auth_id int(11) DEFAULT NULL,
PRIMARY KEY (role_id,auth_id)
);
4.2 准备模态框页面
/atcrowdfunding-admin-1-webui/src/main/webapp/WEB-INF/include-modal-assign-auth.jsp
<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>

×

尚筹网系统弹窗

分配

**4.4 在模态框中显示树形结构** **4.4.1 导入zTree环境** [ztree](https://download.csdn.net/download/qq_17023977/12265496) zTree一定要在jQuery后面引入。如果A.js中用到了B.js里面的代码，那么B必须在A前面引入，否则A无法使用B中的代码。 **4.4.2 zTree设置**  启用简单JSON功能 setting.data.simpleData.enable设置为true  设置显示节点名称的实体类属性名 setting.data.key.name设置为title  设置当前节点父节点的属性名 setting.data.simpleData.pIdKey设置为categoryId  展开整个树形结构 $.fn.zTree.getZTreeObj("treeDemo").expandAll(true);  设置树形节点前显示checkbox setting.check.enable设置为true

最终完整设置如下：

$("#roleTableBody").on("click",".checkBtn",function(){
	
	// 打开模态框
	$("#roleAssignAuthModal").modal("show");
	
	// 初始化模态框中显示的树形结构
	// 1.创建setting对象
	var setting = {
		"data": {
			"simpleData": {
				"enable": true,
				"pIdKey": "categoryId"
			}, 
			"key": {
				"name": "title"
			}
		},
		"check": {
			"enable": true
		}
	};	
	// 2.获取JSON数据
	var ajaxResult = $.ajax({
		"url": "assign/get/all/auth.json",
		"type": "post",
		"dataType": "json",
		"async": false
	});
	
	if(ajaxResult.responseJSON.result == "FAILED") {
		layer.msg(ajaxResult.responseJSON.message);
		
		return ;
	}
	
	var zNodes = ajaxResult.responseJSON.data;
	
	// 3.初始化树形结构
	$.fn.zTree.init($("#treeDemo"), setting, zNodes);
	
});

4.5.2 根据以前分配的信息勾选树形节点

// 6.使用authIdList勾选对应的树形节点
// ①遍历authIdList
for (var i = 0; i < authIdList.length; i++) {
	// ②在遍历过程中获取每一个authId
	var authId = authIdList[i];
	
	// ③根据authId查询到一个具体的树形节点
	// key：查询节点的属性名
	// value：查询节点的属性值，这里使用authId
	var key = "id";
	
	var treeNode = $.fn.zTree.getZTreeObj("treeDemo").getNodeByParam(key, authId);
	
	// ④勾选找到的节点
	// treeNode：当前要勾选的节点
	// true：表示设置为勾选状态
	// false：表示不联动
	$.fn.zTree.getZTreeObj("treeDemo").checkNode(treeNode, true, false);
	
}

4.6 执行分配
4.6.1 前端代码

// 给在模态框中的分配按钮绑定单击响应函数
$("#roleAssignAuthBtn").click(function(){
	
	var authIdArray = new Array();
	
	// 调用zTreeObj的方法获取当前已经被勾选的节点
	var checkedNodes = $.fn.zTree.getZTreeObj("treeDemo").getCheckedNodes();
	
	// 遍历checkedNodes
	for(var i = 0; i < checkedNodes.length; i++) {
		
		// 获取具体的一个节点
		var node = checkedNodes[i];
		
		// 获取当前节点的id属性
		var authId = node.id;
		
		// 将authId存入数组
		authIdArray.push(authId);
	}
	
	// 在handler方法中使用@RequestBody接收
	// 方便使用的数据类型是：@RequestBody Map<String, List<Integer>>
	// {"roleIdList":[2],"authIdList":[2,3,5,7]}
	// 封装要发送给handler的JSON数据
	var requestBody = {"roleIdList":[window.roleId], "authIdList": authIdArray};
	
	// 发送请求
	var ajaxResult = $.ajax({
		"url": "assign/do/assign.json",
		"type": "post",
		"data": JSON.stringify(requestBody),
		"contentType": "application/json;charset=UTF-8",
		"dataType": "json",
		"async": false
	});
	
	if(ajaxResult.responseJSON.result == "SUCCESS") {
		
		layer.msg("操作成功！");
		
	}
	
	if(ajaxResult.responseJSON.result == "FAILED") {
		
		layer.msg(ajaxResult.responseJSON.message);
		
	}
	
	$("#roleAssignAuthModal").modal("hide");
	
});