「免費(fèi)開源」基于Vue和Quasar的前端SPA項目crudapi后臺管理系統(tǒng)實戰(zhàn)之EXCEL數(shù)據(jù)導(dǎo)入（九）

基于Vue和Quasar的前端SPA項目實戰(zhàn)之?dāng)?shù)據(jù)導(dǎo)入（九）

回顧

通過之前一篇文章 基于Vue和Quasar的前端SPA項目實戰(zhàn)之業(yè)務(wù)數(shù)據(jù)（七）的介紹，實現(xiàn)了業(yè)務(wù)數(shù)據(jù)基本crud功能，本文主要介紹業(yè)務(wù)數(shù)據(jù)批量導(dǎo)入相關(guān)內(nèi)容。

簡介

當(dāng)數(shù)據(jù)量比較大的時候，如果手工錄入數(shù)據(jù)就會比較慢，所以通過批量導(dǎo)入的方式錄入數(shù)據(jù)，以提高效率。這里采用的文件格式為EXCEL，針對每個業(yè)務(wù)表，可以自動生成EXCEL模板文件，下載模板之后，直接編輯EXCEL表格，然后上傳EXCEL文件進(jìn)行批量導(dǎo)入數(shù)據(jù)。

UI界面

?產(chǎn)品導(dǎo)入

API

?業(yè)務(wù)數(shù)據(jù)導(dǎo)入相關(guān)API，包括獲取模板和導(dǎo)入兩個功能，具體的通過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 };

核心代碼

代碼結(jié)構(gòu)

?代碼結(jié)構(gòu)

QFile組件

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

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

產(chǎn)品為例

下載模板，主要字段包括名稱，品牌，顏色，價格，數(shù)量等，然后編輯EXCEL。

導(dǎo)入之后，查看發(fā)現(xiàn)3條數(shù)據(jù)已經(jīng)導(dǎo)入成功。

小結(jié)

本文主要介紹了介紹業(yè)務(wù)數(shù)據(jù)批量導(dǎo)入功能，不同的業(yè)務(wù)表單都可以自動生成模板文件，通過配置的方式可以零代碼實現(xiàn)業(yè)務(wù)數(shù)據(jù)的批量導(dǎo)入功能。后續(xù)會繼續(xù)介紹一些高級功能。

demo演示

官網(wǎng)地址：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

由于網(wǎng)絡(luò)原因，GitHub可能速度慢，改成訪問Gitee即可，代碼同步更新。