Front End SPA Project Layout Menu based on Vue and Quasar (III)

review

Through the last article based on Vue and Quasar front-end SPA project actual combat user login (ii) introduction, we have completed the login page, today mainly introduces the implementation of the layout menu.

UI

The effect

Home page

The business data menu expands

Settings page

instructions

The layout home page is divided into three sections,

  1. The top is the navigation bar, mainly including the refresh button, back button, user information and other content.
  2. The left side is the menu, including business data, metadata, system three level menus. The second-level menu of the service data menu is the table name, the metadata menu includes the serial number, table, and relationship, and the system menu includes the Settings and about two second-level menus.
  3. On the right is the main part of the page.

layout

Embedded routines by

It is usually composed of several layers of nested components. Similarly, each section of dynamic path in URL also corresponds to nested components of each layer according to a certain structure. For example, when Setting the page and switching the About page, navigation and menu parts remain unchanged, but the main part changes, which can be realized by nesting routines.

/about                                /setting
+------------------+                  +-----------------+
| nav             |                   | nav             |
| +--------------+ |                  | +-------------+ |
| | About        | |  +------------>  | | Setting     | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+
Copy the code

MainLayout

File is: the SRC/layouts/MainLayout vue

<q-page-container>
  <router-view />
</q-page-container>
Copy the code

Where
corresponds to the About and Setting parts in the figure above.

Define the routing

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")}}]Copy the code

This.$route.meta. IsAllowBack = this.$route.meta. Then set the global Vuex state config/isAllowBack value.

Computed properties

<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; }}}Copy the code

In MainLayout.vue, q-bTN is bound with the isAllowBack attribute computed so that you can control whether the back button is displayed. Home page does not need to back, Settings page and about page need to back. The back button is designed to adapt to different browsers. It does not depend on the browser’s back function, such as H5 page full screen or embedded in the Cordova shell.

The menu

controls

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

Menu using q-Tree control, menu content is including fixed part and dynamic part.

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

The business data is dynamically displayed according to the form list. The form is queried by metadataTableService’s list method and then dynamically rendered.

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);
Copy the code

Methods this $refs. QTreeProxy. SetExpanded can control menu.

summary

This paper mainly introduces the nested routines and menu functions, using router-view and Q-tree, and then realize the setting page and about the page function. The corresponding functions of other menus are temporarily empty, and the sequence number functions will be further introduced from the metadata menu.

The demo presentation

Website address: crudapi. Cn test address: demo. Crudapi. Cn/crudapi/log…

Attached source code address

Making the address

Github.com/crudapi/cru…

Gitee address

Gitee.com/crudapi/cru…

Due to network reasons, GitHub may be slow, so you can access Gitee instead and update the code synchronously.