乐趣区

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

jiezi

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

退出移动版