「免費開源」基于Vue和Quasar的crudapi前端SPA項目實戰之數據導出（十三）

基于Vue和Quasar的前端SPA項目實戰之數據導出（十三）

回顧

通過之前一篇文章 基于Vue和Quasar的前端SPA項目實戰之數據導入（九）的介紹，通過配置的方式可以零代碼實現業務數據的批量導入功能，本文主要介紹業務數據批量導出相關內容。

簡介

針對每個業務表，有時需要導出數據到本地文件，用來備份或者分析，這里采用的文件格式為EXCEL，第一行為字段名稱，從第二行開始為數據。

UI界面

產品導出

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); } }

產品為例

點擊“批量導出”按鈕，成功之后自動下載文件到本地，打開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即可，代碼同步更新。

API Java JavaScript MySQL Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。