Vue+Element-UI+Springboot权限管理系统

Have_MonkeyG

已于 2022-12-14 22:28:52 修改

阅读量1k

点赞数

文章标签： vue.js ui spring boot elementui

于 2022-08-15 15:19:51 首次发布

本文链接：https://blog.csdn.net/Have_MonkeyG/article/details/126346655

版权

一、前端修改权限弹出层

 <el-dialog
                title="修改权限"
                :visible.sync="updatePermissiondialogVisible"
                width="30%"
        >
            <!--data:树型的数据
            default-expanded-keys:默认展开项
            default-checked-keys:默认选中项
            -->
            <el-tree
                    :data="treeData"
                    show-checkbox
                    node-key="id"
                    ref="rootTree"
                    default-expand-all
                    :props="defaultProps">
            </el-tree>
            <span slot="footer" class="dialog-footer">
            <el-button @click="updatePermissiondialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmPermission">确 定</el-button>
          </span>
        </el-dialog>

treeData：是我们从后端查询出的所有权限

defaultProps：(1)children:子节点；lable:子节点名称

node-key：是我们权限显示根据查询出来的权限编号来显示

ref：可以理解为被选中的权限

data数据层需要定义的数据:

data(){
    return:{
        //权限弹出层
                updatePermissiondialogVisible:false,
        defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                //树型菜单数据
                treeData:[],
                //被选中中菜单项目
                checkedKeys:[],
                roleId:0
    }
}

选中点击修改权限按钮触发的事件:

  //修改权限按钮事件
                updatePer(roleId){
                    this.roleId=roleId;
                    this.updatePermissiondialogVisible=true;
                    this.$http.post("/permission/allMenu/"+roleId).then(result=>{
                        // //1.查询所有的菜单
                        this.treeData=result.data.data.treeData;
                        console.log(result.data.data.checkIds)
                        // //2.查询当前角色具有的菜单id.
                        setTimeout(()=>{
                            result.data.data.checkIds.forEach(value=>{
                                this.$refs.rootTree.setChecked(value,true,false);
                            })
                        },100)
                        /*menuids.forEach(value=>{
                            console.log(value);
                            that.$refs.tree.setChecked(value,true,false);
                        })*/

                    })
                },

二、后台权限信息数据回显功能实现:

1.controller层

@PostMapping("/allMenu/{roleId}")
    public CommonResult allMenu(@PathVariable String roleId){
        CommonResult allMenu = permissionService.findAllMenu(roleId);
        return allMenu;
    }

2.业务层Srvice层(核心)

我查询当前角色具有的权限使用的是递归调用分别比较当前权限id与父4权限id是否相同，相同则代表该权限id具有子菜单。

@Service
public class PermissionServiceImpl extends ServiceImpl<PermissionMapper, Permission> implements IPermissionService {
    @Autowired
    private PermissionMapper permissionMapper;
    @Autowired
    private RedisTemplate redisTemplate;
    @Autowired
    private IRolePermissionService rolePermissionService;

    @Override
    //查询出所有的权限
    public CommonResult findAllMenu(String roleid) {
      QueryWrapper<Permission> wrapper=new QueryWrapper<>();
      wrapper.eq("is_deleted",0);
        List<Permission> permissionList = permissionMapper.selectList(wrapper);
        //设置层级关系
        List<Permission> firstMenus =new ArrayList<>();
        for (Permission first : permissionList) {
            //查找一级菜单放入list集合
            if(first.getPid().equals("1")){
                firstMenus.add(first);
            }
        }
        //为一级菜单设置二级菜单
        for (Permission firstMenu : firstMenus) {
            firstMenu.setChildren(findChildren(permissionList,firstMenu.getId()));
        }

        //根据角色查询该角色具有的权限id
        QueryWrapper<RolePermission> wrapper1=new QueryWrapper<>();
        wrapper1.eq("role_id",roleid);
        List<RolePermission> list = rolePermissionService.list(wrapper1);
        //使用stream流只取出id
        List<String> collect = list.stream().map(iteam -> iteam.getPermissionId()).distinct().collect(Collectors.toList());


        //将查询到的结果封装到map中
        Map<String,Object> map=new HashMap<>();
        map.put("checkIds",collect);
        map.put("treeData",firstMenus);


        return new CommonResult(2000,"查询成功!",map);
    }
//递归方法查询出子菜单
    //不停的调用自身的方法知道无结果
    private List<Permission> findChildren(List<Permission> permissionList,String id){
        List<Permission> children=new ArrayList<>();
        for (Permission permission : permissionList) {
            //用儿子的pid与id比较如果相同说明有子放入集合
            if(permission.getPid().equals(id)){
                children.add(permission);
            }
        }
        for (Permission child : children) {
            child.setChildren(findChildren(permissionList,child.getId()));
        }
        return children;
    }

3.dao层(mapper层)

数据库方面我使用是mybatis-plus

@Repository
public interface PermissionMapper extends BaseMapper<Permission> {

    List<Permission> findPermissionByUserId(String id);
}

此时我们已经做到权限数据可以回显，当前角色具有的权限也会被选中

三、重新给角色分配权限后的确认修改的功能实现:

1、点击确认修改权限的事件

//确定权限分配
            confirmPermission(){
                //获取全选半选的树节点
                var checkedNodes=this.$refs.rootTree.getCheckedNodes(false,true);
                var ids=[];
                checkedNodes.forEach(iteam=>{
                    ids.push(iteam.id)
                })
                this.$http.post("/rolePermission/edit/"+this.roleId,ids).then(result=>{
                    if (result.data.code===2000){
                        this.$message.success(result.data.msg);
                        this.updatePermissiondialogVisible=false;
                    }
                    this.$router.go(0);

                })
            },

2、后端修改权限controller层

@RestController
@RequestMapping("/rolePermission")
public class RolePermissionController {
    @Autowired
    private IRolePermissionService rolePermissionService;
    @PostMapping("/edit/{roleId}")
    public CommonResult edit(@PathVariable String roleId, @RequestBody List<String> ids){
        System.out.println(ids);
        return rolePermissionService.edit(roleId,ids);
    }
}

3.dao层(mapper层)

数据库方面我使用是mybatis-plus

在mapper中我调用的都是mybatis-plus中自带的单表方法

4.业务层Srvice层(核心)

修改权限业务流程可以看作是：

1.先把角色原有的权限全部删除

2.将重写分配给角色的权限添加上去

因为是两步操作而且要保证同时进行所以我们要为其添加上事务处理

@Transactional

另外也要在主启动类上开启事务注解

@EnableTransactionManagement//开启事务

@Service
public class RolePermissionServiceImpl extends ServiceImpl<RolePermissionMapper, RolePermission> implements IRolePermissionService {
    @Override
    @Transactional
    public CommonResult edit(String roleId, List<String> ids) {
        //修改操作
        //先删除后添加
        //删除
        QueryWrapper<RolePermission> wrapper=new QueryWrapper<>();
        wrapper.eq("role_id",roleId);
        this.remove(wrapper);

        //添加
        List<RolePermission> collect =
                ids.stream()
                        .map(iteam -> new RolePermission(null, roleId, iteam, false, LocalDateTime.now(), LocalDateTime.now())).collect(Collectors.toList());
        this.saveBatch(collect);

        return new CommonResult(2000,"分配成功!",null);
    }
}