尚筹网项目 六后台 管理员分配角色
Posted 黑桃️
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了尚筹网项目 六后台 管理员分配角色相关的知识，希望对你有一定的参考价值。
分配
一、权限控制
二、给 Admin 分配 Role
(1) 思路
(2) 代码：前往分配页面
① 创建保存 Admin-Role 关联关系的数据库表
CREATE TABLE `project_crowd`.`inner_admin_role` ( `id` INT NOT NULL AUTO_INCREMENT, `admin_id` INT, `role_id` INT, PRIMARY KEY (`id`) );
② 修改“分配”按钮
这里使用的是操作下的+号按钮为分配按钮
<a href="assign/to/assign/role/page.html?adminId=$admin.id&pageNum=$requestScope.pageInfo.pageNum&keyword=$param.keyword" class="btn btn-success btn-xs">
<i class=" glyphicon glyphicon-check"></i>
</a>
③ 创建 AssignHandler
@RequestMapping("/assign/to/assign/role/page.html")
public String toAssignRolePage(
@RequestParam("adminId") int adminId,
ModelMap modelMap
)
// 查询已分配角色
List<Role> assignedRoleList = roleService.getAssignedRole(adminId);
// 查询未分配角色
List<Role> unAssignedRoleList = roleService.getUnAssignedRole(adminId);
// 存入模型
modelMap.addAttribute("assignedRoleList",assignedRoleList);
modelMap.addAttribute("unAssignedRoleList",unAssignedRoleList);
return "assign-role";
④ RoleService
// 获取分配的角色信息
List<Role> getAssignedRole(int adminId);
// 获取没有分配的角色信息
List<Role> getUnAssignedRole(int adminId);
⑤ RoleServiceImpl
// 获取分配的角色信息
@Override
public List<Role> getAssignedRole(int adminId)
return roleMapper.selectAssignedRole(adminId);
// 获取没有分配的角色信息
@Override
public List<Role> getUnAssignedRole(int adminId)
return roleMapper.selectUnAssignedRole(adminId);
⑥ RoleMapper
List<Role> selectAssignedRole(int adminId);
List<Role> selectUnAssignedRole(int adminId);
⑦ RoleMapper.xml
<select id="selectAssignedRole" resultMap="BaseResultMap">
select id,name from t_role where id in (select role_id from inner_admin_role where admin_id=#adminId)
</select>
<select id="selectUnAssignedRole" resultMap="BaseResultMap">
select id,name from t_role where id not in (select role_id from inner_admin_role where admin_id=#adminId)
</select>
⑧ 在页面上显示角色数据
<c:forEach items="$requestScope.unAssignedRoleList " var="role">
<option value="$role.id ">$role.name </option>
</c:forEach>
<c:forEach items="$requestScope.assignedRoleList " var="role">
<option value="$role.id ">$role.name </option>
</c:forEach>
⑨ 调整表单让表单能够提交数据
action="assign/do/role/assign.html"
⑩ 左右移动option
// 点击 向右箭头 的按钮,将左边选中的option都移入右边
$("#toRightBtn").click(function ()
$("select:eq(0)>option:selected").appendTo("select:eq(1)");
);
// 点击 向左箭头 的按钮,将右边选中的option都移入边边
$("#toLeftBtn").click(function ()
$("select:eq(1)>option:selected").appendTo("select:eq(0)");
);
(3) 代码：执行分配
① AssignHandler
// 点击 保存 后提交表单内容
@RequestMapping("/assign/do/role/assign.html")
public String saveAdminRoleRelationship(
@RequestParam("adminId") int adminId,
@RequestParam("pageNum") int pageNum,
@RequestParam("keyword") String keyword,
// 我们允许用户在页面上取消所有已分配角色再提交表单，所以可以不提供roleIdList 请求参数
// 设置 required=false 表示这个请求参数不是必须的
@RequestParam(value="roleIdList",required = false) List<Integer> roleIdList
)
// 执行 角色分配
adminService.saveAdminRoleRelationship(adminId,roleIdList);
return "redirect:/admin/get/page.html?pageNum="+pageNum+"&keyword="+keyword;
② AdminService
void saveAdminRoleRelationship(int adminId , List<Integer> roleIdList);
③ AdminServiceImpl
// 保存角色分配信息
@Override
public void saveAdminRoleRelationship(int adminId, List<Integer> roleIdList)
// 为了简化操作：先根据 adminId 删除旧的数据，再根据 roleIdList 保存全部新的数据
// 删除旧的数据
adminMapper.deleteOLdRelationship(adminId);
if (roleIdList != null && roleIdList.size() > 0 )
adminMapper.insertNewRelationship(adminId,roleIdList);
④ AdminMapper
void deleteOLdRelationship(int adminId);
void insertNewRelationship(@Param("adminId") int adminId,@Param("roleIdList") List<Integer> roleIdList);
⑤ AdminMapper.xml
<delete id="deleteOLdRelationship">
delete from inner_admin_role where admin_Id=#adminId
</delete>
<insert id="insertNewRelationship" >
insert into inner_admin_role(admin_id,role_id) values
<foreach collection="roleIdList" item="roleId" separator=",">(#adminId,#roleId)</foreach>
</insert>
(4) 修正bug：点击保存后,使右边框中option全选中
// 保存 按钮的单击事件
$("#saveBtn").click(function ()
// 将右边框中的所有option选中,以来添加关系到数据库中
$("select:eq(1)>option").prop("selected","selected");
// 关闭页面跳转,测试全部选中是否生效
// return false;
);
三、给 Role 分配 Auth
(1) 思路
(2) t_auth 建表
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`)
);
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) 代码：打开模态框
① 准备模态框
在 role-page 中 引入
<%@include file="/WEB-INF/modal-role-assign-auth.jsp" %>
② 给“√”按钮绑定单击响应函数
在 fillTableBody() 函数中，修改 checkBtn
var checkBtn = "<button id='"+roleId+"' type='button' class='btn btn-success btn-xs checkBtn'><i
class=' glyphicon glyphicon-check'></i></button>";
★ 遇到的问题
要先把 roleId 放入全局变量中，如果忘记放了，但是后面使用了，就会产生400 bad request，逐步排查才发现 是我的 roleId 为 undefined
// 点击 √ 按钮打开模态框
$("#rolePageBody").on("click",".checkBtn",function ()
// 一开始没加这个,一直报400
// 把roleId存入全局变量中
window.roleId = this.id;
// 显示模态框
$("#assignModal").modal("show");
// // 在模态框中装载树 Auth 的形结构数据
fillAuthTree();
);
③ 加入 zTree 的环境
在 role-page 中加入
(注意：引入的时候 zTree 的 javascript 库文件要放在 my-role.js 的前面)
<link rel="stylesheet" href="ztree/zTreeStyle.css"/>
<script type="text/javascript" src="ztree/jquery.ztree.all-3.5.min.js"></script>
④ 函数 fillAuthTree()
// 声明专门的函数用来在分配 Auth 的模态框中显示 Auth 的树形结构数据
function fillAuthTree()
// 1.发送 Ajax 请求查询 Auth 数据
var ajaxReturn = $.ajax(
"url":"assign/get/all/auth.json",
"type":"post",
"dataType":"json",
"async":false
);
if(ajaxReturn.status != 200)
layer.msg(" 请求处理出错！响应状态码是： " + ajaxReturn.status + " 说 明 是 ：" + ajaxReturn.statusText);
return;
// 2.从响应结果中获取 Auth 的 JSON 数据
// 从服务器端查询到的 list 不需要组装成树形结构，这里我们交给 zTree 去组装
var authList = ajaxReturn.responseJSON.queryData;
console.info("authList = " + authList );
// 3.准备对 zTree 进行设置的 JSON 对象
var setting =
"data":
"simpleData":
// 开启简单 JSON 功能
"enable": true, // 使用 categoryId 属性关联父节点，不用默认的 pId 了
"pIdKey": "categoryId"
,
"key":
// 使用 title 属性显示节点名称，不用默认的 name 作为属性名了
"name": "title"
,
"check":
"enable": true
;
// 4.生成树形结构
// <ul id="authTreeDemo" class="ztree"></ul>
$.fn.zTree.init($("#authTreeDemo"), setting, authList);
// 获取 zTreeObj 对象
var zTreeObj = $.fn.zTree.getZTreeObj("authTreeDemo");
// 调用 zTreeObj 对象的方法，把节点展开
zTreeObj.expandAll(true);
console.log("roleid:" + window.roleId);
// 5.查询已分配的 Auth 的 id 组成的数组
ajaxReturn = $.ajax(
"url":"assign/get/assigned/auth/id/by/role/id.json",
"type":"post",
"data":
"roleId":window.roleId
,
"dataType":"json",
"async":false
);
if(ajaxReturn.status != 200)
layer.msg("请求处理出错！响应状态码是： "+ajaxReturn.status+" 说 明 是 ："+ajaxReturn.statusText);
return ;
// 从响应结果中获取 authIdArray
var authIdArray = ajaxReturn.responseJSON.queryData;
// 6.根据 authIdArray 把树形结构中对应的节点勾选上
// ①遍历 authIdArray
for(var i = 0; i < authIdArray.length; i++)
var authId = authIdArray[i];
// ②根据 id 查询树形结构中对应的节点
var treeNode = zTreeObj.getNodeByParam("id", authId);
// ③将 treeNode 设置为被勾选
// checked 设置为 true 表示节点勾选
var checked = true;
// checkTypeFlag 设置为 false，表示不“联动”，不联动是为了避免把不该勾选的勾选上
var checkTypeFlag = false;
// 执行
zTreeObj.checkNode(treeNode, checked, checkTypeFlag);
⑤ 创建角色到权限之间关联关系的中间表
CREATE TABLE `project_crowd`.`inner_role_auth` ( `id` INT NOT NULL AUTO_INCREMENT, `role_id` INT, `auth_id` INT, PRIMARY KEY (`id`) );
⑥ 根据 role_id 查询 auth_id
AssignHandler
@ResponseBody
@RequestMapping("/assign/get/assigned/auth/id/by/role/id.json")
public ResultEntity<List<Integer>> getAssignedAuthIdByRoleId(@RequestParam("roleId") Integer roleId)
List<Integer> authIdList = authService.getAssignedAuthIdByRoleId(roleId);
return ResultEntity.successWithData(authIdList);
AuthService
List<Integer> getAssignedAuthIdByRoleId(Integer roleId);
AuthServiceImpl
@Override
public List<Integer> getAssignedAuthIdByRoleId(Integer roleId)
return authMapper.selectAssignedAuthIdByRoleId(roleId);
AuthMapper
List<Integer> selectAssignedAuthIdByRoleId(Integer roleId);
AuthMapper.xml
<select id="selectAssignedAuthIdByRoleId" resultType="int">
select auth_id from inner_role_auth where role_id=#roleId
</select>
(4) 代码：执行分配
① 给“分配”按钮绑定单击响应函数
role-page
// 14.给分配权限模态框中的“分配”按钮绑定单击响应函数
$("#assignBtn").click(function()
// ①收集树形结构的各个以上是关于尚筹网项目 六后台 管理员分配角色的主要内容，如果未能解决你的问题，请参考以下文章