「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之表关系（六）

基于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，通过多次组合实现了所有类型的表关系。

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

表关系图

采用蚂蚁集团的G6图可视化引擎，G6是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图，图分析应用或是图编辑器应用。

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

API JavaScript Spring Boot Vue web前端

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。