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

基于Vue和Quasar的前端SPA項目實戰(zhàn)之元數(shù)據(jù)導(dǎo)出導(dǎo)入（十五）

回顧

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

簡介

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

UI界面

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

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

代碼

說明

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

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

包括sequences, tables, tableRelations三個字段，類型都是數(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ù)表生成成功，請等待下載完成后查看！");

    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é)號字段引用了序列號studenNo，學(xué)生表和成績表之間是一對多關(guān)系，

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

學(xué)號studenNo流水號

學(xué)生表student

一對多relation

#

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

導(dǎo)出的json文件

#

驗證

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

小結(jié)

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

crudapi簡介

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