「免費開源」基于Vue和Quasar的前端SPA項目crudapi后臺管理系統(tǒng)實戰(zhàn)之動態(tài)表關(guān)系管理（六）

基于Vue和Quasar的前端SPA項目實戰(zhàn)之表關(guān)系（六）

回顧

通過上一篇文章?基于Vue和Quasar的前端SPA項目實戰(zhàn)之動態(tài)表單（五）的介紹，我們已經(jīng)完成了元數(shù)據(jù)中動態(tài)表單設(shè)計功能，本文主要表關(guān)系功能的實現(xiàn)。

簡介

在crudapi系統(tǒng)中，通過表關(guān)系(relation)管理將多個表連接起來，支持一對多，多對一，一對一，多對多等關(guān)系， 有關(guān)表關(guān)系基本概念參考之前文章?表關(guān)系?，通過UI配置好表關(guān)系后，可以支持主子表的級聯(lián)操作。

UI界面

?表關(guān)系列表

?編輯表關(guān)系

?表關(guān)系圖

API

?表關(guān)系A(chǔ)PI包括基本的CRUD操作，具體的通過swagger文檔可以查看。通過axios封裝api，名稱為metadataRelation

import { axiosInstance } from "boot/axios";

const metadataRelation = {
  create: function(data) {
    return axiosInstance.post("/api/metadata/tablerelations",
       data
    );
  },
  update: function(id, data) {
    return axiosInstance.patch("/api/metadata/tablerelations/" + id,
       data
    );
  },
  list: function(page, rowsPerPage, search, query) {
    return axiosInstance.get("/api/metadata/tablerelations",
      {
        params: {
          offset: (page - 1) * rowsPerPage,
          limit: rowsPerPage,
          search: search,
          ...query
        }
      }
    );
  },
  count: function(search, query) {
    return axiosInstance.get("/api/metadata/tablerelations/count",
      {
        params: {
          search: search,
          ...query
        }
      }
    );
  },
  get: function(id) {
    return axiosInstance.get("/api/metadata/tablerelations/" + id,
      {
        params: {
        }
      }
    );
  },
  delete: function(id) {
    return axiosInstance.delete("/api/metadata/tablerelations/" + id);
  },
  batchDelete: function(ids) {
    return axiosInstance.delete("/api/metadata/tablerelations",
      {data: ids}
    );
  }
};

export { metadataRelation };

核心代碼

q-select控件

表關(guān)系設(shè)計頁面用到了q-select控件，支持選擇4種基本類型：包括一對多OneToMany，多對一ManyToOne，一對一(主子)OneToOneMainToSub，一對一(子主)OneToOneSubToMain，通過多次組合實現(xiàn)了所有類型的表關(guān)系。

<q-select
  class="col-7"
  outlined
  v-model="metadataRelation.relationType"
  :options="relationTypeOptions"
  emit-value
  map-options
/>

relationTypeOptions: [
    {
      value: "OneToMany",
      label: "一對多"
    },
    {
      value: "ManyToOne",
      label: "多對一"
    },
    {
      value: "OneToOneMainToSub",
      label: "一對一(主子)"
    },
    {
      value: "OneToOneSubToMain",
      label: "一對一(子主)"
    }
  ]

表關(guān)系圖

G6

采用螞蟻集團(tuán)的G6圖可視化引擎，G6是一個簡單、易用、完備的圖可視化引擎，它在高定制能力的基礎(chǔ)上，提供了一系列設(shè)計優(yōu)雅、便于使用的圖可視化解決方案。能幫助開發(fā)者搭建屬于自己的圖，圖分析應(yīng)用或是圖編輯器應(yīng)用。

package.json

添加@antv/g6依賴

"dependencies": {
  "@quasar/extras": "^1.0.0",
  "@antv/g6": "^3.3.6",
  "axios": "^0.18.1",
  "core-js": "^3.6.5",
  "quasar": "^1.0.0",
  "vue-i18n": "^8.0.0"
}

增刪改查

通過列表頁面，新建頁面和編輯頁面實現(xiàn)了表關(guān)系基本的crud操作，其中編輯和新建頁面類似，表關(guān)系圖可以看到所有表之間的關(guān)系，這樣可以一目了然，更多內(nèi)容參考源碼即可。

小結(jié)

本文主要介紹了元數(shù)據(jù)中表關(guān)系管理功能，支持常見一對多，一對一，多對多等關(guān)系，并且通過G6圖表庫顯示所有表的關(guān)系的圖，到目前為止，元數(shù)據(jù)設(shè)計功能全部實現(xiàn)了，下一篇文章開始會介紹業(yè)務(wù)數(shù)據(jù)的crud功能。

demo演示

官網(wǎng)地址：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

由于網(wǎng)絡(luò)原因，GitHub可能速度慢，改成訪問Gitee即可，代碼同步更新。