「免費(fèi)開源」基于Vue和Quasar的crudapi前端SPA項(xiàng)目實(shí)戰(zhàn)之表關(guān)系（六）
基于Vue和Quasar的前端SPA項(xiàng)目實(shí)戰(zhàn)之表關(guān)系（六）
回顧
通過上一篇文章 基于Vue和Quasar的前端SPA項(xiàng)目實(shí)戰(zhàn)之動(dòng)態(tài)表單（五）的介紹，我們已經(jīng)完成了元數(shù)據(jù)中動(dòng)態(tài)表單設(shè)計(jì)功能，本文主要介紹表關(guān)系功能的實(shí)現(xiàn)。
簡介
在crudapi系統(tǒng)中，通過表關(guān)系(relation)管理將多個(gè)表連接起來，支持一對(duì)多，多對(duì)一，一對(duì)一，多對(duì)多等關(guān)系，
有關(guān)表關(guān)系基本概念參考之前文章 表關(guān)系 ，通過UI配置好表關(guān)系后，可以支持主子表的級(jí)聯(lián)操作。
UI界面
表關(guān)系列表
編輯表關(guān)系
表關(guān)系圖
API
表關(guān)系A(chǔ)PI包括基本的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控件
表關(guān)系設(shè)計(jì)頁面用到了q-select控件，支持選擇4種基本類型：包括一對(duì)多OneToMany，多對(duì)一ManyToOne，一對(duì)一(主子)OneToOneMainToSub，一對(duì)一(子主)OneToOneSubToMain，通過多次組合實(shí)現(xiàn)了所有類型的表關(guān)系。
表關(guān)系圖
采用螞蟻集團(tuán)的G6圖可視化引擎，G6是一個(gè)簡單、易用、完備的圖可視化引擎，它在高定制能力的基礎(chǔ)上，提供了一系列設(shè)計(jì)優(yōu)雅、便于使用的圖可視化解決方案。能幫助開發(fā)者搭建屬于自己的圖，圖分析應(yīng)用或是圖編輯器應(yīng)用。
添加@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" }
增刪改查
通過列表頁面，新建頁面和編輯頁面實(shí)現(xiàn)了表關(guān)系基本的crud操作，其中編輯和新建頁面類似，表關(guān)系圖可以看到所有表之間的關(guān)系，這樣可以一目了然，更多內(nèi)容參考源碼即可。
小結(jié)
本文主要介紹了元數(shù)據(jù)中表關(guān)系管理功能，支持常見一對(duì)多，一對(duì)一，多對(duì)多等關(guān)系，并且通過G6圖表庫顯示所有表的關(guān)系的圖，到目前為止，元數(shù)據(jù)設(shè)計(jì)功能全部實(shí)現(xiàn)了，下一篇文章開始會(huì)介紹業(yè)務(wù)數(shù)據(jù)的crud功能。
demo演示
官網(wǎng)地址：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
由于網(wǎng)絡(luò)原因，GitHub可能速度慢，改成訪問Gitee即可，代碼同步更新。
API JavaScript Spring Boot Vue web前端
版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。
相關(guān)文章