Data Import of front-end SPA Project Combat Based on Vue and Quasar (9)

review

Through the introduction of the business data (7) of the front-end SPA project combat based on Vue and Quasar in the previous article, the basic CRUD function of business data is realized. This paper mainly introduces the contents related to the batch import of business data.

Introduction to the

When the amount of data is large, manual data entry will be slow. Therefore, batch data entry is adopted to improve efficiency. The file format used here is EXCEL. For each service table, you can automatically generate EXCEL template files. After downloading the template, you can directly edit the EXCEL table and upload the EXCEL file to import data in batches.

UI

Products import

API

API related to service data import, including template acquisition and import functions, can be viewed in Swagger document. The API is wrapped in AXIos with the name table

import { axiosInstance } from "boot/axios";

const table = {
  import: async function(tableName, data, progressCallback) {
    return axiosInstance.post("/api/business/" + tableName + "/import", data,
      {
        headers: HEADERS,
        onUploadProgress:  (progressEvent) = > {
          if (progressCallback) {
            progressCallback(progressEvent)
          }
        }
    });
  },
  getImportTemplate: function(tableName) {
    return axiosInstance.get("/api/business/" + tableName + "/import/template",
      {
        params: {}}); }};export { table };
Copy the code

The core code

The code structure

The code structure

QFile components

<q-file V-model ="localFile" label=" Please upload EXCEL file" > <template V-slot :prepend> <q-icon name="attach_file" /> </template> </q-file>Copy the code

The q-file component is used for uploading EXCEL.

Products as an example



Download the template, main fields including name, brand, color, price, quantity, etc., then edit EXCEL.



After the import, three data items are imported successfully.

summary

This document describes how to import service data in batches. You can automatically generate template files for different service forms. You can import service data in batches using zero code. More advanced features will be introduced later.

The demo presentation

Website address: crudapi. Cn test address: demo. Crudapi. Cn/crudapi/log…

Attached source code address

Making the address

Github.com/crudapi/cru…

Gitee address

Gitee.com/crudapi/cru…

Due to network reasons, GitHub may be slow, so you can access Gitee instead and update the code synchronously.