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

回顧

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

簡介

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

UI界面

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

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

代碼

說明

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

數據格式

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

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

核心代碼

導出元數據

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("元數據表生成成功，請等待下載完成后查看！");

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

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

導入元數據

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，學生表和成績表之間是一對多關系，

元數據定義

學號studenNo流水號

一對多relation

導出導入

導出的json文件

驗證

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

小結

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

crudapi簡介

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

demo演示

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