「免費(fèi)開源」基于Vue和Quasar的前端SPA項(xiàng)目實(shí)戰(zhàn)之?dāng)?shù)據(jù)導(dǎo)出（十三）

回顧

通過之前一篇文章?基于Vue和Quasar的前端SPA項(xiàng)目實(shí)戰(zhàn)之?dāng)?shù)據(jù)導(dǎo)入（九） 的介紹，通過配置的方式可以零代碼實(shí)現(xiàn)業(yè)務(wù)數(shù)據(jù)的批量導(dǎo)入功能，本文主要介紹業(yè)務(wù)數(shù)據(jù)批量導(dǎo)出相關(guān)內(nèi)容。

簡介

針對(duì)每個(gè)業(yè)務(wù)表，有時(shí)需要導(dǎo)出數(shù)據(jù)到本地文件，用來備份或者分析，這里采用的文件格式為EXCEL，第一行為字段名稱，從第二行開始為數(shù)據(jù)。

UI界面

?產(chǎn)品導(dǎo)出

API

?業(yè)務(wù)數(shù)據(jù)導(dǎo)出相關(guān)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("數(shù)據(jù)導(dǎo)出成功，請(qǐng)等待下載完成后查看！");

    window.open(url, "_blank");

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

產(chǎn)品為例

點(diǎn)擊“批量導(dǎo)出”按鈕，成功之后自動(dòng)下載文件到本地，打開EXCEL查看發(fā)現(xiàn)3條數(shù)據(jù)已經(jīng)生成，和系統(tǒng)中數(shù)據(jù)一致。

小結(jié)

本文主要介紹了介紹業(yè)務(wù)數(shù)據(jù)批量導(dǎo)出功能，不同的業(yè)務(wù)表單操作類似，通過配置的方式可以零代碼實(shí)現(xiàn)業(yè)務(wù)數(shù)據(jù)的批量導(dǎo)出功能。

crudapi簡介

crudapi是crud+api組合，表示增刪改查接口，是一款零代碼可配置的產(chǎn)品。使用crudapi可以告別枯燥無味的增刪改查代碼，讓您更加專注業(yè)務(wù)，節(jié)約大量成本，從而提高工作效率。 crudapi的目標(biāo)是讓處理數(shù)據(jù)變得更簡單，所有人都可以免費(fèi)使用！ 無需編程，通過配置自動(dòng)生成crud增刪改查RESTful API，提供后臺(tái)UI管理業(yè)務(wù)數(shù)據(jù)。基于主流的開源框架，擁有自主知識(shí)產(chǎn)權(quán)，支持二次開發(fā)。

demo演示

crudapi屬于產(chǎn)品級(jí)的零代碼平臺(tái)，不同于自動(dòng)代碼生成器，不需要生成Controller、Service、Repository、Entity等業(yè)務(wù)代碼，程序運(yùn)行起來就可以使用，真正0代碼，可以覆蓋基本的和業(yè)務(wù)無關(guān)的CRUD RESTful API。

官網(wǎng)地址：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

由于網(wǎng)絡(luò)原因，GitHub可能速度慢，改成訪問Gitee即可，代碼同步更新。