乐趣区

关于前端:免费开源基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之EXCEL数据导入九

jiezi

基于 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 即可，代码同步更新。

退出移动版