Vue2.0 & Element-UI驱动的自定义表单2.0:设计与父子表结构解析
需积分: 0 46 浏览量
更新于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 上传
2021-06-01 上传
2013-12-12 上传
2012-02-12 上传
2021-06-01 上传
人亲卓玛
- 粉丝: 34
- 资源: 329
最新资源
- 探索数据转换实验平台在设备装置中的应用
- 使用git-log-to-tikz.py将Git日志转换为TIKZ图形
- 小栗子源码2.9.3版本发布
- 使用Tinder-Hack-Client实现Tinder API交互
- Android Studio新模板:个性化Material Design导航抽屉
- React API分页模块:数据获取与页面管理
- C语言实现顺序表的动态分配方法
- 光催化分解水产氢固溶体催化剂制备技术揭秘
- VS2013环境下tinyxml库的32位与64位编译指南
- 网易云歌词情感分析系统实现与架构
- React应用展示GitHub用户详细信息及项目分析
- LayUI2.1.6帮助文档API功能详解
- 全栈开发实现的chatgpt应用可打包小程序/H5/App
- C++实现顺序表的动态内存分配技术
- Java制作水果格斗游戏:策略与随机性的结合
- 基于若依框架的后台管理系统开发实例解析