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

回顧

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

簡(jiǎn)介

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

UI界面

選中需要導(dǎo)出的表單，然后點(diǎn)擊“批量導(dǎo)出”按鈕

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

代碼

說明

導(dǎo)出的時(shí)候需要把表單引用的序列號(hào)sequence和表關(guān)系relation一并導(dǎo)出

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

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

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

核心代碼

導(dǎo)出元數(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: "導(dǎo)出中"
  });

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

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

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

導(dǎo)入元數(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("導(dǎo)入成功");
this.$router.go(-1);
this.$q.loading.hide();
  } catch (error) {
this.$q.loading.hide();
console.error(error);
  }
}

例子

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

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

學(xué)號(hào)studenNo流水號(hào)

一對(duì)多relation

導(dǎo)出導(dǎo)入

導(dǎo)出的json文件

驗(yàn)證

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

小結(jié)

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

crudapi簡(jiǎn)介

crudapi是crud+api組合，表示增刪改查接口，是一款零代碼可配置的產(chǎn)品。使用crudapi可以告別枯燥無味的增刪改查代碼，讓您更加專注業(yè)務(wù)，節(jié)約大量成本，從而提高工作效率。crudapi的目標(biāo)是讓處理數(shù)據(jù)變得更簡(jiǎn)單，所有人都可以免費(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??

測(cè)試地址：??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即可，代碼同步更新。