基于Vue和Quasar的前端SPA我的项目实战之表关系（六）

回顾

通过上一篇文章基于Vue和Quasar的前端SPA我的项目实战之动静表单（五）的介绍，咱们曾经实现了元数据中动静表单设计性能，本文次要表关系性能的实现。

简介

在crudapi零碎中，通过表关系(relation)治理将多个表连接起来，反对一对多，多对一，一对一，多对多等关系，
无关表关系基本概念参考之前文章表关系，通过UI配置好表关系后，能够反对奴才表的级联操作。

UI界面

表关系列表

编辑表关系

表关系图

API

表关系API包含根本的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控件

表关系设计页面用到了q-select控件，反对抉择4种根本类型：包含一对多OneToMany，多对一ManyToOne，一对一(奴才)OneToOneMainToSub，一对一(子主)OneToOneSubToMain，通过屡次组合实现了所有类型的表关系。

<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: "一对一(子主)"    }  ]

表关系图

G6

采纳蚂蚁团体的G6图可视化引擎，G6是一个简略、易用、齐备的图可视化引擎，它在高定制能力的根底上，提供了一系列设计优雅、便于应用的图可视化解决方案。能帮忙开发者搭建属于本人的图，图剖析利用或是图编辑器利用。

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"}

增删改查

通过列表页面，新建页面和编辑页面实现了表关系根本的crud操作，其中编辑和新建页面相似，表关系图能够看到所有表之间的关系，这样能够高深莫测，更多内容参考源码即可。

小结

本文次要介绍了元数据中表关系治理性能，反对常见一对多，一对一，多对多等关系，并且通过G6图表库显示所有表的关系的图，到目前为止，元数据设计性能全副实现了，下一篇文章开始会介绍业务数据的crud性能。

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即可，代码同步更新。