实现动态表单的一种思路

实现,动态,表单,一种,思路 · 浏览次数 : 96

小编点评

**一、动态表单与传统表单前后端配合联调的对比** | 特征 | 动态表单 | 传统表单 | |---|---|---| | 数据配置 | 元数据 | 主表字段 | | 动态增改 | 通过配置修改 | 通过前端动态修改 | | 可选字段 | 可配置 | 不可配置 | | 维护成本 | 低 | 高 | **二、租户个性化业务表单的场景** 当租户需要创建个性化业务表单时,需要考虑以下因素: * 业务元数据:包括商品名称、描述、价格、库存等信息。 * 规则配置:包括个性化规则、检索条件等。 **三、基于元数据管理的配置化表单技术步骤** 1. **数据划分**:将主表数据拆分成标准信息和个性化信息。 * Standard Information:包含通用、稳定字段。 * Personalize Information:包含易变、个性化字段。 2. **元数据设计**:配置业务元数据,包括标准信息和个性化信息。 * 元数据包含业务项的属性,如商品名称、描述、价格等。 3. **前端动态渲染改造**: * 获取当前租户生效的业务元数据。 * 解析元数据并动态生成 DOM 节点。 * 生成表单元素并设置校验逻辑。 **四、方案缺陷** * 使用范围:动态表单的改造收益与维护损耗存在一个潜在的收益峰值点。 * 过于复杂的业务表单系统反而会因为动态化而变得难以维护。

正文

一、动态表单是什么

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

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

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

二、解决什么问题

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

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

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

步骤A(数据划分)

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

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

图2.1 业务数据划分抽象

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

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

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

图2.2 业务元数据样例

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

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

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

图2.3 前端改造流程

四、方案缺陷

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

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

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

作者:京东工业 于洋

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

与实现动态表单的一种思路相似的内容:

实现动态表单的一种思路

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

跟我一起学习和开发动态表单系统-前端用vue、elementui实现方法(3)

基于 Vue、Element UI 和 Spring Boot + MyBatis 的动态表单系统前端实现解析 在现代企业信息系统中,动态表单是一种非常常见的功能。它可以根据业务需求灵活地调整表单结构,以满足不同的数据收集和展示需求。在本文中,我们将探讨一种基于 Vue、Element UI 和 S

表单引擎字段类型该如何设计?

在软件行业的发展过程中,从业者对于开发效率和质量提升是一直在追随的一个目标。通过复用软件模块来实现这些目标通常是一种有效的手段,从头文件引入、面向对象的封装、动态库的引入、代码生成器类工具、低代码引擎等,随着行业技术发展能复用的层次也从底层的文件逐步到界面层面的复用。本文主要围绕在OA、低代码平台中

基于SqlSugar的开发框架循序渐进介绍(22)-- Vue3+TypeScript的前端工作流模块中实现统一的表单编辑和表单详情查看处理

在工作流页面中,除了特定的业务表单信息外,往往也需要同时展示通用申请单的相关信息,因此在页面设计的时候需要使用一些组件化的概念来实现动态的内容展示处理,本篇随笔介绍Vue3+TypeScript+ElementPus的前端工作流模块中实现统一的表单编辑和表单详情查看处理。

一种实现Spring动态数据源切换的方法

## 1 目标 不在现有查询代码逻辑上做任何改动,实现dao维度的数据源切换(即表维度) ## 2 使用场景 节约bdp的集群资源。接入新的宽表时,通常uat验证后就会停止集群释放资源,在对应的查询服务器uat环境时需要查询的是生产库的表数据(uat库表因为bdp实时任务停止,没有数据落入),只进行

7.5 C/C++ 实现链表队列

链表队列是一种基于链表实现的队列,相比于顺序队列而言,链表队列不需要预先申请固定大小的内存空间,可以根据需要动态申请和释放内存。在链表队列中,每个节点包含一个数据元素和一个指向下一个节点的指针,头节点表示队头,尾节点表示队尾,入队操作在队尾插入元素,出队操作在队头删除元素,队列的长度由节点数量决定。由于链表队列没有容量限制,因此可以处理任意数量的元素,但是相比于顺序队列,链表队列的访问速度较慢,因

驱动开发:内核解析PE结构导出表

在笔者的上一篇文章`《驱动开发:内核特征码扫描PE代码段》`中`LyShark`带大家通过封装好的`LySharkToolsUtilKernelBase`函数实现了动态获取内核模块基址,并通过`ntimage.h`头文件中提供的系列函数解析了指定内核模块的`PE节表`参数,本章将继续延申这个话题,实现对PE文件导出表的解析任务,导出表无法动态获取,解析导出表则必须读入内核模块到内存才可继续解析,所

1.7 完善自定位ShellCode后门

在之前的文章中,我们实现了一个正向的匿名管道`ShellCode`后门,为了保证文章的简洁易懂并没有增加针对调用函数的动态定位功能,此类方法在更换系统后则由于地址变化导致我们的后门无法正常使用,接下来将实现通过PEB获取`GetProcAddrees`函数地址,并根据该函数实现所需其他函数的地址自定位功能,通过枚举内存导出表的方式自动实现定位所需函数的动态地址,从而实现后门的通用性。

1.7 完善自定位ShellCode

在之前的文章中,我们实现了一个正向的匿名管道`ShellCode`后门,为了保证文章的简洁易懂并没有增加针对调用函数的动态定位功能,此类方法在更换系统后则由于地址变化导致我们的后门无法正常使用,接下来将实现通过PEB获取`GetProcAddrees`函数地址,并根据该函数实现所需其他函数的地址自定位功能,通过枚举内存导出表的方式自动实现定位所需函数的动态地址,从而实现后门的通用性。

第120篇: DOM编程(常用操作、动态脚本、样式及动态表格)

好家伙,我回来了, 本篇为《JS高级程序设计》第十四章“DOM编程”学习笔记 1.DOM编程 我们知道DOM是HTML文档的编程接口, 我们可以通过HTML代码实现DOM操作, 也同样能够通过JavaScript实现DOM操作。 2.JS操作DOM 我们来简单的举个例子: 随便开一个空白的html页