element Ui树状图控件 spring boot Vue 实现角色授权功能

目录

前言：

二. element ui

 2.1官网提供的核心代码

三.表结构

​编辑 

四.后端

4.1功能分析

4.2实体类

4.3 查询全部权限显示的结果

4.2修改角色权限的后台方法 

 五.vue

5.0代码总览

5.1树形图

 5.2所需要的绑定数据

5.3所需方法

---

前言：

先上图看效果，页面不是很美观

 

二. element ui

 2.1官网提供的核心代码

  通过 node 获取
  通过 key 获取
  通过 node 设置
  通过 key 设置
  清空

 打开官网找到Tree树形控件，第一次应该很难看懂，我来详细跟大家讲解一下

1.

  :data="data"
  show-checkbox
  default-expand-all
  node-key="id"
  ref="tree"
  highlight-current
  :props="defaultProps">

:data="data" 绑定的数据叫data，data可以替换成自己写的集合

node-key里的id对应的是数据库中表的id  

  ref="tree" 表示这个树形图。

:props="defaultProps"  用来设置树形图的属性 说白了 就是设置节点叫啥，子节点是什么集合。估计还是很懵，到时候直接带大家看项目

2.

 

 getCheckedNodes() {
        console.log(this.$refs.tree.getCheckedNodes());
      },

将勾选的节点以json集合的形式打印到控制台

      getCheckedKeys() {
        console.log(this.$refs.tree.getCheckedKeys());
      },

将勾选中的节点以字符串数组的形式打印到控制台

3.

 setCheckedKeys() {
        this.$refs.tree.setCheckedKeys([3]);
      },
    

设置选中的节点的key值，将其样式改为勾选。 里面填的是3，就是把id为3的节点设置为选中状态

setCheckedNodes() {
        this.$refs.tree.setCheckedNodes([{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 9,
          label: '三级 1-1-1'
        }]);
      },

通过json的集合类型来设置选中的节点

4. data: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }],

该示例 树形图绑定的数据类型为data，data数据内部细节为父子孙结构，按照该结构显示到前端页面上。树形图的显示是由绑定的数据结构来决定的。

三.表结构

四.后端

4.1功能分析

1.查询所有的权限，将含有所有权限的集合跟树形图绑定

2.查询不同的角色所拥有的不同权限，用集合存储并调用setCheckedNodes（）用来设置选中的节点 

3.修改节点功能

删除该角色所拥有的权限

添加该角色的权限

前端勾选节点，将已勾选的节点的id，打包成string数组，转换成字符串，传给服务器。服务器通过对象的属性保存分割后的字符串id。

4.2实体类

package com.dmdd.javasecuritypractice.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;

import java.io.Serializable;
import java.util.List;

/**
 * 

 * 
 * 
 *
 * @author xray
 * @since 2023-01-31
 */
@Data
public class Permission implements Serializable {

    private static final long serialVersionUID = 1L;

    @TableId(value = "id", type = IdType.AUTO)
    private Integer id;

    private String name;

    private String description;

    private String url;

    private Integer pid;

    private String icon;

    private Integer sort;
    //子权限集合
    @TableField(exist = false)
    private List subPermissions;

    @Override
    public String toString() {
        return "Permission{" +
            "id=" + id +
            ", name=" + name +
            ", description=" + description +
            ", url=" + url +
            ", pid=" + pid +
            ", icon=" + icon +
            ", sort=" + sort +
        "}";
    }
}

通过一级权限查询二级权限，实体类里面定义一个集合用来存储二级权限 

4.3 查询全部权限显示的结果

包含所有权限的集合的数据形式 ，将该集合传给前端，树形控件绑定该集合，就会以该方式显示到页面上。

4.2修改角色权限的后台方法 

 //1,2,3,4,5 中间表的 permission_id permission的 id
    @Transactional
    @Override
    public void setRolePermissions(Long roleId, String permissions) {
        ArrayList rolePermissions = new ArrayList<>();
        //清空该角色权限
//        boolean b = this.removeById(roleId);
        boolean b = this.remove(new QueryWrapper().lambda().eq(RolePermission::getRoleId, roleId));
        if (b) {
            //将权限依次赋值给rolePermission
            String[] strings = permissions.split(",");
            for (String permissionId : strings) {
                RolePermission rolePermission = new RolePermission();
                //设置当前角色id 权限id id会自增
                rolePermission.setRoleId(roleId);
                rolePermission.setPermissionId(Long.valueOf(permissionId));
                rolePermissions.add(rolePermission);
            }
            //mybats-plus批量添加方法
            boolean b1 = this.saveBatch(rolePermissions);

        }
    }

对中间表进行操作，实现角色权限的修改 

 五.vue

5.0代码总览

5.1树形图

    
    
      
      
      

        取 消
        确 定
      
    

树形图控件 

 5.2所需要的绑定数据

 allPermissions: [],
      rolePermissions:[],
      defaultProps: {
        children: 'subPermissions',
        label: 'name'
      },
      RoleId:-1

 defaultProps: {
        children: 'subPermissions',
        label: 'name'
      },

设置树形图父节点下的子集合名字为subPermissions.children属性对应的是父集合下的子集合  

label 表示每个节点的名字 我设置的name表示的是 allPermissions里的对象的name属性值

5.3所需方法

 //点击修改角色权限 弹出树形图
    openTree(userId) {
      this.userId = userId;
      this.dialogTreeVisible = true
      //查询所有权限通过角色
      this.axios.get("http://localhost:8080/selectAllRole")
          .then(result => {
            console.log("所有权限:" + result)
            if (result.data.status == "OK") {
              this.allRoles = result.data.data;
              //查询该角色拥有的权限
              this.axios.get("http://localhost:8080/select-role?userId=" + userId)
                  .then(result => {
                    console.log("当前角色的权限" + result)
                    if (result.data.status == "OK") {
                      this.userRoles = result.data.data;
                      //设置勾选效果
                      this.$refs.tree.setCheckedNodes(this.userRoles);
                    }
                  })
            }
          })
    },
    //设置用户的角色
    setUserRoles() {
      console.log(this.$refs.tree.getCheckedKeys());
      //将数组转换成字符串
      let keys = this.$refs.tree.getCheckedKeys();
      let keyStr = ""
      for (let i = 0; i < keys.length; i++) {
        keyStr += keys[i] + ",";
      }
      keyStr.substr(0, keyStr.length - 1);
      //调用后台接口
      this.axios.post("http://localhost:8080/setRole", "userId=" + this.userId + "&roles=" + keyStr)
          .then(result => {
            // if (result.request.status == 200) {
              this.$message(result.data);
            // }
          })
      this.dialogTreeVisible = false;
    },

点击修改权限的按钮，设置树形图为可见，显示所有节点数据，设置勾选节点是哪些。

1.将后端的通过角色查询到的权限的集合传入前台，通过

this.$refs.tree.setCheckedNodes(this.rolePermissions);
设置勾选节点

其他的大家可以自己去体会，如果完全了解的话，不管是怎么样的数据结构的树形图都会写

最后附上我的另一个通过用户查询角色权限的实现图。