目錄

前言：

二. element ui

?2.1官網(wǎng)提供的核心代碼

三.表結(jié)構(gòu)

?編輯?

四.后端

4.1功能分析

4.2實(shí)體類(lèi)

4.3 查詢(xún)?nèi)繖?quán)限顯示的結(jié)果

4.2修改角色權(quán)限的后臺(tái)方法?

?五.vue

5.0代碼總覽

5.1樹(shù)形圖

?5.2所需要的綁定數(shù)據(jù)

5.3所需方法

---

前言：

先上圖看效果，頁(yè)面不是很美觀

?

?

?

二. element ui

?2.1官網(wǎng)提供的核心代碼

<el-tree:data="data"show-checkboxdefault-expand-allnode-key="id"ref="tree"highlight-current:props="defaultProps">
</el-tree><div class="buttons"><el-button @click="getCheckedNodes">通過(guò) node 獲取</el-button><el-button @click="getCheckedKeys">通過(guò) key 獲取</el-button><el-button @click="setCheckedNodes">通過(guò) node 設(shè)置</el-button><el-button @click="setCheckedKeys">通過(guò) key 設(shè)置</el-button><el-button @click="resetChecked">清空</el-button>
</div><script>export default {methods: {getCheckedNodes() {console.log(this.$refs.tree.getCheckedNodes());},getCheckedKeys() {console.log(this.$refs.tree.getCheckedKeys());},setCheckedNodes() {this.$refs.tree.setCheckedNodes([{id: 5,label: '二級(jí) 2-1'}, {id: 9,label: '三級(jí) 1-1-1'}]);},setCheckedKeys() {this.$refs.tree.setCheckedKeys([3]);},resetChecked() {this.$refs.tree.setCheckedKeys([]);}},data() {return {data: [{id: 1,label: '一級(jí) 1',children: [{id: 4,label: '二級(jí) 1-1',children: [{id: 9,label: '三級(jí) 1-1-1'}, {id: 10,label: '三級(jí) 1-1-2'}]}]}, {id: 2,label: '一級(jí) 2',children: [{id: 5,label: '二級(jí) 2-1'}, {id: 6,label: '二級(jí) 2-2'}]}, {id: 3,label: '一級(jí) 3',children: [{id: 7,label: '二級(jí) 3-1'}, {id: 8,label: '二級(jí) 3-2'}]}],defaultProps: {children: 'children',label: 'label'}};}};
</script>

?

?

?打開(kāi)官網(wǎng)找到Tree樹(shù)形控件，第一次應(yīng)該很難看懂，我來(lái)詳細(xì)跟大家講解一下

1.

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

:data="data" 綁定的數(shù)據(jù)叫data，data可以替換成自己寫(xiě)的集合

node-key里的id對(duì)應(yīng)的是數(shù)據(jù)庫(kù)中表的id??

? ref="tree" 表示這個(gè)樹(shù)形圖。

:props="defaultProps"? 用來(lái)設(shè)置樹(shù)形圖的屬性 說(shuō)白了 就是設(shè)置節(jié)點(diǎn)叫啥，子節(jié)點(diǎn)是什么集合。估計(jì)還是很懵，到時(shí)候直接帶大家看項(xiàng)目

2.

?

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

將勾選的節(jié)點(diǎn)以json集合的形式打印到控制臺(tái)

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

將勾選中的節(jié)點(diǎn)以字符串?dāng)?shù)組的形式打印到控制臺(tái)

?

3.

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

設(shè)置選中的節(jié)點(diǎn)的key值，將其樣式改為勾選。 里面填的是3，就是把id為3的節(jié)點(diǎn)設(shè)置為選中狀態(tài)

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

通過(guò)json的集合類(lèi)型來(lái)設(shè)置選中的節(jié)點(diǎn)

4.?data: [{
? ? ? ? ? id: 1,
? ? ? ? ? label: '一級(jí) 1',
? ? ? ? ? children: [{
? ? ? ? ? ? id: 4,
? ? ? ? ? ? label: '二級(jí) 1-1',
? ? ? ? ? ? children: [{
? ? ? ? ? ? ? id: 9,
? ? ? ? ? ? ? label: '三級(jí) 1-1-1'
? ? ? ? ? ? }, {
? ? ? ? ? ? ? id: 10,
? ? ? ? ? ? ? label: '三級(jí) 1-1-2'
? ? ? ? ? ? }]
? ? ? ? ? }]
? ? ? ? }, {
? ? ? ? ? id: 2,
? ? ? ? ? label: '一級(jí) 2',
? ? ? ? ? children: [{
? ? ? ? ? ? id: 5,
? ? ? ? ? ? label: '二級(jí) 2-1'
? ? ? ? ? }, {
? ? ? ? ? ? id: 6,
? ? ? ? ? ? label: '二級(jí) 2-2'
? ? ? ? ? }]
? ? ? ? }, {
? ? ? ? ? id: 3,
? ? ? ? ? label: '一級(jí) 3',
? ? ? ? ? children: [{
? ? ? ? ? ? id: 7,
? ? ? ? ? ? label: '二級(jí) 3-1'
? ? ? ? ? }, {
? ? ? ? ? ? id: 8,
? ? ? ? ? ? label: '二級(jí) 3-2'
? ? ? ? ? }]
? ? ? ? }],

該示例 樹(shù)形圖綁定的數(shù)據(jù)類(lèi)型為data，data數(shù)據(jù)內(nèi)部細(xì)節(jié)為父子孫結(jié)構(gòu)，按照該結(jié)構(gòu)顯示到前端頁(yè)面上。樹(shù)形圖的顯示是由綁定的數(shù)據(jù)結(jié)構(gòu)來(lái)決定的。

三.表結(jié)構(gòu)

?

?

四.后端

4.1功能分析

1.查詢(xún)所有的權(quán)限，將含有所有權(quán)限的集合跟樹(shù)形圖綁定

2.查詢(xún)不同的角色所擁有的不同權(quán)限，用集合存儲(chǔ)并調(diào)用setCheckedNodes（）用來(lái)設(shè)置選中的節(jié)點(diǎn)?

3.修改節(jié)點(diǎn)功能

刪除該角色所擁有的權(quán)限

添加該角色的權(quán)限

前端勾選節(jié)點(diǎn)，將已勾選的節(jié)點(diǎn)的id，打包成string數(shù)組，轉(zhuǎn)換成字符串，傳給服務(wù)器。服務(wù)器通過(guò)對(duì)象的屬性保存分割后的字符串id。

4.2實(shí)體類(lèi)

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;/*** <p>* * </p>** @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;//子權(quán)限集合@TableField(exist = false)private List<Permission> subPermissions;@Overridepublic String toString() {return "Permission{" +"id=" + id +", name=" + name +", description=" + description +", url=" + url +", pid=" + pid +", icon=" + icon +", sort=" + sort +"}";}
}

通過(guò)一級(jí)權(quán)限查詢(xún)二級(jí)權(quán)限，實(shí)體類(lèi)里面定義一個(gè)集合用來(lái)存儲(chǔ)二級(jí)權(quán)限?

4.3 查詢(xún)?nèi)繖?quán)限顯示的結(jié)果

包含所有權(quán)限的集合的數(shù)據(jù)形式 ，將該集合傳給前端，樹(shù)形控件綁定該集合，就會(huì)以該方式顯示到頁(yè)面上。

4.2修改角色權(quán)限的后臺(tái)方法?

 //1,2,3,4,5 中間表的 permission_id permission的 id@Transactional@Overridepublic void setRolePermissions(Long roleId, String permissions) {ArrayList<RolePermission> rolePermissions = new ArrayList<>();//清空該角色權(quán)限
//        boolean b = this.removeById(roleId);boolean b = this.remove(new QueryWrapper<RolePermission>().lambda().eq(RolePermission::getRoleId, roleId));if (b) {//將權(quán)限依次賦值給rolePermissionString[] strings = permissions.split(",");for (String permissionId : strings) {RolePermission rolePermission = new RolePermission();//設(shè)置當(dāng)前角色id 權(quán)限id id會(huì)自增rolePermission.setRoleId(roleId);rolePermission.setPermissionId(Long.valueOf(permissionId));rolePermissions.add(rolePermission);}//mybats-plus批量添加方法boolean b1 = this.saveBatch(rolePermissions);}}

對(duì)中間表進(jìn)行操作，實(shí)現(xiàn)角色權(quán)限的修改?

?

?五.vue

5.0代碼總覽

<template><div>
<!--    添加角色的樹(shù)形結(jié)構(gòu)--><!--權(quán)限樹(shù)對(duì)話(huà)框--><el-dialog title="權(quán)限信息" :visible.sync="dialogTreeVisible"><el-tree:data="allPermissions"show-checkboxdefault-expand-allnode-key="id"ref="tree"highlight-current:props="defaultProps"></el-tree><div slot="footer" class="dialog-footer"><el-button @click="dialogTreeVisible = false">取 消</el-button><el-button type="primary" @click="setRolePermissions()">確 定</el-button></div></el-dialog><el-button type="text" @click="dialogFormVisible= true">新增模塊</el-button><el-dialog title="權(quán)限操作" :visible.sync="dialogFormVisible"><el-form :model="role"><el-form-item label="編號(hào)" :label-width="formLabelWidth"><el-input v-model="role.id" autocomplete="off"></el-input></el-form-item><el-form-item label="用戶(hù)名" :label-width="formLabelWidth"><el-input v-model="role.name" autocomplete="off"></el-input></el-form-item><el-form-item label="描述" :label-width="formLabelWidth"><el-input v-model="role.description" autocomplete="off"></el-input></el-form-item><el-form-item label="地區(qū)id" :label-width="formLabelWidth"><el-input v-model="role.siteId" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="update()">確 定</el-button></div></el-dialog><el-table:data="roles"style="width: 100%"><el-table-columnlabel="id"width="180"><template slot-scope="scope"><i class="el-icon-time"></i><span style="margin-left: 10px">{{ scope.row.id }}</span></template></el-table-column><el-table-columnlabel="用戶(hù)名"width="180"><template slot-scope="scope"><el-popover trigger="hover" placement="top"><p>姓名: {{ scope.row.name }}</p><p>id: {{ scope.row.id }}</p><div slot="reference" class="name-wrapper"><el-tag size="medium">{{ scope.row.name }}</el-tag></div></el-popover></template></el-table-column><el-table-columnlabel="描述"width="180"><template slot-scope="scope"><i class="el-icon-time"></i><span style="margin-left: 10px">{{ scope.row.description }}</span></template></el-table-column><el-table-columnlabel="siteId"width="180"><template slot-scope="scope"><i class="el-icon-time"></i><span style="margin-left: 10px">{{ scope.row.siteId }}</span></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">編輯</el-button><el-buttonsize="mini"@click="openTree(scope.row.id)">修改權(quán)限</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">刪除</el-button></template></el-table-column></el-table>//分頁(yè)功能<el-paginationbackgroundlayout="prev, pager, next":total="total":page-size="pageSize"@current-change="loadRole"></el-pagination></div>
</template><script>
export default {name: "RoleView",data() {return {roles: [],role: {},current: 1,total: 0,pageSize: 10,dialogFormVisible: false,formLabelWidth: "120px",dialogTreeVisible: false,allPermissions: [],rolePermissions:[],defaultProps: {children: 'subPermissions',label: 'name'},RoleId:-1}},methods:{//點(diǎn)擊修改角色權(quán)限 彈出樹(shù)形圖openTree(roleId){this.RoleId=roleId;this.dialogTreeVisible=true//查詢(xún)所有權(quán)限通過(guò)角色this.axios.get("http://localhost:8080/permissionsByRole").then(result=>{console.log("所有權(quán)限:"+result)if (result.data.status=="OK"){this.allPermissions=result.data.data;//查詢(xún)?cè)摻巧珦碛械臋?quán)限this.axios.get("http://localhost:8080/permissionsByRoleId?RoleId="+roleId).then(result=>{console.log("當(dāng)前角色的權(quán)限"+result)if (result.data.status=="OK"){this.rolePermissions=result.data.data;//設(shè)置勾選效果this.$refs.tree.setCheckedNodes(this.rolePermissions);}})}})},//設(shè)置角色權(quán)限setRolePermissions(){console.log(this.$refs.tree.getCheckedKeys());//將數(shù)組轉(zhuǎn)換成字符串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);//調(diào)用后臺(tái)接口this.axios.post("http://localhost:8080/permission/set-role","roleId="+this.RoleId+"&permissions="+keyStr).then(result=>{if (result.data.status=="OK"){this.$message(result.data.data);}})this.dialogTreeVisible=false;},//查詢(xún)角色表loadRole(current,pageSize){this.current=current;this.axios.get("http://localhost:8080/role/page?current="+this.current+"&pageSize="+this.pageSize).then(result=>{console.log(result)this.roles=result.data.data.recordsthis.total=result.data.data.total})},update() {if (this.role.id) {//執(zhí)行修改方法this.axios.put("http://localhost:8080/role", this.role).then(result => {if (result.data.status == "OK") {console.log(result.data)this.role={}this.dialogFormVisible=falsethis.loadRole(this.current)}})}else{this.axios.post("http://localhost:8080/role",this.role).then(result=>{if (result.data.status=="OK"){console.log(result)this.role={}this.dialogFormVisible=falsethis.loadRole(1)}})}},//回顯handleEdit(index,row){this.role=JSON.parse(JSON.stringify(row));this.dialogFormVisible=true},},mounted() {this.loadRole(1)}
}
</script><style scoped></style>

5.1樹(shù)形圖

<!--    添加角色的樹(shù)形結(jié)構(gòu)--><!--權(quán)限樹(shù)對(duì)話(huà)框--><el-dialog title="權(quán)限信息" :visible.sync="dialogTreeVisible"><el-tree:data="allPermissions"show-checkboxdefault-expand-allnode-key="id"ref="tree"highlight-current:props="defaultProps"></el-tree><div slot="footer" class="dialog-footer"><el-button @click="dialogTreeVisible = false">取 消</el-button><el-button type="primary" @click="setRolePermissions()">確 定</el-button></div></el-dialog>

樹(shù)形圖控件?

?5.2所需要的綁定數(shù)據(jù)

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

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

設(shè)置樹(shù)形圖父節(jié)點(diǎn)下的集合名字為subPermissions.? 該集合名allPermissions是集合里的對(duì)象的屬性

label 表示每個(gè)節(jié)點(diǎn)的名字 我設(shè)置的name表示的是 allPermissions里的對(duì)象的name屬性值

?

5.3所需方法

 //點(diǎn)擊修改角色權(quán)限 彈出樹(shù)形圖openTree(userId) {this.userId = userId;this.dialogTreeVisible = true//查詢(xún)所有權(quán)限通過(guò)角色this.axios.get("http://localhost:8080/selectAllRole").then(result => {console.log("所有權(quán)限:" + result)if (result.data.status == "OK") {this.allRoles = result.data.data;//查詢(xún)?cè)摻巧珦碛械臋?quán)限this.axios.get("http://localhost:8080/select-role?userId=" + userId).then(result => {console.log("當(dāng)前角色的權(quán)限" + result)if (result.data.status == "OK") {this.userRoles = result.data.data;//設(shè)置勾選效果this.$refs.tree.setCheckedNodes(this.userRoles);}})}})},//設(shè)置用戶(hù)的角色setUserRoles() {console.log(this.$refs.tree.getCheckedKeys());//將數(shù)組轉(zhuǎn)換成字符串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);//調(diào)用后臺(tái)接口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;},

點(diǎn)擊修改權(quán)限的按鈕，設(shè)置樹(shù)形圖為可見(jiàn)，顯示所有節(jié)點(diǎn)數(shù)據(jù)，設(shè)置勾選節(jié)點(diǎn)是哪些。

1.將后端的通過(guò)角色查詢(xún)到的權(quán)限的集合傳入前臺(tái)，通過(guò)

this.$refs.tree.setCheckedNodes(this.rolePermissions);
設(shè)置勾選節(jié)點(diǎn)

其他的大家可以自己去體會(huì)，如果完全了解的話(huà)，不管是怎么樣的數(shù)據(jù)結(jié)構(gòu)的樹(shù)形圖都會(huì)寫(xiě)

最后附上我的另一個(gè)通過(guò)用戶(hù)查詢(xún)角色權(quán)限的實(shí)現(xiàn)圖。

?

?