基于Vue和Quasar的前端SPA專案實戰之元資料匯出匯入（十五）

回顧

通過前一篇文章基于Vue和Quasar的前端SPA專案實戰之模塊管理（十四）的介紹，通過模塊管理將具有相同型別或屬于同一業務的表單進行分類，方便快速查找，本文主要介紹元資料表單的匯出和匯入功能，

簡介

針對元資料表，有時需要匯出元資料到本地檔案，用來備份資料，這里采用的檔案格式為json，后續可以通過匯入功能進行匯入，既可以用來恢復元資料，也可以用于分享元資料給其他系統，

UI界面

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

import
選擇之前匯出的元資料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，學生表和成績表之間是一對多關系，

元資料定義

seq
學號studenNo流水號

student
學生表student

一對多relation

匯出匯入

metadatajson
匯出的json檔案

驗證

匯出json檔案之后洗掉已有表單，然后重新匯入，得到的元資料和之前的一樣，測驗錄入學生成績業務資料，結果和期望的一致，

小結

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

crudapi簡介

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

demo演示

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/302694.html

標籤：JavaScript

上一篇：從瀏覽器渲染層面決議css3動效優化原理

下一篇：從瀏覽器渲染層面決議css3動效優化原理

「免費開源」基于Vue和Quasar的前端SPA專案crudapi零代碼開發平臺后臺管理系統實戰之元資料匯出匯入（十五）