一步步帶你作vue後臺管理框架(一)——介紹框架

系列教程《一步步帶你作vue後臺管理框架》第一課

github地址：vue-framework-wz
線上體驗地址：當即體驗
 
 
《一步步帶你作vue後臺管理框架》第一課：介紹框架
《一步步帶你作vue後臺管理框架》第二課：上手使用
《一步步帶你作vue後臺管理框架》第三課：登陸功能
 

簡介

在現在的科技公司中有不少前端的需求都是要寫一個相似於後臺管理框架，平常的工做中會有太多重複的內容加劇咱們程序員的工做，浪費咱們的時間，致使不能早點下班回家吃飯。

普通程序員拿到一個項目老是會從新寫，寫路由花了兩小時，寫vuex花了兩小時，寫個Header組件花了1小時，側邊欄又要1小時，這樣下來項目拿到手一天的時間都沒真正去作項目的需求，再加上改bug，寫css，準備工做都要花三四天，等到產品過來催，尚未真正去實現功能。這樣是極大的浪費時間。
 
那麼咱們怎麼才能成爲一個高效率的程序員呢?
 
成功的祕籍就在於須要有一個本身的後臺管理框架，當你拿到一個項目，全部的UI組件、路由、狀態管理、登陸鑑權功能、等等都已經寫好，你只須要去複用代碼再加上少許的邏輯，當你一個小時作完準備工做，出去買杯咖啡回來看到你的同事還在苦逼的寫vue路由，你確定會會心一笑：「框架在手，天下我有」。**

表格

　　表格是咱們工做中最多見的組件。就拿寫一個表格來舉例吧

 
 　　高下立判。傳統寫一個表格須要大量重複html，且須要本身寫css，本身定義數據渲染方式。效率低下且質量不高，而咱們的框架已經定義好表格組件，只須要把注意力放在數據獲取上，工做瞬間輕鬆了不少。

 
　　　再來看下wz框架表格組件在實際應用中的強大之處吧。

篩選數據，擴展行，瞬間導出原始數據或排序後的數據等等強大的功能。

 咱們的框架已經定義好表格組件，上手即用，是否是又美觀又簡單好用啊。

不止表格，還有各類你工做中會遇到的組件，輕鬆完成工做中出現的複雜需求。

UI組件已經有了，咱們的框架還有哪些特性呢？　

自適應

自適應!!!如今不少vue框架都沒有自適應功能，而不少使用場景也在手機上會有，這也是wz後臺管理框架誕生的緣由之一。想一想要本身每次作自適應就頭疼，如今有了wz框架老闆不再用擔憂個人界面適配問題了。

 咱們看下效果：
　　 

是否是很棒！wz框架基於超好用的開源UI iview，採用了row和col的思想，Row爲一行，Col爲一列，配置Col 的sm md lg 等屬性就能夠作到自適應。
　　代碼以下例

<Row>
     <Col :md="8" :sm="12" :lg="9"> 
    </Col>
</Row>

 
 
還有什麼使人激動的特性呢？

登陸鑑權

莫過於登陸鑑權功能了！

產品要作登陸功能你把但願寄託於後端，後端不背鍋把鍋甩你身上？求人不如求己，wz框架已經替你封裝好登陸鑑權，只需發送服務端驗證一下用戶名密碼便可。

來看下咱們炫酷的登陸界面

　  

炫酷狂拽吊炸天是否是。

邏輯就是登陸的時候輸入密碼存到cookie裏，能夠由我的選擇加密方式，每次在路由跳轉的時候利用router.beforeEach((to, from, next) 判斷是否有token，若是有，發送到服務端驗證，若是經過，就繼續路由，若是沒有，就重定向到登陸界面，後面會用詳細的教程講一下。

鑑權也是同樣的道理，在router配置中加上　
meta: { role: ['Administrator'] }，在router.beforeEach（）中判斷要去的那個界面是否須要權限。而且側邊欄是根據可訪問的路由動態生成的，不一樣級別的用戶能夠看到的側邊欄是不同的，這就在必定程度上作到了簡單的權限管理的功能。

能夠看一下這端代碼，就是登陸鑑權的核心。

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


            // alert('dont need login ');
           if (to.path === '/login') {
              next({ path: '/' });
            }  
             else {//若是不是去login 而是其餘須要斷定權限的
              // console.log(store.getters.roles)
              if (store.getters.roles.length === 0) { // 若是當前用戶沒有拉取完user_info信息
                store.dispatch('GetInfo').then(res => { // 拉取user_info
                  const roles = res.data.role;
                  store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可訪問的路由表
                    router.addRoutes(store.getters.addRouters) // 動態添加可訪問路由表
                    // console.log(store.getters.addRouters);
                    next({ ...to }); // hack方法 確保addRoutes已完成
                  })
                })
              } else {
                // 沒有動態改變權限的需求可直接next() 刪除下方權限判斷 ↓
                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) { // 在免登陸白名單，直接進入
      next()
    } else {
      alert('please login');
      next('/login'); // 不然所有重定向到登陸頁
      NProgress.done(); // 在hash模式下 改變手動改變hash 重定向回來 不會觸發afterEach 暫時hack方案 ps：history模式下無問題，可刪除該行！
    }
  }
});
 ```
　　
說完特性，咱們再來看看框架的目錄結構。

build和config是webpack的配置文件，src中存放着框架的主要文件，api是已經封裝好的api請求，components是咱們的UI組件。mock是便於咱們前端調試的一個工具，能夠截獲http請求，返回數據，從而作到獨立於後端開發，加快咱們的開發進度，當咱們須要請求服務器的時候要把這個文件夾刪掉。

咱們須要新加頁面就在views裏面加上新的界面文件，而後在router裏配置好路由就能夠正常訪問了。

當咱們須要提交頁面放到服務器上也很簡單，運行

npm run build:prod

 
　　項目目錄下就會多出一個dist文件夾，裏面有index.html文件和static文件夾，放在服務器上就行。不須要在服務器上安裝任何環境，甚至不須要node便可。

　　不再用爲發佈項目操心了。

####項目目錄結構

├── build // 構建相關
├── config // 配置相關
├── src // 源代碼
│ ├── api // 全部請求
│ ├── components // 全局UI組件
│ ├── directives // 全局指令
│ ├── mock // mock數據
│ ├── router // 路由
│ ├── store // 全局store管理
│ ├── utils // 全局公用方法
│ ├── containers // 自適應佈局組合
│ ├── vendor // UI組件依賴js
│ ├── views // views界面
│ │ ├── charts //圖表組件
│ │ ├── components //首頁組件
│ │ ├── login //登陸界面
│ │ ├── pages //錯誤界面
│ │ └── permission //權限測試界面
│ ├── App.vue // 入口頁面
│ └── main.js // 入口 加載組件 初始化等
├── static // 靜態資源
│ ├── bower_components //七牛SDK
│ ├── css //css
│ ├── js //js
│ └── Jquery.min.js // jq
├── .babelrc // babel-loader 配置
├── eslintrc.js // eslint 配置項
├── .gitignore // git 忽略項
├── favicon.ico // favicon圖標
├── index.html // html模板
└── package.json // package.json

 關於框架的介紹就基本是這些了，wz框架的特色就在於自適應、登陸鑑權、封裝好UI組件、簡單易上手、穩定高效。
但願你們多多使用，多多宣傳。

 你們有什麼問題最好去我github提issues，文章評論評論較長時間才查看一次。

 

**接下來的教程講一下封裝UI組件、router、webpack、node命令行構建工具等內容。**
**但願你們看了這系列教程都能製做出本身的前端框架，從而在工做中駕輕就熟。**

**若是喜歡就點個start鼓勵下做者吧。**
 
**github地址：[vue-framework-wz](https://github.com/herozhou/vue-framework-wz)**
**線上體驗地址：[當即體驗](http://herozhou.coding.me/vue-framework-wz/#/dashboard)**