当前栏目
「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之表关系(六)
基于Vue和Quasar的前端SPA项目实战之表关系(六)
回顾
通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之动态表单(五)的介绍,我们已经完成了元数据中动态表单设计功能,本文主要介绍表关系功能的实现。
简介
在crudapi系统中,通过表关系(relation)管理将多个表连接起来,支持一对多,多对一,一对一,多对多等关系,
有关表关系基本概念参考之前文章[ 表关系 ](),通过UI配置好表关系后,可以支持主子表的级联操作。
(福利推荐:阿里云、腾讯云、华为云服务器最新限时优惠活动,云服务器1核2G仅88元/年、2核4G仅698元/3年,点击这里立即抢购>>>)
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
[email protected]/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即可,代码同步更新。
你还在原价购买阿里云、腾讯云、华为云、天翼云产品?那就亏大啦!现在申请成为四大品牌云厂商VIP用户,可以3折优惠价购买云服务器等云产品,并且可享四大云服务商产品终身VIP优惠价,还等什么?赶紧点击下面对应链接免费申请VIP客户吧:
相关文章
- Detalk.js —— 具有高自定义性、简洁、轻量的开源评论系统
- 光伏组件IV测试系统
- ZLT-MP v5.5.0 发布
- 前端重新部署如何通知用户刷新网页?
- 真的看不下去了!!!字节的table组件写成啥了!
- 软件开发入门教程网站之TypeScript Array(数组)
- 性能测试|JMeter取样器介绍(三)
- 太强了!外国小哥花16个月用Three.JS打造了一个无缝切地图的3D开车游戏
- Xmake v2.7.3 发布,包组件和 C++ 模块增量构建支持
- react.memo、useMemo、useCallback深入理解
- vue路由守卫
- react event事件订阅传值
- Vue3.0踩坑笔记
- react-context用法
- react组件传值
- react生命周期知识梳理
- js数据类型知识梳理
- js作用域链与预解析
- js浅拷贝与深拷贝
- vue组件传值