“Free and open source” excel data export of crudapi background management system of front-end spa project based on Vue and Quasar (13)

Time:2021-12-2

Actual data export of front-end spa project based on Vue and Quasar (13)

review

Through the previous articleActual data import of front-end spa project based on Vue and Quasar (9)The batch import function of business data can be realized by zero code through configuration. This paper mainly introduces the related content of batch export of business data.

brief introduction

For each business table, it is sometimes necessary to export data to a local file for backup or analysis. The file format adopted here is excel. The first line is the field name, and the data starts from the second line.

UI interface


Product export

API


Business data export related APIs can be viewed through the swagger document. The API is encapsulated by Axios and named table

import { axiosInstance } from "boot/axios";

const table = {
 export: function(tableName) {
    return axiosInstance.get("/api/business/" + tableName + "/export",
      {
        params: {
        }
      }
    );
  }
};

export { table };

Core code

explain

After successful export, return the file URL and download it directly!

code

async onExportClickAction() {
  this.$q.loading.show({
    Message: "building"
  });

  try {
    const url = await tableService.export(this.tableName);
    This. $q.notify ("the data is exported successfully, please wait until the download is completed!");

    window.open(url, "_blank");

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

Products as an example


Click the “batch export” button. After success, the file will be automatically downloaded locally. Open Excel to check. It is found that three pieces of data have been generated, which are consistent with the data in the system.

Summary

This paper mainly introduces the batch export function of business data. Different business forms operate similarly. The batch export function of business data can be realized by zero code through configuration.

Introduction to crud API

Crud API is a combination of crud + API, which means the interface for 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 crud API’s goal 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 the business.

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

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