後臺前端基礎框架搭建

     自從阿里的中臺架構開始流行以及toC應用人口紅利不在，前端這個崗位似乎更多的偏向toB方向，樓主本人最近一年已經很少可以接觸到toC的應用了。toB的應用相信大家都已經是前後端分離了。要麼是react，要麼就是vue。兩大主流框架已經是前端必備，如果還不會至少其中之一，估計已經找不到工作了。本文是基於vue來給大家講解一個簡單的後端基礎框架搭建。

    首先我們使用來餓了麼開源的element-ui，使用了vue-cli生成了基礎的目錄結構。

    

目錄結構建立好後我們就可以開始程式設計了。

等等，還不知道具體做什麼東西呢，沒有規劃就動手可是致命的。所以我們先看下圖：

我們要做的就是圖上左側的動態選單。

怎麼實現動態選單呢？我們知道vue-router中，我們是可以用

this.$router.options.routes

來獲取vue-router的路由配置項的，我們接下來主要就是來處理這個routes。

給大家寫下我的路由配置routes的內容，至於相應的元件配置檔案請自行建立，避免報錯

[{path: "/user",redirect: "/user/login",hideInMenu: true,component: () =>import(/* webpackChunkName: "Login" */ "@/layouts/UserLayout.vue"),children: [{path: "login",name: "login",component: () =>import(/* webpackChunkName: "Login" */ "@/views/User/Login.vue")},{path: "register",name: "register",component: () =>import(/* webpackChunkName:"Register"*/ "@/views/User/Register.vue")}]},{path: "/",meta: { authority: ["user", "admin"] },component: () =>import(/* webpackChunkName: "BasicLayout" */ "@/layouts/BasicLayout"),children: [// dashboard{path: "/",redirect: "/dashboard/analysis"},{path: "/dashboard",name: "dashboard",meta: { icon: "dashboard", title: "儀表盤" },component: { render: h => h("router-view") },children: [{path: "/dashboard/analysis",name: "analysis",meta: { title: "分析頁" },component: () =>import(/* webpackChunkName: "Analysis" */ "@/views/Dashboard/Analysis")}]},// form{path: "/form",name: "form",component: { render: h => h("router-view") },meta: { icon: "form", title: "表單", authority: ["admin"] },children: [{path: "/form/basic-form",name: "basicform",meta: { title: "基礎表單" },component: () =>import(/* webpackChunkName: "BasicForm" */ "@/views/Forms/BasicForm")},{path: "/form/step-form",name: "stepform",meta: { title: "分步表單" },hideChildrenInMenu: true,component: () =>import(/* webpackChunkName: "StepForm" */ "@/views/Forms/StepForm/"),children: [{path: "/form/step-form",redirect: "/form/step-form/info"},{path: "/form/step-form/info",name: "info",meta: { title: "基礎表單info" },component: () =>import(/* webpackChunkName: "Step1" */ "@/views/Forms/StepForm/Step1")},{path: "/form/step-form/confirm",name: "confirm",meta: { title: "基礎表單confirm" },component: () =>import(/* webpackChunkName: "Step2" */ "@/views/Forms/StepForm/Step2")},{path: "/form/step-form/result",name: "result",meta: { title: "基礎表單result" },component: () =>import(/* webpackChunkName: "Step3" */ "@/views/Forms/StepForm/Step3")}]}]},// Exception{path: "/exception",name: "exception",component: { render: h => h("router-view") },redirect: "/exception/403",meta: { title: "異常頁", icon: "warning", authority: ["admin"] },children: [{path: "/exception/403",name: "exception403",component: () =>import(/* webpackChunkName: "403" */ "@/views/Exception/403"),meta: { title: "403" }},{path: "/exception/404",name: "exception404",component: () =>import(/* webpackChunkName: "404" */ "@/views/Exception/404"),meta: { title: "404" }},{path: "/exception/500",name: "exception500",component: () =>import(/* webpackChunkName: "500" */ "@/views/Exception/500"),meta: { title: "500" }}]},// Profile{path: "/profile",name: "profile",component: { render: h => h("router-view") },redirect: "/profile/basic",meta: { title: "詳情頁", icon: "profile", authority: ["user"] },children: [{path: "/profile/basic",name: "basic",component: () =>import(/* webpackChunkName: "BasicProfile" */ "@/views/Profile/BasicProfile"),meta: { title: "基礎詳情頁" }},{path: "/profile/advanced",name: "advanced",component: () =>import(/* @/views/Profile/AdvancedProfile" */ "@/views/Profile/AdvancedProfile"),meta: { title: "高階詳情頁" }}]}]},{path: "/403",name: "403",hideInMenu: true,component: () =>import(/* webpackChunkName: "403" */ "@/views/Exception/403")},{path: "*",name: "404",hideInMenu: true,component: () =>import(/* webpackChunkName: "404" */ "@/views/Exception/404")}]

我們規定路由中的欄位引數有如下作用：

/**
 * hideInMenu是否隱藏選單
 * 含有name欄位的顯示在側邊選單
 * hideChildrenInMenu隱藏子路由不在選單中顯示
 * meta顯示的選單必須設定meta.title
 */

接下來建立左側選單的元件：

SiderMenu與SubMenu兩個元件。

SiderMenu核心程式碼：

我們傳入this.$router.options.routes的值到getMenuData方法中做一些處理。處理內容為：過濾出要顯示在左側選單中的路由，過濾出當前路由要高亮的選單path，比如"/form/step-form/info“要高亮的路由應該是

"/form/step-form“，因為"/form/step-form“有hideChildrenInMenu: true這個配置，代表其children並不顯示在當前選單。

這裡我們使用來element-ui的el-menu元件，並規定配置router為true，這樣index的值就為路由的路徑。

SubMenu為二級選單元件，這裡有的遞迴元件的概念和使用，如下：

第一行有個functional代表這是一個純函式元件，純函式元件少了一些宣告週期的鉤子函式，所以可以提高一些效能。

我們透過判斷當前item是否children有值來決定是渲染el-menu-item還是渲染SubMenu。注意遞迴元件要有name屬性，否則會報錯，如23行。

至此，我們的動態路由的渲染思路就是這樣了。大家可以根據這個思路搭建一個最基礎的後端框架，然後根據自己公司的業務做一些擴充套件。

參考資料：vue-element-admin，Ant Design Pro of vue