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

简介: 在crudapi系统中,通过表关系(relation)管理将多个表连接起来,支持一对多,多对一,一对一,多对多等关系,本文主要介绍了元数据中表关系管理功能,支持常见一对多,一对一,多对多等关系,并且通过G6图表库显示所有表的关系的图,到目前为止,元数据设计功能全部实现了.

基于Vue和Quasar的前端SPA项目实战之表关系(六)

回顾

通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之动态表单(五)的介绍,我们已经完成了元数据中动态表单设计功能,本文主要介绍表关系功能的实现。

简介

在crudapi系统中,通过表关系(relation)管理将多个表连接起来,支持一对多,多对一,一对一,多对多等关系,
有关表关系基本概念参考之前文章[ 表关系 ](),通过UI配置好表关系后,可以支持主子表的级联操作。

UI界面

表关系列表
表关系列表

编辑表关系
编辑表关系

表关系图
表关系图

API

表关系管理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即可,代码同步更新。

目录
相关文章
|
2月前
|
缓存 移动开发 Rust
前端构建工具 Mako 开源了
Hi,我是 sorrycc,Mako 的主要负责人之一,也是 Umi、Dva、Father 等库的作者。 很开心,Mako 终于开源了! Github 地址:https://github.com/umijs/mako/ 今天和大家正式介绍下他。
105 3
|
1月前
|
存储 JavaScript 前端开发
前端技术分享:使用Vue.js与Vuex管理状态
【10月更文挑战第1天】前端技术分享:使用Vue.js与Vuex管理状态
44 6
|
20天前
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
62 41
|
2月前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
22天前
|
JavaScript 前端开发 API
Vue.js:打造高效前端应用的最佳选择
【10月更文挑战第9天】Vue.js:打造高效前端应用的最佳选择
16 2
|
1月前
|
JavaScript 前端开发 API
前端技术分享:Vue.js 动态路由与守卫
【10月更文挑战第1天】前端技术分享:Vue.js 动态路由与守卫
|
1月前
|
开发框架 前端开发 JavaScript
React、Vue.js 和 Angular主流前端框架和选择指南
在当今的前端开发领域,选择合适的框架对于项目的成功至关重要。本文将介绍几个主流的前端框架——React、Vue.js 和 Angular,探讨它们各自的特点、开发场景、优缺点,并提供选择框架的建议。
39 6
|
19天前
|
JavaScript 前端开发 应用服务中间件
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
20 0
|
20天前
|
监控 JavaScript 前端开发
深入了解Vue.js:构建现代前端应用的利器
【10月更文挑战第11天】深入了解Vue.js:构建现代前端应用的利器
12 0
|
2月前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
76 4