vue開發後臺管理系統有感

　　

使用vue開發後臺近一個月，今天終於完成得差很少了，期間也遇到不少的問題，因此利用如今的閒暇時間作個總結

使用element-ui基礎，此次使用了vue-element-admin(github地址)，一個後臺前端解決方案，雖然站在巨人的肩膀上，可是要改爲符合公司的後臺，改變也是巨大的

改變：

1.公司的登陸接口，把登陸者信息，角色，權限列表一次返回

2.我一再建議公司把菜單配置放在前端，可是最終仍是沒能說服他們，因此開始擼碼咯，這裏有個須要注意的就是

動態配置路由，不能這樣寫 component: import ('xx/xxx.vue')，因爲webapp沒有打包這些vue文件，component是空的

應該寫成component: componentArrray[componentUrl]

function getMenuTree(data, pid = 0) {
  let arr = []
  data.map(v => {
    if (v.path === '/home' || v.path === '/profile') return
    let path = '/' + v.component
    let redirect = (v.children && v.children.length && v.children[0].component) ? ('/' + v.children[0].component) : ''
    let component = pid === 0 ? Layout : (components[v.component] || RouterView)
    let name = v.component ? v.component : v.name
    let meta = {
      title: v.name,
      icon: v.icon
    }
    let obj = {
      path: path,
      component: component,
      name: name,
      meta: meta,
      children: []
    }
    if (redirect) {
      obj.redirect = redirect
    }
    if (v.children && v.children.length) {
      obj.children = getMenuTree(v.children, 1)
    }
    arr.push(obj)
  })
  return arr
}

components就是components.js export出來的，這個解決方案vue-element-admin issue也有提到

3.既然作了動態路由，就確定會使用到按鈕級權限

看起來很複雜，其實很簡單，後臺返回權限數組（覺得數組），長成這樣['menu;edit', 'menu:add'，這個數組是新增菜單的時候添加的，我想說明的是，前端作重要的權限認證便可，完整的權限認證應該在後臺作，由於前端作起來也很麻煩

真正的按鈕權限，就是控制按鈕的顯示和隱藏，首先咱們要知道這個按鈕是使用哪一個權限，這個很關鍵哦，要和後臺人才溝通好，沒有數據的鋪墊，是沒法作按鈕權限的，而後這樣寫 v-if="hasPermission('menu:add')" menu:add就是其中的一個權限，要改爲對應的權限

hasPermission方法也至關簡單：

function hasPermission(value) {
   const permissions = store.getters.permissions
   return permissions.includes(value)
}

store.getters.permissions是登陸的時候後臺返回的，你要保存在vuex中，能夠另外再提供一個接口來刷新權限列表，至此按鈕權限就完成了，就是這麼簡單，認真細緻一個一個加v-if便可

4.我以爲作後臺很難的一點就是，作一個複雜而且公用的詳情頁面，然而這個需求幾乎在全部公司都是必備的

這次，我選擇用彈出層來作，彈出層裏面大體有10個tab切換，涉及的頁面組件將近20個

1.要把row（row指的是選中的list的數據，row是一個對象）將其保存到vuex state，方便各位組件讀取row裏面的數組，

對象有一個好處，就是每次修改，都會觸發tab組件的watch row，若是是wath row裏面rowId的話，當點擊相同的列表，會致使沒法觸發watch，致使tab組件沒法經過watch調用接口

2.不要用keepalive，會致使watch row變化觸發時，全部的組件一塊兒被更新

3.組件難的就是組件的複用，其實實現的方法有不少，應當從體驗觸發

好比說多個組件，使用統一的loading，兄弟組件，數組之間的共享

 

5. 後臺前端用什麼來作緩存，到底使用js-cookie，仍是localStorage，sessionStorage

我推薦用js-cookie

爲何，cookie可多窗口共享，好比說我打開另外一個頁面，還能讀取到cookie，同時關閉瀏覽器，就會自動清除緩存

sessionStorage不能多窗口共享，只是在當前窗口使用， 從新打開一個新的窗口，發現要從新登陸，真的好奇葩，好難用，sessionStorage和localStorage更適合在手機上用，由於它是在一個窗口內運行的，不存在多窗口共享問題

localStorage雖然能夠多窗口共享，可是它的弊端不能設置過時時間，同時關閉瀏覽器，不會自動清除緩存，這個對於後臺安全來作很致命

6.逐漸花褲衩的這個後臺系統，其實不少地方須要改動，感受能夠重寫了（更新2019-8-22）

從router開始，應該要作成

[
  {
　    path: '/login',
      omponent: Login
  },
  {
　    path: ' '/',
       component: Layout,    
      children: [
        { path: 'system',  component: RouterView, children: [] },
        { path: 'test' }
      ]
  }
]
    

 

這樣就不會出現每一個菜單都指向Layout，這樣也能夠減小菜單配置必須設置成兩層，以下，我明明只要顯示控制檯一個菜單，可是必須寫成嵌套

持續更新ing