尚筹网项目04-用户权限分配

最新推荐文章于 2023-03-25 10:13:09 发布

落宇*

最新推荐文章于 2023-03-25 10:13:09 发布

阅读量243

点赞数

分类专栏：尚筹网项目文章标签： java 数据库 sql

本文链接：https://blog.csdn.net/weixin_44997847/article/details/126492253

版权

尚筹网项目专栏收录该内容

6 篇文章 1 订阅

订阅专栏

一.给用户分配角色

1.思路

在这里插入图片描述

2.步骤

在这里插入图片描述

3.表的创建

inner_admin_role

CREATE TABLE `crowd_project`.`inner_admin_role`
( `id` INT NOT NULL AUTO_INCREMENT COMMENT '主键id', 
`admin_id` INT COMMENT '用户id',
 `role_id` INT COMMENT '角色id', 
PRIMARY KEY (`id`) ) CHARSET=utf8;

4.后台获取用户对应角色的方法

AdminHandler

@RequestMapping("/to/admin/assign.html")
public String assign(@RequestParam("id")Integer adminId,
                     ModelMap modelMap){

    List<Role> assignRole =  adminService.getAssignRole(adminId);
    List<Role> unAssignRole =  adminService.getUnAssignRole(adminId);

    for (Role role:assignRole) {
        logger.error(role.toString());
    }
	// 将查出的值保存到request域中
    modelMap.addAttribute(CrowdConstant.ATTR_ASSIGN_ROLE,assignRole);
    modelMap.addAttribute(CrowdConstant.ATTR_UN_ASSIGN_ROLE,unAssignRole);

	// 跳转到权限分配的页面
    return "/admin/assign-role";
}

AdminService

@Override
public List<Role> getAssignRole(Integer adminId) {

    List<Role> assignRole =  adminMapper.selectAssignRole(adminId);

    return assignRole;
}

@Override
public List<Role> getUnAssignRole(Integer adminId) {
    List<Role> unAssignRole =  adminMapper.selectUnAssignRole(adminId);
    return unAssignRole;
}

AdminMapper.xml

<!--  List<Role> selectAssignRole(Integer adminId);-->
  <select id="selectAssignRole" resultType="com.hy.crowd.entity.Role">
    select id,name
    from t_role
    where id in
    (
        select role_id
        from inner_admin_role
        where admin_id = #{adminId}
    )
    order by id asc
  </select>

  <!--  List<Role> selectUnAssignRole(Integer adminId);-->
  <select id="selectUnAssignRole" resultType="com.hy.crowd.entity.Role">
    select id,name
    from t_role
    where id not in
    (
        select role_id
        from inner_admin_role
        where admin_id = #{adminId}
    )
    order by id asc
  </select>

5.创建assign-role.jsp页面并设置跳转路径

设置在admin-page中的跳转路径

<a class="btn btn-success btn-xs" href="to/admin/assign.html?id=${admin.id}&pageNum=${pageInfo.pageNum}&keyword=${param.keyword}">
	 <i class=" glyphicon glyphicon-check"></i>
 </a>

assign-role.jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <%@include file="/WEB-INF/include/include-head.jsp" %>
</head>

<body>

<%@include file="/WEB-INF/include/include-nav.jsp" %>
<div class="container-fluid">
    <div class="row">
        <%@include file="/WEB-INF/include/include-sidebar.jsp" %>

        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <ol class="breadcrumb">
                <li><a href="#">首页</a></li>
                <li><a href="#">数据列表</a></li>
                <li class="active">分配角色</li>
            </ol>
            <div class="panel panel-default">
                <div class="panel-body">
                    <form action="do/admin/assign.html" method="post" role="form" class="form-inline">
                        <input type="hidden" name="id" value="${param.id}">
                        <input type="hidden" name="pageNum" value="${param.pageNum}">
                        <input type="hidden" name="keyword" value="${param.keyword}">
                        <div class="form-group">
                            <label for="exampleInputPassword1">未分配角色列表</label><br>
                            <select  class="form-control" multiple="" size="10" style="width:100px;overflow-y:auto;">
                                <c:if test="${empty unAssignRole}">

                                   </c:if>
                                <c:if test="${not empty unAssignRole}">
                                    <c:forEach items="${unAssignRole}" var="role">
                                        <option value="${role.id}">${role.name}</option>
                                    </c:forEach>
                                </c:if>
                            </select>
                        </div>
                        <div class="form-group">
                            <ul>
                                <li class="btn btn-default glyphicon glyphicon-chevron-right"></li>
                                <br>
                                <li class="btn btn-default glyphicon glyphicon-chevron-left"
                                    style="margin-top:20px;"></li>
                            </ul>
                        </div>
                        <div class="form-group" style="margin-left:40px;">
                            <label for="exampleInputPassword1">已分配角色列表</label><br>
                            <select name="roleList" class="form-control" multiple="" size="10" style="width:100px;overflow-y:auto;">
                                <c:if test="${empty assignRole}">

                                </c:if>
                                <c:if test="${not empty assignRole}">
                                    <c:forEach items="${assignRole}" var="role">
                                        <option value="${role.id}">${role.name}</option>
                                    </c:forEach>
                                </c:if>
                            </select>
                        </div>
                        <button style="width: 10%" class="btn btn-lg btn-success btn-block" id="subBtn" type="submit">提交</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

6.页面中js函数

<script type="text/javascript">
    $(function () {
    	// 实现让左边下拉框中的值跳转到右边
        $("form li:eq(0)").click(function () {
           $("select:eq(0) option:selected").appendTo($("form select:eq(1)"))
        });
		// 实现让右边下拉框中的值跳转到左边
        $("form li:eq(1)").click(function () {
           $("select:eq(1) option:selected").appendTo($("form select:eq(0)"))
        });
		// 注：提交时记得把已分配下拉框中的所有值设置为选中，不然就会出现添加的bug
        $("#subBtn").click(function () {
            $("select:eq(1) option").prop("selected",true);
        })
    })

</script>

7.完成权限分配的后台方法

AdminHandler

    @RequestMapping("/do/admin/assign.html")
    public String assignRole(
            @RequestParam("id")Integer id,
            @RequestParam("pageNum")Integer pageNum,
            @RequestParam("keyword")String keyword,
            @RequestParam(value = "roleList",required = false)List<Integer> roleList
    ){
        adminService.adminAssignRole(id,roleList);

        return "redirect:/do/admin/page.html?pageNum="+pageNum+"&keyword="+keyword;
    }

AdminService

 @Override
 public void adminAssignRole(Integer id, List<Integer> roleList) {
     // 1.将该用户以前的值清空
     adminMapper.deleteRoleAssign(id);

     // 2.将现在的权限添加进中间表中
     adminMapper.insertAdminAssignRole(id,roleList);
 }

AdminMapper

将值清空的方法

<!--  void deleteRoleAssign(Integer id);-->
  <delete id="deleteRoleAssign">
    delete from inner_admin_role
    where admin_id = #{id}
  </delete>

添加值的方法
AdminMapper.java

void insertAdminAssignRole(@Param("id") Integer id,@Param("roleList") List<Integer> roleList);

AdminMapper.xml

<!--  void insertAdminAssignRole(@Param("id") Integer id,@Param("roleList") List<Integer> roleList);-->
  <insert id="insertAdminAssignRole">
    insert into inner_admin_role(admin_id,role_id) values
    <foreach collection="roleList" separator="," item="roleId">
      (#{id},#{roleId})
    </foreach>
  </insert>

二.给角色分配权限

1.思路

在这里插入图片描述

2.步骤

在这里插入图片描述

3.前端展示模态框

①创建t_auth表

t_auth


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);

②创建模态框

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<div id="roleAssignModel" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">权限赋予</h4>
            </div>
            <div class="modal-body">
                <ul class="ztree" id="ztreeDemo"></ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="subAssignAuth" class="btn btn-primary">权限分配</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->

③打开模态框

修改按钮
id=“+role.id+”
class=‘quaBtn’

var quaBtn = "<button type='button' id="+role.id+" class='btn btn-success btn-xs quaBtn'><i class='glyphicon glyphicon-check'></i></button>";

给按钮绑定单击响应函数

// 5.完成权限修改功能
// 5.1打开权限修改的模态框
$(document).on("click",".quaBtn",function () {
	// 将当前id设置为全局属性，在权限分配时会用到
    window.roleId = this.id;

    generatorTree();

    $("#roleAssignModel").modal("show");

});

发送Ajax请求，获取zTree并进行显示的函数

// 在模态框中显示树形菜单
function generatorTree() {
	// 发送Ajax请求获取全部的auth数据
    var ajaxReturn = $.ajax({
        url:"get/all/auth.json",
        method: "post",
        dataType: "json",
        async:false
    })

    console.log(ajaxReturn);

    if (ajaxReturn.status != 200){
        layer.msg("访问失败!!错误码是"+ajaxReturn.status+",原因是:"+ajaxReturn.statusText);
        return;
    }

    var result = ajaxReturn.responseJSON.result;

    if (result == "FAILED"){
        layer.msg("出现错误！！错误信息是:"+ajaxReturn.responseJSON.message);
    }

    var authList = ajaxReturn.responseJSON.data;
	// 对ZTree的一些设置
    var setting = {
        data:{
            // 开启简单JSON功能
            simpleData: {
              enable:true,
                // 使用 categoryId 属性关联父节点，不用默认的 pId 了
                pIdKey: "categoryId"

            },
            key:{
                // 使用 title 属性显示节点名称，不用默认的 name 作为属性名了
                name:"title",

            },
        },
        check:{
            // 开启多选框的选项
            enable: true
        }
    };

    // 生成树形结构
    $.fn.zTree.init($("#ztreeDemo"),setting,authList);

    var zTreeObj = $.fn.zTree.getZTreeObj("ztreeDemo");

    // 打开所有的节点
    zTreeObj.expandAll(true);
}

④获取全部Auth的后台代码

AuthHandler

 @ResponseBody
 @RequestMapping("/get/all/auth.json")
 public ResultEntity<List<Auth>> getAllAuth(){
     List<Auth> authList = authService.getAllAuth();

     return ResultEntity.successWithOutData(authList);
 }

AuthService

  @Override
  public List<Auth> getAllAuth() {
      return authMapper.selectByExample(null);
  }

4.对角色的权限进行回显

①发送Ajax请求获取角色对应的权限id集合

 // 发送Ajax请求获取当前角色拥有的权限id
 ajaxReturn = $.ajax({
     url:"get/role/assign/auth.json",
     method:"post",
     data:{
         "id":window.roleId
     },
     dataType:"json",
     async:false
 })

 if (ajaxReturn.status != 200){
     layer.msg("执行出错!!!错误码是:"+ajaxReturn.status+",错误原因是:"+ajaxReturn.statusText);
 }

 var roleAssignAuth = ajaxReturn.responseJSON;

 if (roleAssignAuth.result == "FAILED"){
     layer.msg("执行失败!!!原因是:"+roleAssignAuth.message);
 }

②使用ZTree进行回显

var assignAuth = roleAssignAuth.data;
// 循环遍历通过roleId找到的数组
for (var i = 0; i < assignAuth.length; i++) {
    var authId = assignAuth[i];

    var currentNode = zTreeObj.getNodeByParam("id",authId);

    // 将checked属性设置为true
    var checked = true;

    // checkTypeFlag 设置为 false，表示不“联动”，不联动是为了避免把不该勾选的勾选上
    // 就是不会勾选到父级
    var checkTypeFlg = false;

    // 设置自动勾选
    zTreeObj.checkNode(currentNode,checked,checkTypeFlg);
}

③获取角色权限集合的后台方法

AuthHandler

 @ResponseBody
 @RequestMapping("/get/role/assign/auth.json")
 public ResultEntity<List<Integer>> getRoleAuth(
         @RequestParam("id")Integer id
 ){
     List<Integer> authIdList = authService.getRoleAuthId(id);

     return ResultEntity.successWithOutData(authIdList);
 }

AuthService

 @Override
 public List<Integer> getRoleAuthId(Integer id) {
     List<Integer> authIdList =  authMapper.selectRoleAssignAuth(id);
     return authIdList;
 }

AuthMapper.xml

<!--  List<Integer> selectRoleAssignAuth(Integer id);-->
<select id="selectRoleAssignAuth" resultType="int">
  select auth_id
  from inner_role_auth
  where role_id = #{id}
</select>

5.完成的generatorTree()

// 在模态框中显示树形菜单
function generatorTree() {
    var ajaxReturn = $.ajax({
        url:"get/all/auth.json",
        method: "post",
        dataType: "json",
        async:false
    })

    console.log(ajaxReturn);

    if (ajaxReturn.status != 200){
        layer.msg("访问失败!!错误码是"+ajaxReturn.status+",原因是:"+ajaxReturn.statusText);
        return;
    }

    var result = ajaxReturn.responseJSON.result;

    if (result == "FAILED"){
        layer.msg("出现错误！！错误信息是:"+ajaxReturn.responseJSON.message);
    }

    var authList = ajaxReturn.responseJSON.data;

    var setting = {
        data:{
            // 开启简单JSON功能
            simpleData: {
              enable:true,
                // 使用 categoryId 属性关联父节点，不用默认的 pId 了
                pIdKey: "categoryId"

            },
            key:{
                // 使用 title 属性显示节点名称，不用默认的 name 作为属性名了
                name:"title",

            },
        },
        check:{
            // 开启多选框的选项
            enable: true
        }
    };

    // 生成树形结构
    $.fn.zTree.init($("#ztreeDemo"),setting,authList);

    var zTreeObj = $.fn.zTree.getZTreeObj("ztreeDemo");

    // 打开所有的节点
    zTreeObj.expandAll(true);

    // 发送Ajax请求获取当前角色拥有的权限id
    ajaxReturn = $.ajax({
        url:"get/role/assign/auth.json",
        method:"post",
        data:{
            "id":window.roleId
        },
        dataType:"json",
        async:false
    })

    if (ajaxReturn.status != 200){
        layer.msg("执行出错!!!错误码是:"+ajaxReturn.status+",错误原因是:"+ajaxReturn.statusText);
    }

    var roleAssignAuth = ajaxReturn.responseJSON;

    if (roleAssignAuth.result == "FAILED"){
        layer.msg("执行失败!!!原因是:"+roleAssignAuth.message);
    }

    var assignAuth = roleAssignAuth.data;
    // 循环遍历通过roleId找到的数组
    for (var i = 0; i < assignAuth.length; i++) {
        var authId = assignAuth[i];

        var currentNode = zTreeObj.getNodeByParam("id",authId);

        // 将checked属性设置为true
        var checked = true;

        // checkTypeFlag 设置为 false，表示不“联动”，不联动是为了避免把不该勾选的勾选上
        // 就是不会勾选到父级
        var checkTypeFlg = false;

        // 设置自动勾选
        zTreeObj.checkNode(currentNode,checked,checkTypeFlg);
    }
}

6.完成权限分配

①给模态框中的提交按钮绑定单击响应函数

// 5.2给权限修改模态框中的按钮添加单击响应函数
$("#subAssignAuth").click(function () {
    // ①创建一个全局数组保存auth的Id
    window.authIdAttr = [];

    // ②获取到Ztree的对象
    var zTreeObj = $.fn.zTree.getZTreeObj("ztreeDemo");

    // ③获取全部被勾选的节点
    var checkedNodes = zTreeObj.getCheckedNodes();

    // ④循环遍历获得id并放入到全局数组中
    for (var i = 0; i < checkedNodes.length; i++) {
        var currentNode = checkedNodes[i];

        var authId = currentNode.id;

        authIdAttr.push(authId);
    }

    // 使用JSON的方式发送数组
    // 由于要发送两个参数,封装成JSON数组发送
    var retBody = {
        "id":[window.roleId],
        "authIdAttr":window.authIdAttr
    }

    var retBodyJSON = JSON.stringify(retBody);

    // 发送Ajax请求进行保存到数据库中
    $.ajax({
        url:"do/role/assign/auth.json",
        method:"posr",
        data:retBodyJSON,
        dataType:"json",
        contentType: "application/json;charset=utf-8",
        async: false,
        success:function (response) {
            var result = response.result;

            if (result == "FAILED"){
                layer.msg("执行失败！！！失败原因是:"+response.message);
            }

            if (result == "SUCCESS"){
                layer.msg("执行成功");
            }
        },
        error:function (response) {
            layer.msg(response.status+" "+response.statusText);
        }
    });

    $("#roleAssignModel").modal("hide");
});

②完成权限分配的后台方法

AuthHandler

 @ResponseBody
 @RequestMapping("/do/role/assign/auth.json")
 public ResultEntity doRoleAssinAuth(@RequestBody Map<String,List<Integer>> map){
     List<Integer> list = map.get("id");
     Integer roleId = list.get(0);
     List<Integer> authIdAttr = map.get("authIdAttr");

     authService.doRoleAssignAuth(roleId,authIdAttr);

     return ResultEntity.successWithOutNoData();
 }

AuthService

 @Override
 public void doRoleAssignAuth(Integer roleId, List<Integer> authIdAttr) {
     // 先清空之前的数据
     authMapper.deleteRoleAuth(roleId);

     // 再添加
     authMapper.insertRoleAssignAuth(roleId,authIdAttr);
 }

AuthMapper

清空数据的方法

<!--  void deleteRoleAuth(Integer roleId);-->
  <delete id="deleteRoleAuth">
    delete from inner_role_auth
    where role_id = #{roleId}
  </delete>

添加的方法
AuthMaper.java

void insertRoleAssignAuth(@Param("roleId") Integer roleId, @Param("authIdAttr") List<Integer> authIdAttr);

AuthMapper

<!--  void insertRoleAssignAuth(@Param("roleId") Integer roleId, @Param("authIdAttr") List<Integer> authIdAttr);-->
  <insert id="insertRoleAssignAuth">
    insert into inner_role_auth(role_id,auth_id)values
    <foreach collection="authIdAttr" item="authId" separator=",">
      (#{roleId},#{authId})
    </foreach>
  </insert>