专栏首页crudapi​「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之数据导入(九)
原创

​「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之数据导入(九)

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ​「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之数据导出(十三)

    通过之前一篇文章 基于Vue和Quasar的前端SPA项目实战之数据导入(九)的介绍,通过配置的方式可以零代码实现业务数据的批量导入功能,本文主要介绍业务数据批...

    crudapi
  • 「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战—环境搭建 (一)

    crudapi增删改查接口系统的后台Java API服务已经全部可用,需要一套后台管理UI,主要用户为开发人员或者对计算机有一定了解的工作人员,通过UI配置元数...

    crudapi
  • ​「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之docker部署(八)

    通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之业务数据(七)的介绍,crudapi-admin-web基本功能全部实现了,本文主要介绍前端打包和...

    crudapi
  • 「免费开源」基于Vue和Quasar的前端SPA项目后台管理系统实战之元数据导出导入(十五)

    通过前一篇文章 基于Vue和Quasar的前端SPA项目实战之模块管理(十四)的介绍,通过模块管理将具有相同类型或属于同一业务的表单进行分类,方便快速查找。本文...

    crudapi
  • ​「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之模块管理(十四)

    通过之前一篇文章 基于Vue和Quasar的前端SPA项目实战之动态表单(五)的介绍,通过配置的方式可以零代码实现表单管理功能,但是所有表单都没有分类,如果表单...

    crudapi
  • ​「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之业务数据(七)

    通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之表关系(六)的介绍,元数据设计功能全部实现了,本文主要介绍业务数据的crud增删改查功能。

    crudapi
  • ​「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之文件上传(十)

    通过之前一篇文章 基于Vue和Quasar的前端SPA项目实战之数据导入(九)的介绍,实现了业务数据批量导入功能,本文主要介绍文件上传相关内容。

    crudapi
  • ​「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之表关系(六)

    通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之动态表单(五)的介绍,我们已经完成了元数据中动态表单设计功能,本文主要介绍表关系功能的实现。

    crudapi
  • 「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之数据库逆向(十二)

    通过之前文章 基于Vue和Quasar的前端SPA项目实战之动态表单(五)的介绍,实现了动态表单功能。如果是全新的项目,通过配置元数据并且创建物理表,从而自动实...

    crudapi
  • ​「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之动态表单(五)

    通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之序列号(四)的介绍,我们已经完成了元数据中序列号的增删改查,本文主要介绍动态表单设计功能的实现。

    crudapi
  • ​「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之布局菜单(三)

    通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之用户登录(二)的介绍,我们已经完成了登录页面,今天主要介绍布局菜单的实现。

    crudapi
  • ​「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之用户登录(二)

    通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之环境搭建(一)的介绍,我们已经搭建好本地开发环境并且运行成功了,今天主要介绍登录功能。

    crudapi
  • ​「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之联合索引(十一)

    通过之前文章 基于Vue和Quasar的前端SPA项目实战之动态表单(五)的介绍,关于表单元数据配置相关内容已经实现了,本文主要介绍联合索引功能的实现。

    crudapi
  • 「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之序列号自定义组件(四)

    通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之布局菜单(三)的介绍,我们已经完成了布局菜单,本文主要介绍序列号功能的实现。

    crudapi
  • 十款热门的Vue.js工具和库

    随着Vue.js越来越热门,被很多开发人员采用,因此其生态也越来越完善,相关的工具和库也很丰富。这主要得益于:Vue的学习曲线,清晰的设计结构和使用文档,让有经...

    前端达人
  • 【程序源代码】Vue开源项目库汇总

    最近在学习VUE,感觉确实不错的前端框架。但光学习基本有点太慢,时间太长,主要是为了项目上手使用,所以在网上找了找比较好的VUE框架开发的项目实例。分享给大家。...

    程序源代码
  • 十款值得你关注的Vue.js工具和库

    众所周知,Vue目前越来越热门,被很多开发人员采用,因此其生态也越来越完善,相关的工具和库也很丰富。这主要得益于:Vue的学习曲线,清晰的设计结构和使用文档,让...

    前端达人
  • 一个Java程序猿眼中的前后端分离以及Vue.js入门

    前后端不分,Jsp 是一个非常典型写法,Jsp 将 HTML 和 Java 代码结合在一起,刚开始的时候,确实提高了生产力,但是时间久了,大伙就发现 Jsp 存...

    南风
  • 9个不错的前端开源项目

    无论您是刚开始编程还是已经是一名经验丰富的开发人员,在这个行业中,学习新的概念和语言/框架是跟上快速变化的必要条件。

    前端迷

扫码关注云+社区

领取腾讯云代金券