乐趣区

关于javascript:免费开源基于Vue和Quasar的前端SPA项目crudapi零代码开发平台后台管理系统实战之元数据导出导入十五

基于 Vue 和 Quasar 的前端 SPA 我的项目实战之元数据导出导入(十五)

回顾

通过前一篇文章 基于 Vue 和 Quasar 的前端 SPA 我的项目实战之模块治理(十四)的介绍,通过模块治理将具备雷同类型或属于同一业务的表单进行分类,不便疾速查找。本文次要介绍元数据表单的导出和导入性能。

简介

针对元数据表,有时须要导出元数据到本地文件,用来备份数据,这里采纳的文件格式为 json。后续能够通过导入性能进行导入,既能够用来复原元数据,也能够用于分享元数据给其余零碎。

UI 界面


选中须要导出的表单,而后点击“批量导出”按钮


抉择之前导出的元数据 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,学生表和成绩表之间是一对多关系,

元数据定义


学号 studenNo 流水号


学生表 student


一对多 relation

导出导入


导出的 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 即可,代码同步更新。

退出移动版