基于Vue和Quasar的前端SPA專案實戰之資料匯入（九）

回顧

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

簡介

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

UI界面

產品匯入

API

業務資料匯入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，

product
匯入之后，查看發現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即可，代碼同步更新，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/286540.html

標籤：其他

上一篇：Nginx 通過反向代理解決跨域問題

下一篇：JavaScript 13 事件詳解及應用

「免費開源」基于Vue和Quasar的前端SPA專案crudapi后臺管理系統實戰之EXCEL資料匯入（九）