Vue2.0 & Element-UI驱动的自定义表单2.0:设计与父子表结构解析
需积分: 0 19 浏览量
更新于2024-08-05
收藏 397KB PDF 举报
自定义表单2.0是一个基于Vue2.0与Element-UI开发的表单设计工具,它简化了前端和后端之间的交互流程。在表单设计过程中,开发者首先在FormMaking UI设计器中创建所需的表单结构,包括支持子表功能,但当前限制在两级关系,即一个父表对应多个子表(一父多子)。设计时需要注意的是,form-making中的某些组件可能需要处理不同的数据类型,以确保兼容性和准确性。
在设计流程中,前端需要定义相关的事件,通过调用form-making内置API获取界面对应的JSON数据,并将其传递给后端API。后端API解析这些JSON,提取组件信息并按照约定的规则生成相应的数据库表。这个规则包括:
1. 主表命名约定:采用“bo_”加上应用ID和表单编码的MD5哈希值,如"bo_ab53fd4a403be816d09edf36f68593f5"。
2. 子表命名:主表名加上子表标识符,例如"bo_ab53fd4a403be816d09edf36f68593f5_sub_XXX"。
3. 表单配置数据存储在'app_form'表中,其中的关键字段有'form_design_json'用于存储前端传来的JSON,以及'table_relation_ship'记录父子表之间的关系。
在数据上报阶段,特别是涉及附件组件时,文件会先上传,得到预览地址,然后与表单其他数据一起存储到业务表中。表单数据的处理涉及到服务实现,如VueFormJsonResolverServicePlus类,负责JSON解析,以及表单组件类型与数据库表之间的映射关系管理。
设计实现中,开发者需要熟悉如何使用VueFormJsonResolverServicePlus服务来解析JSON数据,并根据组件类型正确地将前端设计映射到实际的数据库表结构上。这包括了前端与后端的协调工作,以及对数据存储规则的遵循,确保表单数据的完整性和一致性。
2020-03-12 上传
2022-03-28 上传
2023-06-07 上传
2014-08-21 上传
2014-09-05 上传
2018-01-11 上传
2015-08-13 上传
2021-06-01 上传
人亲卓玛
- 粉丝: 37
- 资源: 329
最新资源
- JHU荣誉单变量微积分课程教案介绍
- Naruto爱好者必备CLI测试应用
- Android应用显示Ignaz-Taschner-Gymnasium取消课程概览
- ASP学生信息档案管理系统毕业设计及完整源码
- Java商城源码解析:酒店管理系统快速开发指南
- 构建可解析文本框:.NET 3.5中实现文本解析与验证
- Java语言打造任天堂红白机模拟器—nes4j解析
- 基于Hadoop和Hive的网络流量分析工具介绍
- Unity实现帝国象棋:从游戏到复刻
- WordPress文档嵌入插件:无需浏览器插件即可上传和显示文档
- Android开源项目精选:优秀项目篇
- 黑色设计商务酷站模板 - 网站构建新选择
- Rollup插件去除JS文件横幅:横扫许可证头
- AngularDart中Hammock服务的使用与REST API集成
- 开源AVR编程器:高效、低成本的微控制器编程解决方案
- Anya Keller 图片组合的开发部署记录