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

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

基于Vue和Quasar的前端SPA项目实战之数据导出(十三)

回顾

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

简介

针对每个业务表,有时需要导出数据到本地文件,用来备份或者分析,这里采用的文件格式为EXCEL,第一行为字段名称,从第二行开始为数据。

UI界面

产品导出

产品导出

API

业务数据导出API

业务数据导出相关API,具体的通过swagger文档可以查看。通过axios封装api,名称为table

import { axiosInstance } from "boot/axios";

const table = {
 export: function(tableName) {
    return axiosInstance.get("/api/business/" + tableName + "/export",
      {
        params: {
        }
      }
    );
  }
};

export { table };

核心代码

说明

export成功之后返回文件URL,直接下载即可!

代码

async onExportClickAction() {
  this.$q.loading.show({
    message: "生成中"
  });

  try {
    const url = await tableService.export(this.tableName);
    this.$q.notify("数据导出成功,请等待下载完成后查看!");

    window.open(url, "_blank");

    this.$q.loading.hide();
  } catch (error) {
    this.$q.loading.hide();
    console.error(error);
  }
}

产品为例

product

点击“批量导出”按钮,成功之后自动下载文件到本地,打开EXCEL查看发现3条数据已经生成,和系统中数据一致。

小结

本文主要介绍了介绍业务数据批量导出功能,不同的业务表单操作类似,通过配置的方式可以零代码实现业务数据的批量导出功能。

crudapi简介

crudapi是crud+api组合,表示增删改查接口,是一款零代码可配置的产品。使用crudapi可以告别枯燥无味的增删改查代码,让您更加专注业务,节约大量成本,从而提高工作效率。

crudapi的目标是让处理数据变得更简单,所有人都可以免费使用!

无需编程,通过配置自动生成crud增删改查RESTful API,提供后台UI管理业务数据。基于主流的开源框架,拥有自主知识产权,支持二次开发。

demo演示

crudapi属于产品级的零代码平台,不同于自动代码生成器,不需要生成Controller、Service、Repository、Entity等业务代码,程序运行起来就可以使用,真正0代码,可以覆盖基本的和业务无关的CRUD RESTful API。

官网地址: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项目实战—环境搭建 (一)

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

    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项目实战之docker部署(八)

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

    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.js工具和库

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

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

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

    程序源代码
  • 9个不错的前端开源项目

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

    前端迷
  • vue开发工具有哪些,那个更合适?

    现在前端除了JavaScript外,还有react,vue,angular这三个框架在市场上用的比较多,可以说这三个框架很大程度上改变了前端的地位,相对于ang...

    北京锐智互动

扫码关注云+社区

领取腾讯云代金券