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.