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

crudapi發表於2021-09-26
Vue前端API

基於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
一對多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即可，程式碼同步更新。

相關文章