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

回顧

通過前一篇文章 基于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界面

export

import

代碼

說明

導(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é)生表知纷、成績(jī)表為例壤圃，其中學(xué)生表學(xué)號(hào)字段引用了序列號(hào)studenNo，學(xué)生表和成績(jī)表之間是一對(duì)多關(guān)系琅轧，

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

seq

student

relation

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

metadatajson

驗(yàn)證

業(yè)務(wù)數(shù)據(jù)

小結(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可以告別枯燥無(wú)味的增刪改查代碼士复，讓您更加專注業(yè)務(wù)图谷，節(jié)約大量成本，從而提高工作效率阱洪。crudapi的目標(biāo)是讓處理數(shù)據(jù)變得更簡(jiǎn)單便贵，所有人都可以免費(fèi)使用！無(wú)需編程冗荸，通過配置自動(dòng)生成crud增刪改查RESTful API承璃，提供后臺(tái)UI管理業(yè)務(wù)數(shù)據(jù)“霰荆基于主流的開源框架盔粹，擁有自主知識(shí)產(chǎn)權(quán)，支持二次開發(fā)程癌。crudapi屬于產(chǎn)品級(jí)的零代碼平臺(tái)舷嗡，不同于自動(dòng)代碼生成器，不需要生成Controller嵌莉、Service进萄、Repository、Entity等業(yè)務(wù)代碼，程序運(yùn)行起來就可以使用中鼠，真正0代碼可婶，可以覆蓋基本的和業(yè)務(wù)無(wú)關(guān)的CRUD RESTful API。

源碼

去github或者gitee下載即可兜蠕！