Vue2.0 & Element-UI驱动的自定义表单2.0:设计与父子表结构解析

需积分: 0 1 下载量 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数据,并根据组件类型正确地将前端设计映射到实际的数据库表结构上。这包括了前端与后端的协调工作,以及对数据存储规则的遵循,确保表单数据的完整性和一致性。