摘要：組件已經(jīng)有了，我們的框架還有哪些特性呢自適應(yīng)自適應(yīng)現(xiàn)在很多框架都沒(méi)有自適應(yīng)功能，而很多使用場(chǎng)景也在手機(jī)上會(huì)有，這也是后臺(tái)管理框架誕生的原因之一。

github地址：vue-framework-wz
線上體驗(yàn)地址：立即體驗(yàn)
?
?
《一步步帶你做vue后臺(tái)管理框架》第一課：介紹框架
《一步步帶你做vue后臺(tái)管理框架》第二課：上手使用
《一步步帶你做vue后臺(tái)管理框架》第三課：登錄功能
?

在如今的科技公司中有很多前端的需求都是要寫一個(gè)類似于后臺(tái)管理框架，日常的工作中會(huì)有太多重復(fù)的內(nèi)容加重我們程序員的工作，浪費(fèi)我們的時(shí)間，導(dǎo)致不能早點(diǎn)下班回家吃飯。

普通程序員拿到一個(gè)項(xiàng)目總是會(huì)重新寫，寫路由花了兩小時(shí)，寫vuex花了兩小時(shí)，寫個(gè)Header組件花了1小時(shí)，側(cè)邊欄又要1小時(shí)，這樣下來(lái)項(xiàng)目拿到手一天的時(shí)間都沒(méi)真正去做項(xiàng)目的需求，再加上改bug，寫css，準(zhǔn)備工作都要花三四天，等到產(chǎn)品過(guò)來(lái)催，還沒(méi)有真正去實(shí)現(xiàn)功能。這樣是極大的浪費(fèi)時(shí)間。
?
那么我們?cè)趺床拍艹蔀橐粋€(gè)高效率的程序員呢?
?
成功的秘籍就在于需要有一個(gè)自己的后臺(tái)管理框架，當(dāng)你拿到一個(gè)項(xiàng)目，所有的UI組件、路由、狀態(tài)管理、登錄鑒權(quán)功能、等等都已經(jīng)寫好，你只需要去復(fù)用代碼再加上少量的邏輯，當(dāng)你一個(gè)小時(shí)做完準(zhǔn)備工作，出去買杯咖啡回來(lái)看到你的同事還在苦逼的寫vue路由，你肯定會(huì)會(huì)心一笑：“框架在手，天下我有”。**

　　表格是我們工作中最常見(jiàn)的組件。就拿寫一個(gè)表格來(lái)舉例吧

?
?　　高下立判。傳統(tǒng)寫一個(gè)表格需要大量重復(fù)html，且需要自己寫css，自己定義數(shù)據(jù)渲染方式。效率低下且質(zhì)量不高，而我們的框架已經(jīng)定義好表格組件，只需要把注意力放在數(shù)據(jù)獲取上，工作瞬間輕松了很多。

?
　　　再來(lái)看下wz框架表格組件在實(shí)際應(yīng)用中的強(qiáng)大之處吧。

篩選數(shù)據(jù)，擴(kuò)展行，瞬間導(dǎo)出原始數(shù)據(jù)或排序后的數(shù)據(jù)等等強(qiáng)大的功能。

?我們的框架已經(jīng)定義好表格組件，上手即用，是不是又美觀又簡(jiǎn)單好用啊。

不止表格，還有各種你工作中會(huì)遇到的組件，輕松完成工作中出現(xiàn)的復(fù)雜需求。

UI組件已經(jīng)有了，我們的框架還有哪些特性呢？　

自適應(yīng)!!!現(xiàn)在很多vue框架都沒(méi)有自適應(yīng)功能，而很多使用場(chǎng)景也在手機(jī)上會(huì)有，這也是wz后臺(tái)管理框架誕生的原因之一。想想要自己每次做自適應(yīng)就頭疼，現(xiàn)在有了wz框架老板再也不用擔(dān)心我的界面適配問(wèn)題了。

?我們看下效果：
　　?

是不是很棒！wz框架基于超好用的開(kāi)源UI iview，采用了row和col的思想，Row為一行，Col為一列，配置Col 的sm md lg 等屬性就可以做到自適應(yīng)。
　　代碼如下例

?
?
還有什么令人激動(dòng)的特性呢？

莫過(guò)于登錄鑒權(quán)功能了！

產(chǎn)品要做登錄功能你把希望寄托于后端，后端不背鍋把鍋甩你身上？求人不如求己，wz框架已經(jīng)替你封裝好登錄鑒權(quán)，只需發(fā)送服務(wù)端驗(yàn)證一下用戶名密碼即可。

來(lái)看下我們炫酷的登錄界面

　 ?

炫酷狂拽吊炸天是不是。

邏輯就是登錄的時(shí)候輸入密碼存到cookie里，可以由個(gè)人選擇加密方式，每次在路由跳轉(zhuǎn)的時(shí)候利用router.beforeEach((to, from, next) 判斷是否有token，如果有，發(fā)送到服務(wù)端驗(yàn)證，如果通過(guò)，就繼續(xù)路由，如果沒(méi)有，就重定向到登錄界面，后面會(huì)用詳細(xì)的教程講一下。

鑒權(quán)也是一樣的道理，在router配置中加上　
meta: { role: ["Administrator"] }，在router.beforeEach（）中判斷要去的那個(gè)界面是否需要權(quán)限。并且側(cè)邊欄是根據(jù)可訪問(wèn)的路由動(dòng)態(tài)生成的，不同級(jí)別的用戶可以看到的側(cè)邊欄是不一樣的，這就在一定程度上做到了簡(jiǎn)單的權(quán)限管理的功能。

可以看一下這端代碼，就是登錄鑒權(quán)的核心。

router.beforeEach((to, from, next) => {
  // console.log(to)
  NProgress.start(); // 開(kāi)啟Progress
  if (store.getters.token) { // 判斷是否有token


            // alert("dont need login ");
           if (to.path === "/login") {
              next({ path: "/" });
            }  
             else {//如果不是去login 而是其他需要判定權(quán)限的
              // console.log(store.getters.roles)
              if (store.getters.roles.length === 0) { // 如果當(dāng)前用戶沒(méi)有拉取完user_info信息
                store.dispatch("GetInfo").then(res => { // 拉取user_info
                  const roles = res.data.role;
                  store.dispatch("GenerateRoutes", { roles }).then(() => { // 生成可訪問(wèn)的路由表
                    router.addRoutes(store.getters.addRouters) // 動(dòng)態(tài)添加可訪問(wèn)路由表
                    // console.log(store.getters.addRouters);
                    next({ ...to }); // hack方法 確保addRoutes已完成
                  })
                })
              } else {
                // 沒(méi)有動(dòng)態(tài)改變權(quán)限的需求可直接next() 刪除下方權(quán)限判斷 ↓
                if (hasPermission(store.getters.roles, to.meta.role)) {
                  // console.log(to.meta.role)
                  // console.log("has permission");
                  next();//
                } else {
                  // console.log("has no permission");

                  next({ path: "/", query: { noGoBack: true } });
                }
                // 可刪 ↑
              }
            }


  } else {
    if (whiteList.indexOf(to.path) !== -1) { // 在免登錄白名單，直接進(jìn)入
      next()
    } else {
      alert("please login");
      next("/login"); // 否則全部重定向到登錄頁(yè)
      NProgress.done(); // 在hash模式下 改變手動(dòng)改變hash 重定向回來(lái) 不會(huì)觸發(fā)afterEach 暫時(shí)hack方案 ps：history模式下無(wú)問(wèn)題，可刪除該行！
    }
  }
});
?```
　　
說(shuō)完特性，我們?cè)賮?lái)看看框架的目錄結(jié)構(gòu)。

build和config是webpack的配置文件，src中存放著框架的主要文件，api是已經(jīng)封裝好的api請(qǐng)求，components是我們的UI組件。mock是便于我們前端調(diào)試的一個(gè)工具，可以截獲http請(qǐng)求，返回?cái)?shù)據(jù)，從而做到獨(dú)立于后端開(kāi)發(fā)，加快我們的開(kāi)發(fā)進(jìn)度，當(dāng)我們需要請(qǐng)求服務(wù)器的時(shí)候要把這個(gè)文件夾刪掉。

我們需要新加頁(yè)面就在views里面加上新的界面文件，然后在router里配置好路由就可以正常訪問(wèn)了。

當(dāng)我們需要提交頁(yè)面放到服務(wù)器上也很簡(jiǎn)單，運(yùn)行

npm run build:prod

?
　　項(xiàng)目目錄下就會(huì)多出一個(gè)dist文件夾，里面有index.html文件和static文件夾，放在服務(wù)器上就行。不需要在服務(wù)器上安裝任何環(huán)境，甚至不需要node即可。

　　再也不用為發(fā)布項(xiàng)目操心了。

####項(xiàng)目目錄結(jié)構(gòu)

├── build // 構(gòu)建相關(guān)
├── config // 配置相關(guān)
├── src // 源代碼
│ ├── api // 所有請(qǐng)求
│ ├── components // 全局UI組件
│ ├── directives // 全局指令
│ ├── mock // mock數(shù)據(jù)
│ ├── router // 路由
│ ├── store // 全局store管理
│ ├── utils // 全局公用方法
│ ├── containers // 自適應(yīng)布局組合
│ ├── vendor // UI組件依賴js
│ ├── views // views界面
│ │ ├── charts //圖表組件
│ │ ├── components //首頁(yè)組件
│ │ ├── login //登錄界面
│ │ ├── pages //錯(cuò)誤界面
│ │ └── permission //權(quán)限測(cè)試界面
│ ├── App.vue // 入口頁(yè)面
│ └── main.js // 入口 加載組件 初始化等
├── static // 靜態(tài)資源
│ ├── bower_components //七牛SDK
│ ├── css //css
│ ├── js //js
│ └── Jquery.min.js // jq
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置項(xiàng)
├── .gitignore // git 忽略項(xiàng)
├── favicon.ico // favicon圖標(biāo)
├── index.html // html模板
└── package.json // package.json

?關(guān)于框架的介紹就基本是這些了，wz框架的特點(diǎn)就在于自適應(yīng)、登錄鑒權(quán)、封裝好UI組件、簡(jiǎn)單易上手、穩(wěn)定高效。
希望大家多多使用，多多宣傳。

 大家有什么問(wèn)題最好去我github提issues，文章評(píng)論評(píng)論較長(zhǎng)時(shí)間才查看一次。

?

**接下來(lái)的教程講一下封裝UI組件、router、webpack、node命令行構(gòu)建工具等內(nèi)容。**
**希望大家看了這系列教程都能制作出自己的前端框架，從而在工作中得心應(yīng)手。**

**如果喜歡就點(diǎn)個(gè)start鼓勵(lì)下作者吧。**
?
**github地址：[vue-framework-wz](https://github.com/herozhou/vue-framework-wz)**
**線上體驗(yàn)地址：[立即體驗(yàn)](http://herozhou.coding.me/vue-framework-wz/#/dashboard)**