写点什么

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

用户头像
crudapi
关注
发布于: 2021 年 04 月 11 日
「免费开源」基于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 功能。

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

发布于: 2021 年 04 月 11 日阅读数: 22
用户头像

crudapi

关注

crudapi是crud+api组合,表示增删改查接口 2019.06.19 加入

使用crudapi可以告别枯燥无味的增删改查代码,让您更加专注业务,节约大量成本,从而提高工作效率。crudapi的目标是让处理数据变得更简单!官网:https://crudapi.cn 演示:https://demo.crudapi.cn/crudapi/login

评论

发布
暂无评论
「免费开源」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之动态表关系管理(六)