「免費開源」基于Vue和Quasar的前端SPA項目crudapi背景管理系統實戰之EXCEL資料導入（九）

本文主要介紹了介紹業務資料批量導入功能，不同的業務表單都可以自動生成模闆檔案，通過配置的方式可以零代碼實作業務資料的批量導入功能。

基于Vue和Quasar的前端SPA項目實戰之資料導入（九）

回顧

通過之前一篇文章 基于Vue和Quasar的前端SPA項目實戰之業務資料（七）的介紹，實作了業務資料基本crud功能，本文主要介紹業務資料批量導入相關内容。

簡介

當資料量比較大的時候，如果手工錄入資料就會比較慢，是以通過批量導入的方式錄入資料，以提高效率。這裡采用的檔案格式為EXCEL，針對每個業務表，可以自動生成EXCEL模闆檔案，下載下傳模闆之後，直接編輯EXCEL表格，然後上傳EXCEL檔案進行批量導入資料。

UI界面

産品導入

API

業務資料導入相關API，包括擷取模闆和導入兩個功能，具體的通過swagger文檔可以檢視。通過axios封裝api，名稱為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 };
           

核心代碼

代碼結構

QFile元件

<q-file v-model="localFile" label="請上傳EXCEL檔案">
  <template v-slot:prepend>
    <q-icon name="attach_file" />
  </template>
</q-file>
           

用到了q-file元件，用于上傳EXCEL。

産品為例

下載下傳模闆，主要字段包括名稱，品牌，顔色，價格，數量等，然後編輯EXCEL。

導入之後，檢視發現3條資料已經導入成功。

小結

本文主要介紹了介紹業務資料批量導入功能，不同的業務表單都可以自動生成模闆檔案，通過配置的方式可以零代碼實作業務資料的批量導入功能。後續會繼續介紹一些進階功能。

demo示範

官網位址：https://crudapi.cn

測試位址：https://demo.crudapi.cn/crudapi/login

附源碼位址

GitHub位址

https://github.com/crudapi/crudapi-admin-web

Gitee位址

https://gitee.com/crudapi/crudapi-admin-web

由于網絡原因，GitHub可能速度慢，改成通路Gitee即可，代碼同步更新。