实现动态表单的一种思路 | 京东云技术团队

京东云开发者
• 阅读 121

一、动态表单是什么

区别于传统表单前后端配合联调的开发实现方式,动态表单通过一种基于元数据管理的配置化方法来实现表单的动态生成,并能根据配置自由增改删指定字段。实现特定需求的自助化。

实现动态表单的一种思路 | 京东云技术团队

图1.1 传统表单前后台协作模式

实现动态表单的一种思路 | 京东云技术团队

图1.2 动态表单前后台协作模式

二、解决什么问题

租户有个性化业务表单诉求的场景,千人千面系统

三、实现动态表单的一种思路

基于元数据管理的配置化表单技术共需三步来完成:

步骤A(数据划分)

将服务端底层业务数据存储结构由传统主表字段信息拆分成标准信息、个性信息两部分。其中标准信息指那些用于存储标准通用、稳定、经常作为业务查询检索条件的字段,拿电商网站商品信息举例如商品创建时间、商品名称、商品创建人等字段;个性信息用于存储易变、租户个性化、不经常用于检索的字段,如商品可售区域信息、商品资质认证状态等。将主表按以上规则划分后,其中标准信息按原来传统方式按列存储,而个性化信息则打包以jsonSchema的方式整合存储,其共同在数据库中占一列也称动态列,以mysql为例这列的格式通常为”text”类型。

步骤A的目的:统一抽象并管理易变类型的业务数据

实现动态表单的一种思路 | 京东云技术团队

图2.1 业务数据划分抽象

步骤B(业务元数据设计)

配置化表单离不开元数据设计,其中元数据指描述数据的数据。在本例中表单元数据即表单各业务项(指商品名称、商品创建时间、商品创建人等)可动态配置的核心能力。这一步将元数据配置中具有代表性的几个信息属性罗列出来,每项信息属性的用途见下图介绍。此外基于元数据信息封装元数据增删查改管理服务,实现元数据的动态配置基座。

步骤B的目的:规划业务元数据信息,提供元数据读写能力

实现动态表单的一种思路 | 京东云技术团队

图2.2 业务元数据样例

步骤C(前端动态渲染改造)

此步骤描述配置化表单的串联实现,在表单渲染环节前端首先自页面一载入就获取当前租户生效的业务元数据信息,然后基于元数据信息解析数据并动态生成网页DOM节点,最后生成各节点校验逻辑并展示页面;表单数据回显场景中,首先自页面一载入就获取当前租户生效的业务元数据信息,再获取业务数据信息,结合两者交集后(目的是仅展示最新配置生效的数据)将业务数据回显到表单中。

步骤C的目的:页面动态展示实现路径

实现动态表单的一种思路 | 京东云技术团队

图2.3 前端改造流程

四、方案缺陷

1. 使用范围,并不是所有业务表单都适合动态化 , 表单动态化的改造收益与维护损耗存在一个潜在的收益峰值点。 过于复杂的业务表单系统反而会因为动态化而变得难以维护。 动态表单会将常规业务CRUD逻辑复杂化

2. 对于大表单、复杂嵌套等表单存在一定性能开销。

3. 动态字段无法作为检索项发起检索

作者:京东工业 于洋

来源:京东云开发者社区 转载请注明来源

点赞
收藏
评论区
推荐文章
Karen110 Karen110
2年前
盘点JavaScript 事件和方法提交那些事儿
大家好,我进阶学习者。一、前言提交表单时,会触发submit事件,它通常用于在将表单发送到服务器之前对表单进行校验,或者中止提交,并使用JavaScript来处理表单。form.submit()方法允许从JavaScript启动表单发送。可以使用此方法动态地创建表单,并将其发送到服务器。二、事件:submit1\.提交表单主要有两种方式
徐小夕 徐小夕
2年前
Dooring可视化之从零实现动态表单设计器
前言之前笔者有写过一篇如何设计动态表单配置平台的文章,但是由于笔者电脑问题代码丢失,所以后期重新实现了一套表单设计器,并优化了之前的设计方式,特地做一下总结和复盘。你将收获动态表单开发的一般思路可视化领域中的表单引擎从零实现一款动态表单设计器利用H5Dooring开发一款表单设计平台正文按照习惯,我们先看看表单设计器实现的效果展示:上图中我们将表
徐小夕 徐小夕
3年前
轻松教你搞定组件的拖拽, 缩放, 多控制点伸缩和拖拽数据上报
最近笔者专注于研究可视化搭建平台的解决方案,分析了很多拖拽组件和页面动态化技术,也在H5Dooring(https://github.com/MrXujiang/h5Dooring)项目中做了很多技术实现,包括:搭建平台的组件设计和分类模式拖拽生成页面方案动态表单编辑器设计页面实时预览编译技术自定义组件和自定
LeeFJ LeeFJ
1年前
Foxnic-Web 代码生成 (6) —— 配置字段的表单组件
上一篇中我们讲述了字段配置的通用项,本篇将详细介绍字段的表单编辑器配置。针对不同的表单编辑器,可以指定不同的代码生成参数。默认情况下,代码生成会根据表字段的类型等信息自动匹配一个表单组件。当然,开发人员也可以手动指定每个字段的表单组件类型。  虽然表单组件是呈现在表单界面的,但是它的设置同样会影响搜索区域对应的条件输入框。搜索区域的条件输入框组件按一定的规则与表单组件对应。本文将逐个介绍表单组件以及它们的代码生成配置项。
项目实战,动态增删form表单
前言Hi,大家好,我是麦叔。今天老大让我做一个需求,我们的这个表单以前只支持录入一个检查器具。现在要求改为可以动态添加,满足录入多个器具。作为前
Easter79 Easter79
2年前
Vue 骚技巧,策略模式实现动态表单验证
!(https://oscimg.oschina.net/oscnet/5e0568a314054f2d995c1562bda18f70.png)策略模式(StrategyPattern)又称政策模式,其定义一系列的算法,把它们一个个封装起来,并且使它们可以互相替换。封装的策略算法一般是独立的,策略模式根据输入来调整采用哪个算法。
Easter79 Easter79
2年前
Vue + Element 实现动态添加input
 此篇博客背景:项目开发技术为vueelement,需求为form表单中动态添加input表单,本element中有现成form动态添加案例,但ui小姐姐效果图与ui库有些微差别,固重新整理。废话不多说啦,正式开始了:代码地址:https://codepen.io/newgingkgo/pen/gObMMow (备注:将代码复制至vue项目即可查看
Stella981 Stella981
2年前
DataGear 制作支持表单交互操作和多图表联动的数据可视化看板
对于数据可视化,有时需要根据用户输入的查询条件展示限定范围的数据图表,DataGear(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.datagear.tech)的看板表单功能可以快速方便地实现此类需求。下面的看板示例,包含一个柱状图、一个饼图和一个地图,用户可以通过看板表单
Stella981 Stella981
2年前
Phalcon7发布1.1.0版
合并Phalcon\Mvc\Model\Validator\到Phalcon\Validation\Validator\统一验证类。优化表单类,更加方便的创建新的表单元素,并支持转换为数组,提供给前端JS动态生成表单。内置支持HMVC。强化Model,更加方便的自定义字段和映射字段。完善了文档。<?php
达里尔 达里尔
9个月前
vue+elementui动态控制表单的必填选填
vueelementui动态控制表单的必填选填