当前位置： 首页 > news >正文

【学生管理系统】权限管理之角色管理

news 来源：原创 2024/5/19 0:14:26

目录

6.3 角色管理

6.3.1 查询所有角色

6.3.2 核心2：给角色授予权限(菜单)

6.3.3 添加角色

6.3 角色管理

6.3.1 查询所有角色

1）后端【已有】

2）前端

  • 要求：左右分屏

<template>
  <div>
    <el-row>
      <el-col :span="16">
        <el-card class="role-list-card">
          <div slot="header" class="clearfix">
            <span>角色列表</span>
          </div>
          <!-- 角色列表 start -->
          <el-table
            :data="roleList"
            stripe
            style="width: 100%">
            <el-table-column
              prop="id"
              label="角色ID"
              fixed
              width="80">
            </el-table-column>
            <el-table-column
              prop="roleName"
              label="角色名称"
              fixed
              width="180">
            </el-table-column>
            <el-table-column
              prop="roleDesc"
              label="角色描述"
              width="200">
            </el-table-column>
            <el-table-column
              label="操作" 
              fixed="right">
              <template slot-scope="scope">
                <el-button size="mini">编辑</el-button>
                <el-button size="mini" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 角色列表 end -->
        </el-card>
      </el-col>
      <el-col :span="8" style="padding-left: 10px;">
        <el-card class="perm-list-card">
          <div slot="header" class="clearfix">
            <span>权限展示</span>
            <el-button type="primary" style="float: right; padding: 3px 0">授权</el-button>
          </div>
          <!-- 权限展示 start -->
          <!-- 权限展示 end -->
        </el-card>
        
      </el-col>
    </el-row>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      roleList: []
    }
  },
  methods: {
    async findAllRole() {
      // ajax
      let { data: baseResult } = await this.$axios.get('/user-service/role')
      // 处理
      if(baseResult.code == 20000) {
        this.roleList = baseResult.data
      } else {
        this.$message.error(baseResult.message)
      }
    }
  },
  mounted() {
    // 查询所有的角色
    this.findAllRole()
  },
}
</script>
​
<style>
  .role-list-card {
    height: 100%;
  }
  .perm-list-card {
    height: 100%;
  }
</style>

6.3.2 核心2：给角色授予权限(菜单)

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

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

  • 方式2：使用mapper注解版

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

    2. 编写service：查询所有

    3. 编写controller：查询所有

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

    package com.czxy.classes.mapper;
​
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.czxy.sys.SysPermission;
import org.apache.ibatis.annotations.*;
​
import java.util.List;
​
/**
 * @author 桐叔
 * @email liangtong@itcast.cn
 * @description
 */
@Mapper
public interface SysPermissionMapper extends BaseMapper<SysPermission> {
    /**
     * 通过父id查询所有的权限
     * @author 桐叔
     * @email liangtong@itcast.cn
     * @return
     */
    @Select("SELECT * FROM sys_permission WHERE parent_id = #{parentId}")
    @Results({
            @Result(property = "id", column = "id"),
            @Result(property = "permName", column = "permName"),
            @Result(property = "parentId", column = "parent_id"),
            @Result(property = "path", column = "path"),
            @Result(property = "children", many = @Many(select = "com.czxy.classes.mapper.SysPermissionMapper.findAllByParentId"), column = "id")
    })
    public List<SysPermission> findAllByParentId(@Param("parentId") Integer parentId) ;
​
​
}
​

  2. 编写service：查询所有

    • 接口

      @Service
@Transactional
public interface SysPermissionService extends IService<SysPermission> {
​
​
    public List<SysPermission> findAllByParentId(Integer parentId) ;
}
​

    • 实现类

      package com.czxy.classes.service.impl;
​
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.czxy.classes.mapper.SysPermissionMapper;
import com.czxy.classes.service.SysPermissionService;
import com.czxy.sys.SysPermission;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
​
import java.util.List;
​
/**
 * @author 桐叔
 * @email liangtong@itcast.cn
 * @description
 */
@Service
@Transactional
public class SysPermissionServiceImpl extends ServiceImpl<SysPermissionMapper, SysPermission> implements SysPermissionService {
​
    @Override
    public List<SysPermission> findAllByParentId(Integer parentId) {
        return baseMapper.findAllByParentId(parentId);
    }
}
​

  3. 编写controller：查询所有

    package com.czxy.classes.controller;
​
import com.czxy.classes.service.SysPermissionService;
import com.czxy.sys.SysPermission;
import com.czxy.vo.BaseResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
​
import javax.annotation.Resource;
import java.util.List;
​
/**
 * @author 桐叔
 * @email liangtong@itcast.cn
 * @description
 */
@RestController
@RequestMapping("/perm")
public class SysPermissionController {
    @Resource
    private SysPermissionService sysPermissionService;
​
​
    /**
     * 查询所有，含孩子
     * @author 桐叔
     * @email liangtong@itcast.cn
     * @return
     */
    @GetMapping("/parent/{parentId}")
    public BaseResult findAllByParentId(@PathVariable("parentId") Integer parentId) {
        // 查询
        List<SysPermission> list = sysPermissionService.findAllByParentId(parentId);
        return BaseResult.ok("查询成功", list);
    }
​
}
​

     

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

  • 提交数据：roleId = 1

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

package com.czxy.classes.controller;
​
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.czxy.classes.service.SysRolePermissionService;
import com.czxy.sys.SysRolePermission;
import com.czxy.vo.BaseResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
​
import javax.annotation.Resource;
import java.util.List;
import java.util.stream.Collectors;
​
/**
 * @author 桐叔
 * @email liangtong@itcast.cn
 * @description
 */
@RestController
@RequestMapping("/rolePerm")
public class SysRolePermissionController {
    @Resource
    private SysRolePermissionService sysRolePermissionService;
​
    @GetMapping("/role/{roleId}")
    public BaseResult findAllByRoleId(@PathVariable("roleId") Integer roleId) {
        //1 条件 roleId = 1
        QueryWrapper<SysRolePermission> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("role_id", roleId);
​
        //2 查询所有- 角色权限对象
        List<SysRolePermission> list = sysRolePermissionService.list(queryWrapper);
​
        //3 处理数据，只需要权限id
        List<Integer> roleIdList = list.stream().map(sysRolePermission -> sysRolePermission.getPermId()).collect(Collectors.toList());
​
        //4 返回
        return BaseResult.ok("查询成功", roleIdList);
    }
​
​
}
​

3）前端：展示所有的权限

  • 编写变量、发送ajax查询、页面加载成功时调用

  • 使用tree进行展示

     

<template>
  <div>
    <el-row>
      <el-col :span="16">
        <el-card class="role-list-card">
          <div slot="header" class="clearfix">
            <span>角色列表</span>
          </div>
          <!-- 角色列表 start -->
          <el-table
            :data="roleList"
            stripe
            style="width: 100%">
            <el-table-column
              prop="id"
              label="角色ID"
              fixed
              width="80">
            </el-table-column>
            <el-table-column
              prop="roleName"
              label="角色名称"
              fixed
              width="180">
            </el-table-column>
            <el-table-column
              prop="roleDesc"
              label="角色描述"
              width="200">
            </el-table-column>
            <el-table-column
              label="操作" 
              fixed="right">
              <template slot-scope="scope">
                <el-button size="mini">编辑</el-button>
                <el-button size="mini" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 角色列表 end -->
        </el-card>
      </el-col>
      <el-col :span="8" style="padding-left: 10px;">
        <el-card class="perm-list-card">
          <div slot="header" class="clearfix">
            <span>权限展示</span>
            <el-button type="primary" style="float: right; padding: 3px 0">授权</el-button>
          </div>
          <!-- 权限展示 start -->
          <el-tree
            :data="permList"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="permTree"
            highlight-current
            :props="defaultProps">
          </el-tree>
          <!-- 权限展示 end -->
        </el-card>
        
      </el-col>
    </el-row>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      roleList: [],               //角色列表
      permList: [],               //权限列表
      defaultProps: {             //tree提供的数据 与 所需数据 对应关系
        children: 'children',
        label: 'permName'
      }
    }
  },
  methods: {
    async findAllRole() {
      // ajax
      let { data: baseResult } = await this.$axios.get('/user-service/role')
      // 处理
      if(baseResult.code == 20000) {
        this.roleList = baseResult.data
      } else {
        this.$message.error(baseResult.message)
      }
    },
    async findAllPerm(parentId) {
      // ajax
      let { data: baseResult } = await this.$axios.get(`/user-service/perm/parent/${parentId}`)
      // 处理
      if(baseResult.code == 20000) {
        this.permList = baseResult.data
      } else {
        this.$message.error(baseResult.message)
      }
    }
  },
  mounted() {
    // 查询所有的角色
    this.findAllRole()
    // 查询所有的一级权限
    this.findAllPerm(0)
  },
}
</script>
​
<style>
  .role-list-card {
    height: 100%;
  }
  .perm-list-card {
    height: 100%;
  }
</style>

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

  • 表格行的点击，并获得当前行的数据

  • 查询当前角色对应的所有选线，并回显到tree中

 

    async findAllPermByRoleId(row, column, event) {
      // ajax 查询   /user-service/rolePerm/role/1
      let { data: baseResult } = await this.$axios.get(`/user-service/rolePerm/role/${row.id}`)
      // 处理
      if(baseResult.code == 20000) {
        // 查询成功，将查询的结果填充到右侧tree中
        this.$refs.permTree.setCheckedKeys(baseResult.data);
      } else {
        this.$message.error(baseResult.message)
      }
    }

<template>
  <div>
    <el-row>
      <el-col :span="16">
        <el-card class="role-list-card">
          <div slot="header" class="clearfix">
            <span>角色列表</span>
          </div>
          <!-- 角色列表 start -->
          <el-table
            :data="roleList"
            stripe
            @row-click="findAllPermByRoleId"
            style="width: 100%">
            <el-table-column
              prop="id"
              label="角色ID"
              fixed
              width="80">
            </el-table-column>
            <el-table-column
              prop="roleName"
              label="角色名称"
              fixed
              width="180">
            </el-table-column>
            <el-table-column
              prop="roleDesc"
              label="角色描述"
              width="200">
            </el-table-column>
            <el-table-column
              label="操作" 
              fixed="right">
              <template slot-scope="scope">
                <el-button size="mini">编辑</el-button>
                <el-button size="mini" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 角色列表 end -->
        </el-card>
      </el-col>
      <el-col :span="8" style="padding-left: 10px;">
        <el-card class="perm-list-card">
          <div slot="header" class="clearfix">
            <span>权限展示</span>
            <el-button type="primary" style="float: right; padding: 3px 0">授权</el-button>
          </div>
          <!-- 权限展示 start -->
          <el-tree
            :data="permList"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="permTree"
            highlight-current
            :props="defaultProps">
          </el-tree>
          <!-- 权限展示 end -->
        </el-card>
        
      </el-col>
    </el-row>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      roleList: [],               //角色列表
      permList: [],               //权限列表
      defaultProps: {             //tree提供的数据 与 所需数据 对应关系
        children: 'children',
        label: 'permName'
      }
    }
  },
  methods: {
    async findAllRole() {
      // ajax
      let { data: baseResult } = await this.$axios.get('/user-service/role')
      // 处理
      if(baseResult.code == 20000) {
        this.roleList = baseResult.data
      } else {
        this.$message.error(baseResult.message)
      }
    },
    async findAllPerm(parentId) {
      // ajax
      let { data: baseResult } = await this.$axios.get(`/user-service/perm/parent/${parentId}`)
      // 处理
      if(baseResult.code == 20000) {
        this.permList = baseResult.data
      } else {
        this.$message.error(baseResult.message)
      }
    },
    async findAllPermByRoleId(row, column, event) {
      // ajax 查询   /user-service/rolePerm/role/1
      let { data: baseResult } = await this.$axios.get(`/user-service/rolePerm/role/${row.id}`)
      // 处理
      if(baseResult.code == 20000) {
        // 查询成功，将查询的结果填充到右侧tree中
        this.$refs.permTree.setCheckedKeys(baseResult.data);
      } else {
        this.$message.error(baseResult.message)
      }
    }
  },
  mounted() {
    // 查询所有的角色
    this.findAllRole()
    // 查询所有的一级权限
    this.findAllPerm(0)
  },
}
</script>
​
<style>
  .role-list-card {
    height: 100%;
  }
  .perm-list-card {
    height: 100%;
  }
</style>

5）前端：提交授权表单

 

<template>
  <div>
    <el-row>
      <el-col :span="16">
        <el-card class="role-list-card">
          <div slot="header" class="clearfix">
            <span>角色列表</span>
          </div>
          <!-- 角色列表 start -->
          <el-table
            :data="roleList"
            stripe
            @row-click="findAllPermByRoleId"
            style="width: 100%">
            <el-table-column
              prop="id"
              label="角色ID"
              fixed
              width="80">
            </el-table-column>
            <el-table-column
              prop="roleName"
              label="角色名称"
              fixed
              width="180">
            </el-table-column>
            <el-table-column
              prop="roleDesc"
              label="角色描述"
              width="200">
            </el-table-column>
            <el-table-column
              label="操作" 
              fixed="right">
              <template slot-scope="scope">
                <el-button size="mini">编辑</el-button>
                <el-button size="mini" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 角色列表 end -->
        </el-card>
      </el-col>
      <el-col :span="8" style="padding-left: 10px;">
        <el-card class="perm-list-card">
          <div slot="header" class="clearfix">
            <span>权限展示</span>
            <el-button type="primary" @click="addPermWithRoleId" style="float: right; padding: 3px 0">授权</el-button>
          </div>
          <!-- 权限展示 start -->
          <el-tree
            :data="permList"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="permTree"
            highlight-current
            :props="defaultProps">
          </el-tree>
          <!-- 权限展示 end -->
        </el-card>
        
      </el-col>
    </el-row>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      roleList: [],               //角色列表
      permList: [],               //权限列表
      defaultProps: {             //tree提供的数据 与 所需数据 对应关系
        children: 'children',
        label: 'permName'
      },
      role: {
        id: '',         //角色id
        permIds: []     //所选权限的id
      }
    }
  },
  methods: {
    async findAllRole() {
      // ajax
      let { data: baseResult } = await this.$axios.get('/user-service/role')
      // 处理
      if(baseResult.code == 20000) {
        this.roleList = baseResult.data
      } else {
        this.$message.error(baseResult.message)
      }
    },
    async findAllPerm(parentId) {
      // ajax
      let { data: baseResult } = await this.$axios.get(`/user-service/perm/parent/${parentId}`)
      // 处理
      if(baseResult.code == 20000) {
        this.permList = baseResult.data
      } else {
        this.$message.error(baseResult.message)
      }
    },
    async findAllPermByRoleId(row, column, event) {
      // ajax 查询   /user-service/rolePerm/role/1
      let { data: baseResult } = await this.$axios.get(`/user-service/rolePerm/role/${row.id}`)
      // 处理
      if(baseResult.code == 20000) {
        // 查询成功，将查询的结果填充到右侧tree中
        this.$refs.permTree.setCheckedKeys(baseResult.data);
        // 记录已有数据
        this.role.id = row.id
        this.role.permIds = baseResult.data
        console.info(this.role)
      } else {
        this.$message.error(baseResult.message)
      }
    },
    async addPermWithRoleId() {
      // 判断是否选择角色
      if(! this.role.id) {
        this.$message.warning('请先选择角色')
        return;
      }
      // 更新所选权限
      this.role.permIds = this.$refs.permTree.getCheckedKeys()
      // ajax 提交
      let { data: baseResult } = await this.$axios.post('/user-service/rolePerm/addPerm', this.role)
      // 提示
      if(baseResult.code == 20000) {
        this.$message.success(baseResult.message)
      } else {
        this.$message.error(baseResult.message)
      }
    }
  },
  mounted() {
    // 查询所有的角色
    this.findAllRole()
    // 查询所有的一级权限
    this.findAllPerm(0)
  },
}
</script>
​
<style>
  .role-list-card {
    height: 100%;
  }
  .perm-list-card {
    height: 100%;
  }
</style>

6）后端：授权

  • 编写controller

  • 编写service

  • 编写controller

     

        @PostMapping("/addPerm")
    public BaseResult addPermWithRoleId(@RequestBody SysRole sysRole) {
        try {
            // 添加权限
            sysRolePermissionService.addPermWithRoleId(sysRole);
​
            // 提示
            return BaseResult.ok("授权成功");
        } catch (Exception e) {
            return BaseResult.error("授权失败");
        }
​
    }

  • 编写service

     

    • 接口

      @Service
@Transactional
public interface SysRolePermissionService extends IService<SysRolePermission> {
    void addPermWithRoleId(SysRole sysRole);
}

    • 实现类

      package com.czxy.classes.service.impl;
​
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.czxy.classes.mapper.SysRolePermissionMapper;
import com.czxy.classes.service.SysRolePermissionService;
import com.czxy.sys.SysRole;
import com.czxy.sys.SysRolePermission;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
​
/**
 * @author 桐叔
 * @email liangtong@itcast.cn
 * @description
 */
@Service
@Transactional
public class SysRolePermissionServiceImpl extends ServiceImpl<SysRolePermissionMapper, SysRolePermission> implements SysRolePermissionService {
​
    @Override
    public void addPermWithRoleId(SysRole sysRole) {
        // 1 删除
        QueryWrapper<SysRolePermission> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("role_id", sysRole.getId());
        baseMapper.delete(queryWrapper);
​
        // 2 添加
        for (Integer permId : sysRole.getPermIds()) {
            SysRolePermission sysRolePermission = new SysRolePermission(sysRole.getId(), permId);
            baseMapper.insert(sysRolePermission);
        }
    }
}
​

6.3.3 添加角色

相关文章：

  • Uniapp零基础开发学习笔记(5) -组件入门及容器组件使用
  • HarmonyOS系统中内核实现烟雾检测的方法
  • 【科学文献计量】Networkx基础使用指南
  • 改进YOLOv5 | Stand-Alone Self-Attention | 针对视觉任务的独立自注意力层 | 搭建纯注意力FPN+PAN结构
  • 大数据项目之电商数仓、数据仓库概念、项目需求及架构设计
  • C生万物 | 底层之美，莫过于C【1024，从0开始】
  • Spring Boot集成第三方登录之微信登录
  • 【图像分割】基于遗传算法的进化聚类技术对彩色图像进行分割（Matlab代码实现）
  • Mybatis 拦截器 说明和使用 （二）
  • Vue.js 组件精讲（目前已有6614人一起学习）
  • 【Spring】一文带你吃透IOC技术
  • I2C知识大全系列二 —— I2C硬件及时序
  • Python基础入门（持续更新中）
  • 【预测模型-SVM预测】基于粒子群算法结合支持向量机SVM实现Covid-19风险预测附matlab代码
  • 初阶数据结构 二叉树常用函数 （二）
  • 《剑指offer》分解让复杂问题更简单
  • Android 控件背景颜色处理
  • Angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？
  • Java 9 被无情抛弃，Java 8 直接升级到 Java 10！！
  • js数组之filter
  • mongo索引构建
  • 翻译：Hystrix - How To Use
  • 蓝海存储开关机注意事项总结
  • 前端js -- this指向总结。
  • 区块链分支循环
  • 用Python写一份独特的元宵节祝福
  • 原生js练习题---第五课
  • 远离DoS攻击 Windows Server 2016发布DNS政策
  • ​Kaggle X光肺炎检测比赛第二名方案解析 | CVPR 2020 Workshop
  • #我与Java虚拟机的故事#连载01：人在JVM，身不由己
  • （4）事件处理——（2）在页面加载的时候执行任务（Performing tasks on page load）...
  • (c语言版)滑动窗口 给定一个字符串，只包含字母和数字，按要求找出字符串中的最长（连续）子串的长度
  • （笔记）Kotlin——Android封装ViewBinding之二 优化
  • （分类）KNN算法- 参数调优
  • （附源码）php投票系统 毕业设计 121500
  • (过滤器)Filter和(监听器)listener
  • （一）SpringBoot3---尚硅谷总结
  • （转载）Linux网络编程入门
  • ***php进行支付宝开发中return_url和notify_url的区别分析
  • .equals()到底是什么意思？
  • .halo勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复
  • .Net程序帮助文档制作
  • .NET运行机制
  • .vue文件怎么使用_vue调试工具vue-devtools的安装
  • /dev下添加设备节点的方法步骤（通过device_create）
  • @GlobalLock注解作用与原理解析
  • @Service注解让spring找到你的Service bean
  • [2016.7.Test1] T1 三进制异或
  • [AHOI2009]中国象棋 DP，递推，组合数
  • [ai笔记4] 将AI工具场景化，应用于生活和工作
  • [Angular] 笔记 21：@ViewChild
  • [Avalon] Avalon中的Conditional Formatting.
  • [C++] 统计程序耗时
  • [C++]18:set和map的使用
  • [C++]四种方式求解最大子序列求和问题