目录

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"stripestyle="width: 100%"><el-table-columnprop="id"label="角色ID"fixedwidth="80"></el-table-column><el-table-columnprop="roleName"label="角色名称"fixedwidth="180"></el-table-column><el-table-columnprop="roleDesc"label="角色描述"width="200"></el-table-column><el-table-columnlabel="操作" 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() {// ajaxlet { 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 {
​@Overridepublic 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 {@Resourceprivate 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 {@Resourceprivate SysRolePermissionService sysRolePermissionService;
​@GetMapping("/role/{roleId}")public BaseResult findAllByRoleId(@PathVariable("roleId") Integer roleId) {//1 条件 roleId = 1QueryWrapper<SysRolePermission> queryWrapper = new QueryWrapper<>();queryWrapper.eq("role_id", roleId);
​//2 查询所有- 角色权限对象List<SysRolePermission> list = sysRolePermissionService.list(queryWrapper);
​//3 处理数据，只需要权限idList<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"stripestyle="width: 100%"><el-table-columnprop="id"label="角色ID"fixedwidth="80"></el-table-column><el-table-columnprop="roleName"label="角色名称"fixedwidth="180"></el-table-column><el-table-columnprop="roleDesc"label="角色描述"width="200"></el-table-column><el-table-columnlabel="操作" 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-checkboxdefault-expand-allnode-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() {// ajaxlet { 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) {// ajaxlet { 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/1let { 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-columnprop="id"label="角色ID"fixedwidth="80"></el-table-column><el-table-columnprop="roleName"label="角色名称"fixedwidth="180"></el-table-column><el-table-columnprop="roleDesc"label="角色描述"width="200"></el-table-column><el-table-columnlabel="操作" 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-checkboxdefault-expand-allnode-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() {// ajaxlet { 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) {// ajaxlet { 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/1let { 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-columnprop="id"label="角色ID"fixedwidth="80"></el-table-column><el-table-columnprop="roleName"label="角色名称"fixedwidth="180"></el-table-column><el-table-columnprop="roleDesc"label="角色描述"width="200"></el-table-column><el-table-columnlabel="操作" 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-checkboxdefault-expand-allnode-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: '',         //角色idpermIds: []     //所选权限的id}}},methods: {async findAllRole() {// ajaxlet { 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) {// ajaxlet { 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/1let { 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.idthis.role.permIds = baseResult.dataconsole.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 {
​@Overridepublic 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 添加角色

【学生管理系统】权限管理之角色管理相关推荐

  1. Oracle数据库的认证方法、用户管理、权限管理和角色管理等

    1 Oracle认证方法 操作系统身份认证 网络身份认证 Oracle数据库身份认证 数据库管理员认证 操作系统认证方式 如果采用操作系统认证方式,通常需要在操作系统中创建用户组,并且授予该组DBA权 ...

  2. 权限组件（6）：权限分配的角色管理

    效果图: 为了方便开发,先把中间件注释掉,要不还要在角色-权限表中添加对应关系.又因为二级菜单和面包屑导航需要中间件的变量,所以要在layout.html里面把这两个也注释掉. setting.py ...

  3. 学生管理系统的注册登录以及管理的具体实现

    题目要求: 编写程序:实现登录注册功能,程序一进来如果没有账号就选择注册,如果有账号就直接登录. 注册功能的时候要输入注册账号.设置密码.输入确认密码.输入邮箱号码.输入性别.输入个人简介.输入你的身 ...

  4. ztree 默认选中节点_用户管理、角色管理、模块管理、zTree的使用

    全部都是增删改查 修改mapper,service,controller,jsp 给角色分配权限 1.1 跳转分配权限页面 1.1.1 jsp //实现权限 function toModule() { ...

  5. ztree 异步展开节点显示不出来_用户管理、角色管理、模块管理、zTree的使用

    全部都是增删改查 修改mapper,service,controller,jsp 给角色分配权限 1.1 跳转分配权限页面 1.1.1 jsp //实现权限 function toModule() { ...

  6. 分布式医疗云平台（项目功能简介截图）【系统管理（科室管理、用户管理、角色管理、菜单管理 、字典管理、通知公告管理 、检查费用设置、挂号费用设置 ）】】(四)-全面详解（学习总结---从入门到深化）

    项目功能截图 1. 系统管理 1.1.科室管理 1.2.用户管理 1.3.角色管理 1.4.菜单管理

  7. 【学生管理系统】权限管理之角色管理—添加角色并添加对应角色的权限

    目录 一.添加角色 1.1 前端 1)页面效果展示 2)前端代码 1.2 后端 1)效果展示 2)后端代码

  8. RabbitMQ：入门（三）——RabbitMQ用户管理、角色管理与权限管理

    1. 用户管理 用户管理包括增加用户,删除用户,查看用户列表,修改用户密码. 相应的命令 (1) 新增一个用户 rabbitmqctl  add_user  Username  Password (2 ...

  9. ThinkPHP代码生成器快速开发框架：ThinkPHP+VUE+APIdoc+Restful+Oauth2.0+代码生成器+系统基础功能（用户管理、菜单管理、角色管理、权限管理、字典管理、部门管理）

    Wedo快速开发框架 https://github.com/weidong100/Wedo 根据数据表,快速生成控制器.模型.VUE界面.接口文档! 系统组成: PHP框架使用ThinkPHP5,官网 ...

最新文章

  1. BZOJ 1174: [Balkan2007]Toponyms
  2. 关于ubuntu的root密码问题
  3. dart系列之:dart中的异步编程
  4. tif 高程_使用ArcGIS提取高程点
  5. python通过ssh配置交换机_配置（通过SSH）Cisco交换机的Python脚本
  6. 信息安全工程师笔记-入侵检测技术原理与应用
  7. 目标检测网络中的 bottom-up 和 top-down理解
  8. linux中fork（）函数具体解释（原创！！实例解说）
  9. 美团外卖批量投放智能安全头盔：骑手可语音处理订单
  10. 【Elasticsearch】Bkd-Tree 在 Lucene 中的实现
  11. 中国医科大学计算机应用基础本科在线作业,17秋中国医科大学《计算机应用基础(本科)》在线作业...
  12. pl/sql操作数据库之触发器的使用
  13. WCF Data Services查询
  14. 全能地图工具共享及操作规范
  15. retainall的问题
  16. 2022 年要了解的新兴安全供应商
  17. 论坛介绍 ｜ COSCon'22 开源操作系统（O）
  18. 大球分析系统_走地大球分析系统app
  19. 数字图像处理之图像修复
  20. python列表可以放不同类型_python基础篇数据类型之二——列表(List)

热门文章

  1. HR 黑话大全：那些残忍的潜台词
  2. 《AngularJS入门与进阶》图书简介
  3. html导出excel表头多了一行空行,Excel中批量插入空行的技巧，会用2个算你厉害
  4. three.js改变模型局部颜色(vue)
  5. Ruby学习入门命令
  6. AIGC(AI Generated Content,人工智能生成内容)
  7. Windows中cuda安装教程及调试Error总结
  8. Java获取每天八点或第二天八点的时间戳
  9. 移动端测试 APP启动性能分析 WebView性能分析 H5性能分析 卡顿分析 帧分析 CPU统计 网络流量分析 耗电量指标 弱网测试 健壮性测试 兼容性测试 Amdahl
  10. 荣耀换鸿蒙系统,荣耀手机能升级鸿蒙系统吗，支持鸿蒙系统的荣耀手机有哪些...