一蜜自、前情回顧

哈嘍大家好，在這個(gè)歡慶的日子里司澎，老張祝大家工作都能蒸蒸日上欺缘！今天正好也是社團(tuán)成立的第一天，我也是希望今天能是個(gè)紀(jì)念日挤安，沾沾這個(gè)大喜慶谚殊！

更新:

這篇文章得到張善友，張隊(duì)的閱讀蛤铜，并提供了另一個(gè)方案嫩絮，大家可以看看，也是不錯(cuò)的围肥。

地址: https://mp.weixin.qq.com/s/CCGANQ5i0Ainq3jcSt7k4A

放假這兩天剿干，倒是學(xué)到了很多東西，我這個(gè)也是承認(rèn)的穆刻，昨天的事務(wù)提交怨愤，今天的按鈕級(jí)別的權(quán)限，都是群里小伙伴提供的方案和思路蛹批，我就是誠(chéng)惶誠(chéng)恐的寫到文章里了撰洗，我總怕會(huì)說(shuō)我是知識(shí)的偷盜者篮愉，當(dāng)然我這個(gè)完全是為了社區(qū)，我畢竟一分錢沒(méi)有得到差导，無(wú)論訪問(wèn)量有多少试躏，可能充其量就是數(shù)字好看。

言歸正傳设褐，還記得半年前(2019.02.27)的時(shí)候颠蕴，我的 vue 項(xiàng)目之二：Blog.Admin 正式開(kāi)源（https://github.com/anjoy8/Blog.Admin），當(dāng)時(shí)打算做一個(gè)簡(jiǎn)單的權(quán)限后臺(tái)系統(tǒng)助析，我自己想了常用的一些功能犀被，當(dāng)然有人說(shuō)丑，有人說(shuō)亂外冀，但是也有人在自己項(xiàng)目和公司中使用寡键，不過(guò)也是我付出心血的，而且也是完美的配合了 Blog.Core 項(xiàng)目雪隧，當(dāng)時(shí)幾大設(shè)想功能中西轩，遲遲有一個(gè)功能沒(méi)有實(shí)現(xiàn)，擱置了很久 —— 就是按鈕級(jí)別的權(quán)限配置：

image

當(dāng)時(shí)我為啥沒(méi)有做這個(gè)呢脑沿，有兩點(diǎn)考慮藕畔，1、是因?yàn)槌?jí)管理員我沒(méi)讓大家訪問(wèn)庄拇，就怕誤操作數(shù)據(jù)注服，對(duì)別人觀看權(quán)限有影響；2措近、另一個(gè)考慮祠汇，就是想把按鈕暴漏出來(lái)，看看是不是真的 test 測(cè)試賬號(hào)能不能刪除數(shù)據(jù)熄诡。后來(lái)我就開(kāi)始思考，是時(shí)候把這個(gè)權(quán)限加進(jìn)來(lái)了诗力，就是沒(méi)有刪除的權(quán)限凰浮，刪除按鈕就不顯示，但是考慮了很久苇本，被一個(gè)小知識(shí)點(diǎn)給卡住了袜茧，就是沒(méi)有想到如何動(dòng)態(tài)事件綁定，這個(gè)不懂沒(méi)關(guān)系瓣窄，我下文章會(huì)說(shuō)到笛厦，前天由群管理 @大黃瓜和@Kawhi 提供了解決思路和方案，眼前一亮俺夕，終于實(shí)現(xiàn)了這個(gè)功能裳凸。

投稿作者：@大黃瓜 and @Kawhi贱鄙；

效果預(yù)覽：我為了防止大改，目前只在 “角色管理” 頁(yè)姨谷，增加了這個(gè)功能逗宁，后期全部替換；

在線地址：http://vueadmin.neters.club

Github分支：主分支梦湘；

Tips ： 目前我依然沒(méi)有開(kāi)放 Admin 權(quán)限瞎颗，所以如果想看全部效果，可以下載本地捌议，自行配置查看哼拔。

image

下邊就開(kāi)始正式講解，分成了兩部分瓣颅，步驟+重點(diǎn)知識(shí)說(shuō)明倦逐，所以看步驟的時(shí)候，直接動(dòng)手操作就行了弄捕，不用管為什么僻孝，下邊的第三部分——重點(diǎn)知識(shí)的說(shuō)明，會(huì)簡(jiǎn)單說(shuō)說(shuō)守谓。

二穿铆、詳細(xì)設(shè)計(jì)步驟

1、后端微調(diào)斋荞，保存按鈕相關(guān)信息

不知道還有沒(méi)有小伙伴記得荞雏，我現(xiàn)在后臺(tái)的權(quán)限系統(tǒng)中，左側(cè)的導(dǎo)航條已經(jīng)自動(dòng)化了平酿，所謂的自動(dòng)化凤优，就是已經(jīng)完全交給了數(shù)據(jù)庫(kù)，無(wú)論增加多少權(quán)限蜈彼，不用前端或者后端進(jìn)行操作筑辨，只需要配置即可達(dá)到目的，當(dāng)時(shí)呢幸逆，我把左側(cè)的菜單和按鈕揉到了一張表里棍辕，當(dāng)時(shí)感覺(jué)很不合理，但是現(xiàn)在又改起來(lái)簡(jiǎn)單还绘，得益于這個(gè)設(shè)計(jì)思路楚昭，所以這次我們幾乎不用改什么，只需要把按鈕信息給放出來(lái)即可拍顷，這里有兩個(gè)小點(diǎn)：

1抚太、Permission.cs 菜單表中，新建字段 Func ，用來(lái)存放當(dāng)前按鈕所對(duì)應(yīng)的方法事件尿贫；

2电媳、/Permission/GetNavigationBar 接口中，把 IsButton==false 限制去掉帅霜，使之可以配合菜單進(jìn)行遞歸匆背；

//var rolePermissionMoudles = (await _permissionServices.Query(d => pids.Contains(d.Id) && d.IsButton == false)).OrderBy(c => c.OrderSort);
>  var rolePermissionMoudles = (await _permissionServices.Query(d => pids.Contains(d.Id))).OrderBy(c => c.OrderSort);

3、在 RecursionHelper.cs 中身冀，增加 IsButton 屬性钝尸，將數(shù)據(jù)庫(kù)數(shù)據(jù)，拼車 Tree 返回到前端搂根；

這樣我們就把按鈕數(shù)據(jù)配合著菜單數(shù)據(jù)一起返回前端了珍促，你可以來(lái)查看下：

image

到這里，我們第一部分——后端數(shù)據(jù)就完成了剩愧，當(dāng)然猪叙，如果你想更炫酷，可以多增加字段仁卷，比如按鈕的樣式穴翩，或者其他屬性等等等，這里你肯定明白锦积，我就不細(xì)說(shuō)了芒帕。

從下邊開(kāi)始，我們就開(kāi)始說(shuō) Blog.Admin 項(xiàng)目了丰介，請(qǐng)打開(kāi) VSCode 背蟆，來(lái)修改我們的 Vue 項(xiàng)目：

2、修改后臺(tái)權(quán)限管理哮幢，添加按鈕事件

這個(gè)步驟很簡(jiǎn)單带膀，就是把上邊我們建立的那個(gè) Func 字段，給在頁(yè)面里增刪改查一下就好了橙垢，具體的代碼自行修改即可垛叨。

image

3、控制“按鈕”不要和“菜單”展示沖突

剛剛我們上邊說(shuō)到了柜某，把按鈕數(shù)據(jù)配合著菜單一起開(kāi)放了出來(lái)嗽元，那這個(gè)時(shí)候我們要需要檢查一下，不能和菜單的展示起沖突莺琳，這里我就直接說(shuō)修改的地方了：

1、修改 Sidebar.vue 組件载慈，讓按鈕的數(shù)據(jù)不要進(jìn)行展示惭等，具體的看看代碼就明白了，很簡(jiǎn)單办铡；

2辞做、修改 src\router\index.js 中的動(dòng)態(tài)路由注入方法琳要，過(guò)濾掉按鈕數(shù)據(jù)；

image

到了這里秤茅，我們的第二部分——準(zhǔn)備工作就做完了稚补，接下來(lái)，就是本文的重中之重的重頭戲框喳，設(shè)計(jì)這個(gè)工具欄了课幕，那具體怎么操作，這個(gè)時(shí)候我希望你可以先暫停一下五垮，先不要往下看乍惊，先自己腦中考慮一下，按照我的思路放仗，就是按鈕數(shù)據(jù)也已經(jīng)有了润绎，如何設(shè)計(jì)這個(gè)公共組件呢？考慮五分鐘吧......

五分鐘后诞挨，假設(shè)你已經(jīng)考慮過(guò)了莉撇，那我就開(kāi)始正式說(shuō)明。

4惶傻、設(shè)計(jì)工具欄組件——Toolbar.vue

既然要做成自動(dòng)化的組件棍郎，就一定要抽象出來(lái)，那第一步就是建立一個(gè)組件达罗，不能每個(gè)頁(yè)面都寫相似的一堆代碼坝撑；

其實(shí)呢，我們也要可以配置粮揉，不能僅僅把按鈕給提出來(lái)巡李，還應(yīng)該有其他的比如<input />搜索框等等，都應(yīng)該放到工具欄里扶认；

一定要加載或者不加載侨拦，不能show or hide，這樣別人也會(huì)在查看元素的時(shí)候辐宾，看到狱从；

綜上所述 ，我的設(shè)計(jì)是把表格里的按鈕叠纹，全部提到了頂部季研，先給大家一個(gè)展示的效果圖，這個(gè)刪除顏色是我手動(dòng)加的誉察，你也可以自己加個(gè)字段配置：

image

首先我們創(chuàng)建組件与涡，src\components\Toolbar.vue ，具體的代碼如下：

<template>
  <el-col v-if="buttonList.length>0" :span="24" class="toolbar" style="padding-bottom: 0px;">
    <el-form :inline="true" @submit.native.prevent>
      <el-form-item>
        <el-input v-model="searchVal" placeholder="請(qǐng)輸入內(nèi)容"></el-input>
      </el-form-item>
      <!-- 這個(gè)就是當(dāng)前頁(yè)面內(nèi)，所有的btn列表 -->
      <el-form-item v-for="item in buttonList">
        <!-- 這里觸發(fā)點(diǎn)擊事件 -->
        <el-button type="primary" @click="**callFunc**(item)">{{item.name}}</el-button>
      </el-form-item>
    </el-form>
  </el-col>
</template>
<script> export default {
  name: "Toolbar",
  data() { return {
      searchVal: "" //雙向綁定搜索內(nèi)容
 };
  },
  props: ["buttonList"], //接受父組件傳值
 methods: {
    **callFunc**(item) {
      item.search = this.searchVal; this.$emit("callFunction", item); //將值傳給父組件
 }
  }
}; </script>

相信每個(gè)人都能看的懂驼卖，只是字面意思能看得懂氨肌，其中的核心知識(shí)點(diǎn)就是 List for渲染，父給子傳值酌畜，子給父?jìng)髦翟跚簦蚁挛臅?huì)重點(diǎn)講到，其中 buttonList 數(shù)組的格式桥胞，很簡(jiǎn)單恳守，你可以自己后端封裝一下，我這里就偷懶了埠戳，直接使用的菜單的數(shù)據(jù)結(jié)果井誉，就是上邊我 localstorage.routes 中的結(jié)構(gòu)，畢竟我把按鈕和菜單共有一套嘛整胃。

那現(xiàn)在我們?cè)O(shè)計(jì)好了子組件——工具欄颗圣，接下來(lái)就要設(shè)計(jì)父組件了，傳遞數(shù)據(jù)和接受子組件廣播了屁使。

5在岂、將按鈕事件綁定到組件上

剛剛我們說(shuō)到了 ，在 Toolbar.vue 中蛮寂，核心的內(nèi)容蔽午，就是把動(dòng)態(tài)的事件方法給推送到一個(gè)個(gè)父組件上，這里是以 Role.vue 頁(yè)面舉例的酬蹋，所有用到了 $emit("callFunction", item) 方法及老，這個(gè)如果你開(kāi)發(fā)vue的話，肯定都知道這個(gè)的范抓，這個(gè)父子通訊實(shí)例中骄恶，使用很多，具體的我在之前的文中中匕垫，也講到了僧鲁，你可以看看，這里不細(xì)說(shuō)象泵，說(shuō)白了一句話寞秃，就是子組件執(zhí)行父組件方法。二十║Vue基礎(chǔ)終篇：傳值+組件+項(xiàng)目說(shuō)明偶惠。其實(shí)到這個(gè)地方春寿，我也想到了绑改，但是問(wèn)題來(lái)了：你可以先看看 emit 的用法馋缅，使用 emit 一般都是傳遞數(shù)據(jù)，但是如果傳遞 function 的話绢淀，肯定也是一個(gè) name 的字符串，那父組件接受到這個(gè) function name 的時(shí)候瘾腰，很容易當(dāng)成一個(gè) data皆的，如果強(qiáng)行執(zhí)行，他們又不在一個(gè)對(duì)象里蹋盆，因?yàn)橛虚]包费薄，如何讓頁(yè)面執(zhí)行這個(gè) function 呢？我思考了很久（說(shuō)明自己學(xué)的不到家）栖雾。

這個(gè)就是這兩個(gè)月來(lái)困擾我的地方楞抡，前邊的思路和后邊的 Table 隔離我都想到了，只是這里我沒(méi)有想到析藕，看來(lái)還是需要一些高級(jí)前端的朋友喲召廷，前天聽(tīng)到了一個(gè) apply 方法后，我豁然開(kāi)朗账胧，原來(lái)可以這樣竞慢，那下邊我就詳細(xì)的說(shuō)一說(shuō)，如何父組件執(zhí)行事件：

在 src\views\User\Roles.vue 頁(yè)面呢治泥，修改我們的工具欄使用：

image

這種引用組件筹煮，在data中，定義 buttonList 居夹，就不說(shuō)败潦，重點(diǎn)還是要理解 @callFunction 這個(gè)必須要和子組件的 $emit 中的方法名一致。然后我們定義 callFunction准脂，用來(lái)動(dòng)態(tài)執(zhí)行一個(gè)個(gè)事件：

 callFunction(item) {//這個(gè) item 就是我們的 permission.cs 數(shù)據(jù) this.filters = {
        name: item.search
      };//這里是把子組件中的 search 內(nèi)容劫扒，也接受過(guò)來(lái) this[item.Func].apply(this, item);//核心就是要執(zhí)行 apply 方法
    },

是不是很簡(jiǎn)單，難點(diǎn)就在于意狠，.apply（）這個(gè)方法剂公，下文會(huì)說(shuō)到窘奏。這個(gè) this ，就是當(dāng)然父組件的內(nèi)容，就是我們執(zhí)行可以在子組件來(lái)調(diào)用父組件的方法了

image

這里再說(shuō)下

6粮呢、父組件獲取 ButtonList 數(shù)據(jù)

上邊我們也說(shuō)到了戏溺，我們把 button 和 菜單揉在一起了县遣，所以我們很簡(jiǎn)單操作一下之前的數(shù)據(jù)就行，做一下篩選：

  // 在 mounted 鉤子中其兴，調(diào)用 router
   let routers = window.localStorage.router ? JSON.parse(window.localStorage.router)
      : []; this.getButtonList(routers); // 定義方法元旬，目的我為了遞歸
 getButtonList(routers) {
      let _this = this;
      routers.forEach(element => {
        let path = this.$route.path.toLowerCase(); if (element.path && element.path.toLowerCase() == path) {
          _this.buttonList = element.children; return;
        } else if (element.children) {
          _this.getButtonList(element.children);
        }
      });
    }

OK匀归，數(shù)據(jù)準(zhǔn)備完畢穆端。

7仿便、修改 Table 組件嗽仪，將工具欄與 Table 邏輯隔離

到了這里就是最后一步了钦幔，我們把之前的 tabel 右側(cè) “操作欄” 刪掉鲤氢，統(tǒng)一放到頂部卷玉，然后綁定數(shù)據(jù)，就可以加載出來(lái)了威恼，

image

現(xiàn)在我們把操作欄給取消了，但是我們?nèi)绾潍@取 scope.row 呢衬潦？是不是很麻煩镀岛，要修改很多呢，其實(shí)不是的驾锰。

8艾猜、Table 改為單選捻悯，通過(guò)點(diǎn)擊今缚，選擇某行

這個(gè)功能特別簡(jiǎn)單姓言，思路就是通過(guò)單擊某一行何荚，來(lái)獲取這個(gè) table 的 row餐塘，這個(gè) element 官網(wǎng)寫的很詳細(xì)戒傻，我就簡(jiǎn)單的說(shuō)一下吧：

   //觸發(fā)事件需纳，獲取到這個(gè)row
 selectCurrentRow(val) { this.currentRow = val;
    }, <!--列表-->
    <el-table
      :data="users" highlight-current-row
      v-loading="listLoading" @current-change="selectCurrentRow" style="width: 100%;"
    >

然后只需要簡(jiǎn)單的修改一下我們的 edit 和 delete 方法即可不翩，因?yàn)槲覀円呀?jīng)拿到了這個(gè) row：

image

如果不選中某項(xiàng)，會(huì)彈出警告：

image

搞定啦亚皂！是不是很簡(jiǎn)單灭必，幾乎沒(méi)有修改什么，感覺(jué)之前設(shè)計(jì)的方案還可以吧禁漓，至少擴(kuò)展還是很不錯(cuò)的播歼！

到了這里秘狞，我們的動(dòng)態(tài)按鈕權(quán)限功能雇初，就已經(jīng)完全做完了减响，一個(gè)八個(gè)步驟刊橘，大家動(dòng)手起來(lái)颂鸿，搞一搞吧绞愚。

三位衩、重點(diǎn)知識(shí)解析

1糖驴、組件 ——子傳父 & 父?jìng)髯?/h3>

這塊內(nèi)容呢贮缕，其實(shí)我們都已經(jīng)講過(guò)很多遍了，父?jìng)髯雍芎?jiǎn)單罐脊，只需要定一個(gè)自定屬性即可，然后子組件接受凌简，比如上文中的：

 <toolbar :buttonList="buttonList" @callFunction="callFunction"></toolbar> name: "Toolbar",
  data() { return {
      searchVal: "" //雙向綁定搜索內(nèi)容
 };
  },
  props: ["buttonList"], //接受父組件傳值

比較復(fù)雜的就是 子傳父 了雏搂，重點(diǎn)還是要了解一些 $emit 這個(gè)api凸郑，二十║Vue基礎(chǔ)終篇：傳值+組件+項(xiàng)目說(shuō)明 我這篇文章寫的還算是詳細(xì)，如果還是不懂芙沥，咱們?cè)僖粚?duì)一討論吧。

2卿捎、動(dòng)態(tài)事件綁定—— apply

這個(gè)apply 有點(diǎn)兒想 call 回調(diào)函數(shù)，首先底桂，每個(gè)函數(shù)都包含兩個(gè)非繼承而來(lái)的方法：.apply()和 .call()籽懦。這兩個(gè)方法的用途都是在特定的作用域中調(diào)用函數(shù)暮顺，實(shí)際等于設(shè)置函數(shù)體內(nèi)this對(duì)象的值。

這兩個(gè)方法接收的參數(shù)可以分為兩個(gè)部分惫恼，

第一部分是在其中運(yùn)行函數(shù)的作用域令宿，如果就在當(dāng)前函數(shù)體中運(yùn)行掀淘，就可以直接使用this值革娄，如果在window作用域中使用拦惋，可以傳入window值，這樣安寺，可以實(shí)現(xiàn)擴(kuò)充作用域厕妖；

第二部分是參數(shù)組，在apply中可以傳入Array實(shí)例挑庶，也可以是arguments對(duì)象言秸；在call中，傳遞給函數(shù)的參數(shù)必須逐個(gè)列舉迎捺；如果沒(méi)有參數(shù)举畸，這個(gè)部分可以省略。

首先我們來(lái)看看網(wǎng)上apply()方法的定義:

1. apply()方法能劫持另外一個(gè)對(duì)象的方法凳枝，繼承另外一個(gè)對(duì)象的屬性

2.Function.apply(obj,args)方法能接收兩個(gè)參數(shù)

3.obj：這個(gè)對(duì)象將代替Function類里this對(duì)象

4.args：這個(gè)是數(shù)組岖瑰，它將作為參數(shù)傳給Function（args–>arguments）

舉個(gè)例子露戒，如下所示：

function sum(num1,num2){ return num1+num2;
} //兩個(gè)數(shù)相等就相加,不相等就相乘
function mul(num1,num2){ if(num1 != num2){ return num1*num2;
  }else{ return sum.apply(this,arguments); //可以為 sum.apply(this,[num1,num2])或sum.call(this,num1,num2);
 }
}

console.log(mul(5,6));   //30
console.log(mul(6,6));   //12

說(shuō)句簡(jiǎn)單的谦炬，我認(rèn)為就是在其他地方，去調(diào)用某一個(gè)方法赔桌，很重要的一個(gè)點(diǎn)雪位，就是 this 這個(gè)到底指向什么，自己可以好好調(diào)調(diào)。

3锈颗、動(dòng)態(tài)路由過(guò)濾—— addRoutes

這個(gè)在上邊的步驟里我沒(méi)有說(shuō)到覆醇，是因?yàn)槲覀儼?按鈕 給放出來(lái)以后常摧，在動(dòng)態(tài)菜單路由的時(shí)候，會(huì)出現(xiàn)重復(fù)的問(wèn)題，所以我們就需要坐下過(guò)濾在跳，注意這個(gè)不是錯(cuò)誤齐帚，是警告，意思就是我們把一些重復(fù)的東西添加到路由里了，路由會(huì)忽略掉岸梨，只不過(guò)給大家一個(gè) warm 而已赃份。

image

所以呢渺蒿，我做了一個(gè)過(guò)濾，封裝了下 route.addRoutes——在 src\router\index.js 中屋摇，我們過(guò)濾下重復(fù)路由畸颅，還是遞歸：

router.$addRoutes = (params) => { var f = item => { if (item['children']) {
            item['children'] = item['children'].filter(f); return true;
        } else if (item['IsButton']) { return item['IsButton']===false;
        } else { return true;
        }

    } var paramsFilt = params.filter(f);

    router.addRoutes(paramsFilt)
}

然后咋其他的地方，將 router.addRoutes 統(tǒng)一都換成 router.$addRoutes 。但是這個(gè)目前還有一些小問(wèn)題胚鸯，我會(huì)后期繼續(xù)優(yōu)化坦冠。

四、Github && Gitee

Core： https://github.com/anjoy8/Blog.Core

Vue： https://github.com/anjoy8/Blog.Admin