"Free and Open Source" EXCEL data export based on Vue and Quasar front-end SPA project crudapi background management system actual combat (13)

The actual data export of the front-end SPA project based on Vue and Quasar (13)

review

Through the previous article based on Vue and Quasar front-end SPA project actual data import (9) introduction, through the configuration method can realize the batch import function of business data with zero code, this article mainly introduces the relevant content of the batch export of business data.

Introduction

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

UI interface

Product export

API

APIs related to business data export can be viewed through swagger documents. Encapsulate the api with axios, the name is table

import { axiosInstance } from "boot/axios";

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

export { table };

Core code

instruction

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

Code

async onExportClickAction() {
  this.$q.loading.show({
    message: "生成中"
  });

  try {
    const url = await tableService.export(this.tableName);
    this.$q.notify("数据导出成功，请等待下载完成后查看！");

    window.open(url, "_blank");

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

Product as an example

Click the "Batch Export" button, after success, it will automatically download the file to the local, open EXCEL to check that 3 pieces of data have been generated, which are consistent with the data in the system.

summary

This article mainly introduces the batch export function of business data. Different business forms have similar operations. The batch export function of business data can be realized with zero code through configuration.

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.