• 【学生管理系统】权限管理之角色管理—查询所有角色并给角色授予权限(菜单)

    目录

    一、查询所有角色

    二、给角色授予权限(菜单)

    2.1 后端：查询所有的权限（含孩子）

    2.2 后端：查询指定角色的所有的权限

    2.3 前端：展示所有的权限

    2.4 前端：回显指定角色的权限

    2. 5 前端：提交授权表单

    2. 6 后端：角色权限进行修改授权【先删除之前权限，在添加所有已选权限】

    💟 创作不易，不妨点赞💚评论❤️收藏💙一下

    一、查询所有角色

    1.1后端【方法已有】

    1. @RestController
    2. @RequestMapping("/role")
    3. public class SysRoleController {
    4.     @Resource
    5.     private SysRoleService sysRoleService;
    6.  
    7.     @GetMapping
    8.     public BaseResult findAll() {
    9.         List list = sysRoleService.list();
    10.         return BaseResult.ok("查询成功", list);
    11.     }
    12.  
    13. }

    1.2前端

    效果展示：要求角色和权限菜单左右分屏

    1. <template>
    2.   <div>
    3.     <el-row>
    4.       <el-col :span="16">
    5.         <el-card class="role-list-card">
    6.           <div slot="header" class="clearfix">
    7.             <span>角色列表span>
    8.           div>
    9.           
    10.           <el-table
    11.             :data="roleList"
    12.             stripe
    13.             style="width: 100%">
    14.             <el-table-column
    15.               prop="id"
    16.               label="角色ID"
    17.               fixed
    18.               width="80">
    19.             el-table-column>
    20.             <el-table-column
    21.               prop="roleName"
    22.               label="角色名称"
    23.               fixed
    24.               width="180">
    25.             el-table-column>
    26.             <el-table-column
    27.               prop="roleDesc"
    28.               label="角色描述"
    29.               width="200">
    30.             el-table-column>
    31.             <el-table-column
    32.               label="操作" 
    33.               fixed="right">
    34.               <template slot-scope="scope">
    35.                 <el-button size="mini">编辑el-button>
    36.                 <el-button size="mini" type="danger">删除el-button>
    37.               template>
    38.             el-table-column>
    39.           el-table>
    40.           
    41.         el-card>
    42.       el-col>
    43.       <el-col :span="8" style="padding-left: 10px;">
    44.         <el-card class="perm-list-card">
    45.           <div slot="header" class="clearfix">
    46.             <span>权限展示span>
    47.             <el-button type="primary" style="float: right; padding: 3px 0">授权el-button>
    48.           div>
    49.           
    50.           
    51.         el-card>
    52.         
    53.       el-col>
    54.     el-row>
    55.   div>
    56. template>
    57.  
    58. <script>
    59. export default {
    60.   data() {
    61.     return {
    62.       roleList: []
    63.     }
    64.   },
    65.   methods: {
    66.     async findAllRole() {
    67.       // ajax
    68.       let { data: baseResult } = await this.$axios.get('/user-service/role')
    69.       // 处理
    70.       if(baseResult.code == 20000) {
    71.         this.roleList = baseResult.data
    72.       } else {
    73.         this.$message.error(baseResult.message)
    74.       }
    75.     }
    76.   },
    77.   mounted() {
    78.     // 查询所有的角色
    79.     this.findAllRole()
    80.   },
    81. }
    82. script>
    83.  
    84. <style>
    85.   .role-list-card {
    86.     height: 100%;
    87.   }
    88.   .perm-list-card {
    89.     height: 100%;
    90.   }
    91. style>

    二、给角色授予权限(菜单)

    2.1 后端：查询所有的权限（含孩子）

    • 方式1：在controller中排序查询所有，然后使用Map进行缓存处理，将所有权限拼凑成父子关系。

    • 方式2：使用mapper注解版

      1. 编写PermMapper：查询指定父id的所有权限，需配置关联项（当前权限的所有的孩子）

      2. 编写service：查询所有

      3. 编写controller：查询所有

    1. 编写PermMapper：查询指定父id的所有权限，需配置关联项（当前权限的所有的孩子）

     

    1. @Mapper
    2. public interface SysPermissionMapper extends BaseMapper {
    3.     /**
    4.      * 通过父id查询所有的权限
    5.      * @author 桐叔
    6.      * @email liangtong@itcast.cn
    7.      * @return
    8.      */
    9.     @Select("SELECT * FROM sys_permission WHERE parent_id = #{parentId}")
    10.     @Results({
    11.             @Result(property = "id", column = "id"),
    12.             @Result(property = "permName", column = "permName"),
    13.             @Result(property = "parentId", column = "parent_id"),
    14.             @Result(property = "path", column = "path"),
    15.             @Result(property = "children", many = @Many(select = "com.czxy.classes.mapper.SysPermissionMapper.findAllByParentId"), column = "id")
    16.     })
    17.     public List findAllByParentId(@Param("parentId") Integer parentId) ;
    18. ​
    19. ​
    20. }
    21. ​
     

    2.编写service：查询所有
     

    接口
     

    1. @Service
    2. @Transactional
    3. public interface SysPermissionService extends IService {
    4.     public List findAllByParentId(Integer parentId) ;
    5. }
    6. ​
     

    实现类
     

    1. @Service
    2. @Transactional
    3. public class SysPermissionServiceImpl extends ServiceImpl implements SysPermissionService {
    4. ​
    5.     @Override
    6.     public List findAllByParentId(Integer parentId) {
    7.         return baseMapper.findAllByParentId(parentId);
    8.     }
    9. }
     

    3.编写controller：查询所有 

     

    1. @RestController
    2. @RequestMapping("/perm")
    3. public class SysPermissionController {
    4.     @Resource
    5.     private SysPermissionService sysPermissionService;
    6. ​
    7. ​
    8.     /**
    9.      * 查询所有，含孩子
    10.      * @author 桐叔
    11.      * @email liangtong@itcast.cn
    12.      * @return
    13.      */
    14.     @GetMapping("/parent/{parentId}")
    15.     public BaseResult findAllByParentId(@PathVariable("parentId") Integer parentId) {
    16.         // 查询
    17.         List list = sysPermissionService.findAllByParentId(parentId);
    18.         return BaseResult.ok("查询成功", list);
    19.     }
    20. ​
    21. }
     

    2.2 后端：查询指定角色的所有的权限
     

    •  
      提交数据：roleId = 1
       
    •  
      获得数据：[ {roleId: 1, permId: 1}, {roleId: 1, permId: 2}, ...] --> [1,2,3,4]
       
     

     

     

    1.  
    2. @RestController
    3. @RequestMapping("/rolePerm")
    4. public class SysRolePermissionController {
    5.     @Resource
    6.     private SysRolePermissionService sysRolePermissionService;
    7. ​
    8.     @GetMapping("/role/{roleId}")
    9.     public BaseResult findAllByRoleId(@PathVariable("roleId") Integer roleId) {
    10.         //1 条件 roleId = 1
    11.         QueryWrapper queryWrapper = new QueryWrapper<>();
    12.         queryWrapper.eq("role_id", roleId);
    13. ​
    14.         //2 查询所有- 角色权限对象
    15.         List list = sysRolePermissionService.list(queryWrapper);
    16. ​
    17.         //3 处理数据，只需要权限id
    18.         List roleIdList = list.stream().map(sysRolePermission -> sysRolePermission.getPermId()).collect(Collectors.toList());
    19. ​
    20.         //4 返回
    21.         return BaseResult.ok("查询成功", roleIdList);
    22.     }
    23. ​
    24. ​
    25. }
    26. ​
     

    2.3 前端：展示所有的权限
     

    •  
      编写变量、发送ajax查询、页面加载成功时调用
       
    •  
      使用tree进行展示
       
     

     

     

    1. <template>
    2.   <div>
    3.     <el-row>
    4.       <el-col :span="16">
    5.         <el-card class="role-list-card">
    6.           <div slot="header" class="clearfix">
    7.             <span>角色列表span>
    8.           div>
    9.           
    10.           
    11.         el-card>
    12.       el-col>
    13.       <el-col :span="8" style="padding-left: 10px;">
    14.         <el-card class="perm-list-card">
    15.           <div slot="header" class="clearfix">
    16.             <span>权限展示span>
    17.             <el-button type="primary" style="float: right; padding: 3px 0">授权el-button>
    18.           div>
    19.           
    20.           <el-tree
    21.             :data="permList"
    22.             show-checkbox
    23.             default-expand-all
    24.             node-key="id"
    25.             ref="permTree"
    26.             highlight-current
    27.             :props="defaultProps">
    28.           el-tree>
    29.           
    30.         el-card>
    31.         
    32.       el-col>
    33.     el-row>
    34.   div>
    35. template>
    36. ​
    37. <script>
    38. export default {
    39.   data() {
    40.     return {
    41.       roleList: [],               //角色列表
    42.       permList: [],               //权限列表
    43.       defaultProps: {             //tree提供的数据 与 所需数据 对应关系
    44.         children: 'children',
    45.         label: 'permName'
    46.       }
    47.     }
    48.   },
    49.   methods: {
    50.     //获取所有角色
    51.     async findAllRole() {
    52.       // ajax 
    53.       let { data: baseResult } = await this.$axios.get('/user-service/role')
    54.       // 处理
    55.       if(baseResult.code == 20000) {
    56.         this.roleList = baseResult.data
    57.       } else {
    58.         this.$message.error(baseResult.message)
    59.       }
    60.     },
    61.     //获取所有的一级权限及孩子
    62.     async findAllPerm(parentId) {
    63.       // ajax
    64.       let { data: baseResult } = await this.$axios.get(`/user-service/perm/parent/${parentId}`)
    65.       // 处理
    66.       if(baseResult.code == 20000) {
    67.         this.permList = baseResult.data
    68.       } else {
    69.         this.$message.error(baseResult.message)
    70.       }
    71.     }
    72.   },
    73.   mounted() {
    74.     // 查询所有的角色
    75.     this.findAllRole()
    76.     // 查询所有的一级权限
    77.     this.findAllPerm(0)
    78.   },
    79. }
    80. script>
    81. ​
    82. <style>
    83.   .role-list-card {
    84.     height: 100%;
    85.   }
    86.   .perm-list-card {
    87.     height: 100%;
    88.   }
    89. style>
     

    2.4 前端：回显指定角色的权限
     

    页面效果演示：
     

     

     
 
    •  
      表格行的点击，并获得当前行的数据
       
    •  
      查询当前角色对应的所有选项，并回显到tree中。点击角色行，获取对应的权限并勾选。
       
     

     

    表格及树形控件中的方法绑定及属性设置，请按照图片在对应位置进行设置
     

     

     

    1. //查询对应角色的权限
    2. async findAllPermByRoleId(row, column, event) {
    3.       // ajax 查询   /user-service/rolePerm/role/1
    4.       let { data: baseResult } = await this.$axios.get(`/user-service/rolePerm/role/${row.id}`)
    5.       // 处理
    6.       if(baseResult.code == 20000) {
    7.         // 查询成功，将查询的结果填充到右侧tree中
    8.         this.$refs.permTree.setCheckedKeys(baseResult.data);
    9.       } else {
    10.         this.$message.error(baseResult.message)
    11.       }
    12.     }
     

     

    2. 5 前端：提交授权表单
     

     

     

     

     

    1. //查询对应角色的权限
    2. //对点击过角色所在行的操作，对角色id进行记录
    3. async findAllPermByRoleId(row, column, event) {
    4.       // ajax 查询   /user-service/rolePerm/role/1
    5.       let { data: baseResult } = await this.$axios.get(`/user-service/rolePerm/role/${row.id}`)
    6.       // 处理
    7.       if(baseResult.code == 20000) {
    8.         // 查询成功，将查询的结果填充到右侧tree中
    9.         this.$refs.permTree.setCheckedKeys(baseResult.data);
    10.         // 记录已有数据
    11.         this.role.id = row.id
    12.         this.role.permIds = baseResult.data
    13.         console.info(this.role)
    14.       } else {
    15.         this.$message.error(baseResult.message)
    16.       }
    17.     },
    18. //判断是否点击过角色行，并进行提示
    19. //对角色的权限进行修改
    20.     async addPermWithRoleId() {
    21.       // 判断是否选择角色
    22.       if(! this.role.id) {
    23.         this.$message.warning('请先选择角色')
    24.         return;
    25.       }
    26.       // 更新所选权限
    27.       this.role.permIds = this.$refs.permTree.getCheckedKeys()
    28.       // ajax 提交
    29.       let { data: baseResult } = await this.$axios.post('/user-service/rolePerm/addPerm', this.role)
    30.       // 提示
    31.       if(baseResult.code == 20000) {
    32.         this.$message.success(baseResult.message)
    33.       } else {
    34.         this.$message.error(baseResult.message)
    35.       }
    36.     }
     

     

    2. 6 后端：角色权限进行修改授权【先删除之前权限，在添加所有已选权限】
     

    •  
      编写controller
       
     

     

    1.  @PostMapping("/addPerm")
    2.     public BaseResult addPermWithRoleId(@RequestBody SysRole sysRole) {
    3.         try {
    4.             // 添加权限
    5.             sysRolePermissionService.addPermWithRoleId(sysRole);
    6. ​
    7.             // 提示
    8.             return BaseResult.ok("授权成功");
    9.         } catch (Exception e) {
    10.             return BaseResult.error("授权失败");
    11.         }
    12. ​
    13.     }
     

    •  
      编写service
       
     

     

     

     接口
     

     

    1. @Service
    2. @Transactional
    3. public interface SysRolePermissionService extends IService {
    4.     void addPermWithRoleId(SysRole sysRole);
    5. }
     

    实现类
     

    1. @Service
    2. @Transactional
    3. public class SysRolePermissionServiceImpl extends ServiceImpl implements SysRolePermissionService {
    4. ​
    5.     @Override
    6.     public void addPermWithRoleId(SysRole sysRole) {
    7.         // 1 删除
    8.         QueryWrapper queryWrapper = new QueryWrapper<>();
    9.         queryWrapper.eq("role_id", sysRole.getId());
    10.         baseMapper.delete(queryWrapper);
    11. ​
    12.         // 2 添加
    13.         for (Integer permId : sysRole.getPermIds()) {
    14.             SysRolePermission sysRolePermission = new SysRolePermission(sysRole.getId(), permId);
    15.             baseMapper.insert(sysRolePermission);
    16.         }
    17.     }
    18. }
     

     

    写到最后
     

     
 
    四季轮换，已经数不清凋零了多少， 愿我们往后能向心而行，一路招摇胜！
     
 
    🐋 你的支持认可是我创作的动力
     
 
    💟 创作不易，不妨点赞💚评论❤️收藏💙一下
     
 
    😘 感谢大佬们的支持，欢迎各位前来不吝赐教
     

    
                
    
                    
    
                
    • 

                
  • 

                    相关阅读:
    
                    
Windows如何设置Tomcat开机启动？                            
    
40 道基础Dubbo 面试题及答案                            
    
单臂路由学习                            
    
泊车功能专题介绍 ———— AVP系统基础数据交互内容                            
    
MySQL高级篇第一章（linux下安装MySQL）【下】                            
    
C语言中指针的介绍                            
    
Discuz中的关键全局变量`$_G`                            
    
向量数据库Pinecone，治疗ChatGPT幻觉的药方？                            
    
【C++数据结构】程序性能分析                            
    
ubuntu 安装串口工具和添加虚拟串口                            
    
                        
                
    • 
                
  • 
                    原文地址：https://blog.csdn.net/zsy3757486/article/details/127704974
                
    •