「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之动态表关系管理（六）

基于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功能。