"Free and open source" based on Vue and Quasar front-end SPA project crudapi background management system dynamic table relationship management (6)

Time:2022-9-22

Table relationship of front-end SPA project based on Vue and Quasar (6)

review

via previous postDynamic form of front-end SPA project based on Vue and Quasar (5)We have completed the dynamic form design function in the metadata, and the implementation of the main table relationship function in this article.

Introduction

In the crudapi system, multiple tables are connected through relation management, supporting one-to-many, many-to-one, one-to-one, many-to-many and other relationships.
For basic concepts of table relationships, refer to previous articlestable relationship, after the table relationship is configured through the UI, the cascade operation of the main and sub-tables can be supported.

UI interface

表关系列表
List of table relationships

编辑表关系
Edit table relationships

表关系图
table relationship diagram

API

表关系管理API
The table relationship API includes basic CRUD operations, which can be viewed through the swagger documentation. Encapsulate the api through axios, the name is 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 };

core code

q-select control

The q-select control is used in the table relationship design page, which supports the selection of 4 basic types: including one-to-many OneToMany, many-to-one ManyToOne, one-to-one (master-sub) OneToOneMainToSub, one-to-one (sub-master) OneToOneSubToMain, through multiple combinations All types of table relationships are implemented.

relationTypeOptions: [
    {
      value: "OneToMany",
      label: "one-to-many"
    },
    {
      value: "ManyToOne",
      label: "many to one"
    },
    {
      value: "OneToOneMainToSub",
      label: "One-to-one (Master)"
    },
    {
      value: "OneToOneSubToMain",
      label: "One-to-One (Sub-Master)"
    }
  ]

table relationship diagram

G6

Using Ant Group's G6 graph visualization engine, G6 is a simple, easy-to-use, and complete graph visualization engine. On the basis of high customization capabilities, it provides a series of elegantly designed and easy-to-use graph visualization solutions. It can help developers build their own graphs, graph analysis applications or graph editor applications.

package.json

Add @antv/g6 dependency

"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

Through the list page, the new page and the edit page, the basic crud operation of the table relationship is realized. The editing and new pages are similar. The relationship between all the tables can be seen in the table relationship diagram, which can be seen at a glance. For more content, please refer to the source code.

summary

This article mainly introduces the table relationship management function in metadata, supports common one-to-many, one-to-one, many-to-many relationships, and displays the relationship diagrams of all tables through the G6 chart library. So far, the metadata design functions are all Implemented, the next article will introduce the crud function of business data.

demo

Official website address:https://crudapi.cn
Test address:https://demo.crudapi.cn/crudapi/login

With source code address

GitHub address

https://github.com/crudapi/crudapi-admin-web

Gitee address

https://gitee.com/crudapi/crudapi-admin-web

Due to network reasons, GitHub may be slow, you can change it to access Gitee, and the code will be updated synchronously.