目录
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注解版
-
编写PermMapper:查询指定父id的所有权限,需配置关联项(当前权限的所有的孩子)
-
编写service:查询所有
-
编写controller:查询所有
-
-
编写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) ; }
-
编写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);} }
-
-
编写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);}} }
-