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

crudapi

关注

发布于: 2021 年 06 月 10 日

「免费开源」基于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 即可，代码同步更新。

发布于: 2021 年 06 月 10 日阅读数: 10

原文链接:【http://xie.infoq.cn/article/3178746913621661884f45c32】。

crudapi

关注

crudapi是crud+api组合，表示增删改查接口 2019.06.19 加入

使用crudapi可以告别枯燥无味的增删改查代码，让您更加专注业务，节约大量成本，从而提高工作效率。crudapi的目标是让处理数据变得更简单!官网：https://crudapi.cn 演示：https://demo.crudapi.cn/crudapi/login

发布

暂无评论

创作场景

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

基于 Vue 和 Quasar 的前端 SPA 项目实战之数据导入（九）

回顾

简介

UI 界面

API

核心代码

代码结构

QFile 组件

产品为例

小结

demo 演示

附源码地址

GitHub 地址

Gitee 地址

crudapi

评论