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