前端利用vue-element-admin搭建流程總結

本文轉載自查看原文 2022-01-29 16:39 945 項目筆記

參考鏈接：
權限：
- 新增頁面
- 添加mock的交互連接
前端跨域問題：

參考鏈接：

https://juejin.cn/post/6844903476661583880

https://panjiachen.gitee.io/vue-element-admin-site/zh/

https://element.eleme.cn/#/zh-CN/

login登錄通過調用vuex的登錄方法，把一些cookie權限之類的全局變量放置到vuex里，登錄之后跳轉到/dashboard（會重定向到/home）頁面，（登錄成功后，服務端會返回一個 token（該token的是一個能唯一標示用戶身份的一個key），之后我們將token存儲在本地cookie之中，這樣下次打開頁面或者刷新頁面的時候能記住用戶的登錄狀態，不用再去登錄頁面重新登錄了。）

在路由index.js（在vue-admin-template里是在permission.js里）里的router.beforeEach((to, from, next) => {方法中判斷調用loadMenus方法實現動態路由，拉取菜單，在里邊調用buildMenus方法傳遞到后台獲取數據庫的數據，buildMenus方法從/api/system/menu.js里獲取，獲取數據庫數據之后，調用vuex里的GenerateRoutes方法添加動態路由，調用vuex里的SetSidebarRouters方法添加菜單

從后台獲取的數據：

SELECT m.* FROM sys_menu m, sys_roles_menus r WHERE " +
        "m.menu_id = r.menu_id AND r.role_id IN ?1 AND type != ?2 order by m.menu_sort asc
        
SELECT m.* FROM sys_menu m, sys_roles_menus r WHERE m.menu_id = r.menu_id AND r.role_id IN (1) AND type != 2 order by m.menu_sort asc

在buildTree方法里把從數據庫獲取的原始菜單數據改造成按照父子關系構成的樹形菜單

頁面布局在layout文件夾的index.vue里，總體布局如下：

左邊是sidebar組件，里邊獲取動態菜單；右邊包括上中結構：上邊是navbar（包括項目文檔，全屏縮放，布局設置等按鈕）和TagsView（不同頁面的tab標簽），中間是AppMain,該組件配置router-view不同頁面都是跳轉到這里的，下邊提供footer頁面；

在 app-main 外部包了一層 keep-alive 主要是為了緩存 <router-view> 的，配合頁面的 tabs-view 標簽導航使用，如不需要可自行去除。

權限：

這里的代碼說白了就是干了一件事，通過用戶的權限和之前在router.js里面asyncRouterMap的每一個頁面所需要的權限做匹配，最后返回一個該用戶能夠訪問路由有哪些。

問為什么自己的側邊欄不能跟着自己的路由高亮，其實很簡單，element-ui官方已經給了default-active所以我們只要

:default-active="$route.path" 將default-active一直指向當前路由就可以了，就是這么簡單

如果你不想使用mock-server的話只要在vue.config.js中移除webpack-dev-server中proxy和after這個Middleware就可以了。

現在默認情況下本地的請求會代理到http://localhost:${port}/mock下，如果你想調整為自己的 mock 地址可以修改 proxy

  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    // before: require('./mock/mock-server.js'),
    proxy: {
      '/api': {
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true,
        pathRewrite: {
          '^/api': 'api'
        }
      },
      '/auth': {
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true,
        pathRewrite: {
          '^/auth': 'auth'
        }
      }
    }，
    after: require('./mock/mock-server.js')
  },

在.env.development中更改VUE_APP_BASE_API：

# just a flag

ENV = 'development'

# base api

VUE_APP_BASE_API = 'http://localhost:8000'

標簽是Vue框架自定義的標簽，它的用途就是可以動態綁定我們的組件，根據數據的不同更換不同的組件

比如在dashboard里的代碼：