Metadata export and import of front-end spa project based on Vue and Quasar (15)

review

Through the introduction of module management (14) of front-end spa project based on Vue and Quasar in the previous article, forms with the same type or belonging to the same business are classified through module management to facilitate rapid search. This article mainly introduces the export and import functions of metadata forms.

brief introduction

For metadata tables, sometimes it is necessary to export metadata to local files to back up data. The file format adopted here is JSON. Subsequently, it can be imported through the import function, which can be used to recover metadata or share metadata with other systems.

UI interface

Select the form to be exported, and then click the “batch export” button

Select the previously exported metadata JSON file and click Submit

code

explain

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

data format

It includes three fields: sequences, tables and tablerelations, all of which 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: "exporting"
  });

  try {
    const fileName = await metadataTableService.export(ids);
    this.$ q. Notify ("the metadata table is generated successfully, please wait until the download is completed!");

    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: "uploading"
  });

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

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

example

Take the student table and grade table as an example. The student number field of the student table refers to the serial number studenno. There is a one to many relationship between the student table and the grade table,

Meta Data Define

Student No. studenno Serial No

Student form

One to many relation

Export import

Exported JSON file

verification

After exporting the JSON file, delete the existing form, and then import it again. The metadata obtained is the same as before. Test and enter the student achievement business data, and the result is consistent with the expectation.

Summary

This paper mainly introduces the export and import function of metadata form, which can be used for daily metadata form backup or shared with other systems for import, so as 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 crud API

Crud API is a combination of crud + API, which means the interface of adding, deleting, modifying and querying. It is a zero code configurable product. Using crud API can bid farewell to the boring addition, deletion, modification and query code, make you more focused on business, save a lot of costs, and improve work efficiency. The goal of crud API is to make it easier to process data, and everyone can use it for free! Without programming, crud is automatically generated through configuration, and restful API is added, deleted, modified and queried to provide background UI management business data. Based on the mainstream open source framework, it has independent intellectual property rights and supports secondary development.

Demo demo

Crud API is a product level zero code platform, which is different from automatic code generator. It does not need to generate business codes such as controller, service, repository and entity. The program can be used when running. The real 0 code can cover the basic crud restful API irrelevant to business.

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

Source code address attached

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 visit gitee and update the code synchronously.