"Free and Open Source" Front-end SPA project crudapi zero-code development platform based on Vue and Quasar: Metadata export and import in actual combat (15)

Metadata export and import in actual combat of front-end SPA project based on Vue and Quasar (15)

review

Through the introduction of the previous article based on Vue and Quasar front-end SPA project actual combat module management (fourteen) , through the module management to classify the forms of the same type or belong to the same business to facilitate quick search. This article mainly introduces the export and import functions of metadata forms.

Introduction

For metadata tables, sometimes it is necessary to export metadata to a local file to back up data. The file format used here is json. Later, it can be imported through the import function, which can be used to restore metadata or share metadata to other systems.

UI interface

Select the form that needs to be exported, and then click the "Batch Export" button

Select the previously exported metadata json file, and then click the "Submit" button

Code

illustrate

When exporting, you need to export the sequence number sequence referenced by the form and the table relationship relationship together.

Data Format

Including three fields of sequences, tables, tableRelations, all types are arrays

{
    "sequences": [],
    "tables": [],
    "tableRelations": []
}

Core code

Export metadata

async onExportClickAction(id) {
  let ids = [];
  this.selected.forEach(function(val){
      ids.push(val.id);
  });
  console.info("list->onExportClickAction");

  this.$q.loading.show({
    message: "导出中"
  });

  try {
    const fileName = await metadataTableService.export(ids);
    this.$q.notify("元数据表生成成功，请等待下载完成后查看！");

    window.open("/api/file/" + fileName, "_blank");

    this.$q.loading.hide();
  } catch (error) {
    this.$q.loading.hide();
    console.error(error);
  }
}

Import metadata

async onSubmitClick() {
  console.info("import->onSubmitClick");

  this.$q.loading.show({
    message: "上传中"
  });

  try {
    let form = new FormData()
    form.append('file', this.localFile);

    this.fileInfo = await metadataTableService.import(form, (e)=> {
      console.info(e);
    });
    this.$q.notify("导入成功");
    this.$router.go(-1);
    this.$q.loading.hide();
  } catch (error) {
    this.$q.loading.hide();
    console.error(error);
  }
}

example

Take the student table and transcript as an example. The student number field of the student table quotes the serial number studenNo. There is a one-to-many relationship between the student table and the transcript.

Metadata definition

Student number studenNo serial number

Student table student

One-to-many relation

Export and import

Exported json file

verify

After exporting the json file, delete the existing form, and then re-import it. The metadata obtained is the same as before. The test enters the student's performance data, and the result is consistent with the expectation.

summary

This article mainly introduces the export and import function of metadata forms, which can be used for daily metadata form backup, and can also be shared with other systems for import to achieve the goal of reuse. Later, you can use the metadata export and import function to configure some common business forms, such as e-commerce, CRM, education and other fields, and then export these business forms for users to download and use.

Introduction to crudapi

Crudapi is a combination of crud+api, which means adding, deleting, modifying and checking interface. It is a zero-code configurable product. Using crudapi can say goodbye to boring additions, deletions, and code changes, allowing you to focus more on your business, save a lot of costs, and improve work efficiency. The goal of crudapi is to make processing data easier, and everyone can use it for free! No programming is required. The RESTful API is automatically generated through configuration to add, delete, modify, and check crud, and provide back-end UI to manage business data. Based on the mainstream open source framework, with independent intellectual property rights, it supports secondary development.

demo

Crudapi is a product-level zero-code platform, which is different from automatic code generators. It does not need to generate Controller, Service, Repository, Entity and other business codes. It can be used when the program is running. The real zero code can cover basic CRUD that has nothing to do with the business. RESTful API.

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

Attached 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, just change to visit Gitee, and the code will be updated synchronously.