「免費開源」基于Vue和Quasar的crudapi前端SPA項目實戰之布局菜單（三）

基于Vue和Quasar的前端SPA項目實戰之布局菜單（三）

回顧

通過上一篇文章

基于Vue和Quasar的前端SPA項目實戰之使用者登入（二）

的介紹，我們已經完成了登入頁面，今天主要介紹布局菜單的實作。

UI界面

效果

首頁

業務資料菜單展開

設定頁面

說明

布局首頁分為三個部分，

1. 最上面為導航欄，主要包括重新整理按鈕，後退按鈕，使用者資訊等内容。
2. 左邊為菜單，包括業務資料，中繼資料，系統三個一級菜單。業務資料菜單的二級菜單為表名稱，中繼資料菜單包括序列号、表、關系三個二級菜單，系統菜單包括設定和關于兩個二級菜單。
3. 右邊為頁面主體部分。

布局

嵌套路由

通常由多層嵌套的元件組合而成。同樣地，URL 中各段動态路徑也按某種結構對應嵌套的各層元件，例如：

設定Setting頁面和關于About頁面切換的時候，導航和菜單部分都不變，變化的是主體部分，可以通過嵌套路由實作。

/about                                /setting
+------------------+                  +-----------------+
| nav             |                   | nav             |
| +--------------+ |                  | +-------------+ |
| | About        | |  +------------>  | | Setting     | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+           

MainLayout

檔案為：src/layouts/MainLayout.vue

<q-page-container>
  <router-view />
</q-page-container>           

其中

<router-view />

對應上圖About和Setting部分。

定義路由

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') },
      {
        name: "about",
        path: "about",
        meta: { isAllowBack: true },
        component: () => import("pages/About.vue")
      },
      {
        name: "setting",
        path: "setting",
        meta: { isAllowBack: true },
        component: () => import("pages/Setting.vue")
      }
    ]
  }           

其中，meta表示路由元資訊，isAllowBack字段用于表示是否可以後退，在對應的component頁面渲染的時候通過this.$route.meta.isAllowBack擷取值，然後設定全局Vuex狀态config/isAllowBack的值。

computed計算屬性

<q-btn
  v-show="isAllowBack === true"
  flat
  dense
  round
  @click="goBack"
  icon="arrow_back_ios"
  aria-label="Back"
>
</q-btn>

computed: {
  isAllowBack: {
    get() {
      return this.$store.state.config.isAllowBack;
    }
  }
}           

MainLayout.vue中通過computed計算屬性isAllowBack綁定q-btn，這樣可以控制後退按鈕是否顯示。首頁不需要後退，設定頁面和關于頁面就需要後退。後退按鈕主要目的是适應不同的浏覽器，不依賴浏覽器的後退功能，比如H5頁面全屏或者嵌入到Cordova殼子裡面的時候就非常有用了。

菜單

控件

<q-tree
  selected-color="primary"
  :nodes="allMenu"
  :selected.sync="selected"
  @update:selected="onMenuClickAction()"
  ref="qTreeProxy"
  node-key="labelKey"
  default-expand-all
  no-connectors
/>           

菜單用到了q-tree控件，菜單的内容是包括固定部分和動态部分。

list: async function(page, rowsPerPage, search, query) {
  var res = await metadataTable.list(page, rowsPerPage, search, query);
  return res.data;
},           

其中業務資料是根據表單清單動态顯示的，通過metadataTableService的list方法查詢表單，然後動态渲染。

const tables = await metadataTableService.list(1, 9999);
for (let i = 0; i < tables.length; i++) {
  let table = tables[i];
  this.businessMenu.children.push({
      label: table.caption,
      labelKey: this.getBussinessPath(table.name),
      icon: "insert_chart_outlined"
  });
}

this.allMenu.push(this.businessMenu);
this.allMenu.push(this.metadataMenu);
this.allMenu.push(this.systemMenu);

this.$refs.qTreeProxy.setExpanded("business", true);
this.$refs.qTreeProxy.setExpanded("metadata", true);
this.$refs.qTreeProxy.setExpanded("system", true);           

方法

this.$refs.qTreeProxy.setExpanded

可以控制菜單展開。

小結

本文主要介紹了嵌套路由和菜單功能，用到了router-view和q-tree，然後實作了設定頁面和關于頁面功能。其它菜單對應的功能暫時為空，後續會從中繼資料菜單開始進一步介紹序列号功能。

demo示範

官網位址：

https://crudapi.cn

測試位址：

https://demo.crudapi.cn/crudapi/login

附源碼位址

GitHub位址

https://github.com/crudapi/crudapi-admin-web

Gitee位址

https://gitee.com/crudapi/crudapi-admin-web

由于網絡原因，GitHub可能速度慢，改成通路Gitee即可，代碼同步更新。