「免費開源」基于Vue和Quasar的前端SPA項目crudapi零代碼開發(fā)平臺后臺管理系統(tǒng)實戰(zhàn)之元數(shù)據(jù)導出導入（十五）
2021-09-29 14:50:51

回顧

通過前一篇文章 基于Vue和Quasar的前端SPA項目實戰(zhàn)之模塊管理（十四）的介紹，通過模塊管理將具有相同類型或?qū)儆谕粯I(yè)務(wù)的表單進行分類，方便快速查找。本文主要介紹元數(shù)據(jù)表單的導出和導入功能。

簡介

針對元數(shù)據(jù)表，有時需要導出元數(shù)據(jù)到本地文件，用來備份數(shù)據(jù)，這里采用的文件格式為json。后續(xù)可以通過導入功能進行導入，既可以用來恢復元數(shù)據(jù)，也可以用于分享元數(shù)據(jù)給其他系統(tǒng)。

UI界面

選中需要導出的表單，然后點擊“批量導出”按鈕

選擇之前導出的元數(shù)據(jù)json文件，然后點擊“提交”按鈕

代碼

說明

導出的時候需要把表單引用的序列號sequence和表關(guān)系relation一并導出

數(shù)據(jù)格式

包括sequences, tables, tableRelations三個字段，類型都是數(shù)組

{
"sequences": [],
"tables": [],
"tableRelations": []
}

核心代碼

導出元數(shù)據(jù)

async onExportClickAction(id) {
let ids = [];
this.selected.forEach(function(val){
ids.push(val.id);
  });
console.info("list->onExportClickAction");

this.$q.loading.show({
message: "導出中"
  });

try {
const fileName = await metadataTableService.export(ids);
this.$q.notify("元數(shù)據(jù)表生成成功，請等待下載完成后查看！");

window.open("/api/file/" + fileName, "_blank");

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

導入元數(shù)據(jù)

async onSubmitClick() {
console.info("import->onSubmitClick");

this.$q.loading.show({
message: "上傳中"
  });

try {
let form = new FormData()
form.append('file', this.localFile);

this.fileInfo = await metadataTableService.import(form, (e)=> {
console.info(e);
    });
this.$q.notify("導入成功");
this.$router.go(-1);
this.$q.loading.hide();
  } catch (error) {
this.$q.loading.hide();
console.error(error);
  }
}

例子

以學生表、成績表為例，其中學生表學號字段引用了序列號studenNo，學生表和成績表之間是一對多關(guān)系，

元數(shù)據(jù)定義

學號studenNo流水號

一對多relation

導出導入

導出的json文件

驗證

導出json文件之后刪除已有表單，然后重新導入，得到的元數(shù)據(jù)和之前的一樣，測試錄入學生成績業(yè)務(wù)數(shù)據(jù)，結(jié)果和期望的一致。

小結(jié)

本文主要介紹了元數(shù)據(jù)表單的導出導入功能，可以用于日常元數(shù)據(jù)表單備份，也可以分享給其他系統(tǒng)進行導入，以達到復用的目標。后續(xù)可以利用元數(shù)據(jù)導出導入功能配置一些常見的業(yè)務(wù)表單，比如電商、CRM、教育等領(lǐng)域，然后將這些業(yè)務(wù)表單導出供用戶下載和使用。

crudapi簡介

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

demo演示

crudapi屬于產(chǎn)品級的零代碼平臺，不同于自動代碼生成器，不需要生成Controller、Service、Repository、Entity等業(yè)務(wù)代碼，程序運行起來就可以使用，真正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即可，代碼同步更新。