共计 2264 个字符,预计需要花费 6 分钟才能阅读完成。
基于 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 即可,代码同步更新。