百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

如何设计一个表单引擎?

zhezhongyun 2025-02-15 18:17 56 浏览

表单的本质是业务,没有表单是无法完成业务系统的,而动态表单使业务系统更高级。动态表单是什么呢?它是如何工作的?应用场景有哪些?一起来看一下吧。

一、表单

表单在网页中主要负责数据采集功能,是提交数据的一切形式。表单的本质是提交数据,不仅仅包含输入框、下拉选择框等这些控件,常见的按钮空间也属于一个表单。

1. 动态表单

动态表单(Dynamic Form),指在前端运行过程中可依赖某些业务逻辑发生表单项变化的表单,还包括表单布局、表单数据管理、表单校验、表单交互、表单项联动逻辑等原本由前端编程完成的表单开发,转由后端通过 API 接口输出表单描述自动完成上述所有内容的表单开发形式。

(动态表单原理示意图)

2. 动态表单的特点优势

表单的本质是业务,而动态表单使业务系统更高级。

普通表单是一个表单写一份前端的代码,代码全部由前端开发者完成(后端配合接口输出)。而动态表单则是一个表单对应一个 JSON(由后端输出),所有表单由一份代码(动态表单引擎)进行加载和渲染。

所以,动态表单具有以下优势:

  • 客户端运行的代码量更少;
  • 每个表单的JSON按需加载;
  • 表单需求变化时,无需前端修改发版,只需编辑数据库中的JSON。

二、表单控件

表单控件是提供一组允许用户操作的对象,从而接收用户输入的数据,用户可操作该对象来执行对表单设计,修改等操作。

1. HTML表单种常见的13个控件

input元素无疑是一个庞大和复杂的元素,但它并不是唯一的表单控件。还有button、select、option、label、optgroup、textarea、fieldset、legend这八个传统表单控件,datalist、progress、meter、output、keygen这五个新增表单控件。

2. 动态表单控件

动态表单是老厂商天翎核心技术之一,也是天翎公司核心产品MyApps的重要组成部分。通过对于动态表单的应用,可以避免在电子流程系统中硬编码的数据采集及处理表单,提高系统的可维护性。

说明:

Form,动态表单实现的基本入口,描述了DynaForm的最基本属性,比如名称、ID、以及最核心的TemplateContext。TemplateContext中保存的是Form的描述XML,通过此XML描述两类信息:

  1. Form中所具有的Field以及Field的类型、名称、长度、计算代码等等,XML;
  2. Form的格式,比如排列次序、表格定列化的过程当中,系统自动解析XML的内容并将其转换为Java Object并由此具备Object的行为特性;位等。Form作为一个ValueObject存储在数据库中。

FormElement,接口,表示Form中的基本元素;

FormField,动态表单的最基本元素,在myApps/OBPM中被声明为Abstract,具体Object行为依赖于具体的SubClass实现;

TextField,单行文本框,继承FormField;

SelectField,下拉选择框,继承FormField;

TextareaField,多行文本框,继承FormField;

CheckBoxField,复选框,继承FormField;

RadioBoxField,单选框,继承FormField;

Textpart,静态文本段,除各种Field以外的静态文本部分,继承FormElement;

ComponentField,自定义组件,继承FormField;

AttachmentUploadField,附件上传组件,继承FormField;

ImageUploadField,图片上传组件,继承FormField;

ViewDialogField,视图组件,用于实现主从结构的表单,继承FormField;

CalctextField,计算文本组件,用于实现需要计算的文本,继承FormField;

IncludeField,实现SubForm的包含,继承FormField;

WordField,Word组件,继承FormField;

OcrField,为将来预留的接口,系统暂未实现;

三、表单引擎

表单引擎是为快速实施项目研发的轻量级表单设计工具。采用表单引擎工具可在不开发和新增加代码的情况下设计出新表单样式,同比程序开发可省掉程序员差不多70%的开发工作量,并且后期维护相对简单,管理方便。

1. 工作原理

在了解了表单的基本机构后,进一步看看表单引擎是如何工作的。

从客户端(Client)输入数据(Document),比如一个excel文件,表单(Form)结合excel文件自动生成HTML,如下图:

(表单结合文档生成HTML过程)

(XML解析为表单对象的过程)

(表单转为HTML过程)

(表单生成数据库)

2. 应用场景

天翎Myapps低代码开发平台的表单引擎是基于Web界面上可视化编辑的表单设计系统,同时支持印刷模式和拖拽模式两种设计方式,形象可见,操作方便。印刷模式可以做一些复杂的表单配置,同时还支持word表格的导入;拖拽模式:基于Vue的表单设计器,采用可视化拖拉拽的模式进行表单的设计。

(表单前台)

(表单后台)

本文由 @周志军Jarod 原创发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

相关推荐

Python入门学习记录之一:变量_python怎么用变量

写这个,主要是对自己学习python知识的一个总结,也是加深自己的印象。变量(英文:variable),也叫标识符。在python中,变量的命名规则有以下三点:>变量名只能包含字母、数字和下划线...

python变量命名规则——来自小白的总结

python是一个动态编译类编程语言,所以程序在运行前不需要如C语言的先行编译动作,因此也只有在程序运行过程中才能发现程序的问题。基于此,python的变量就有一定的命名规范。python作为当前热门...

Python入门学习教程:第 2 章 变量与数据类型

2.1什么是变量?在编程中,变量就像一个存放数据的容器,它可以存储各种信息,并且这些信息可以被读取和修改。想象一下,变量就如同我们生活中的盒子,你可以把东西放进去,也可以随时拿出来看看,甚至可以换成...

绘制学术论文中的“三线表”具体指导

在科研过程中,大家用到最多的可能就是“三线表”。“三线表”,一般主要由三条横线构成,当然在变量名栏里也可以拆分单元格,出现更多的线。更重要的是,“三线表”也是一种数据记录规范,以“三线表”形式记录的数...

Python基础语法知识--变量和数据类型

学习Python中的变量和数据类型至关重要,因为它们构成了Python编程的基石。以下是帮助您了解Python中的变量和数据类型的分步指南:1.变量:变量在Python中用于存储数据值。它们充...

一文搞懂 Python 中的所有标点符号

反引号`无任何作用。传说Python3中它被移除是因为和单引号字符'太相似。波浪号~(按位取反符号)~被称为取反或补码运算符。它放在我们想要取反的对象前面。如果放在一个整数n...

Python变量类型和运算符_python中变量的含义

别再被小名词坑哭了:Python新手常犯的那些隐蔽错误,我用同事的真实bug拆给你看我记得有一次和同事张姐一起追查一个看似随机崩溃的脚本,最后发现罪魁祸首竟然是她把变量命名成了list。说实话...

从零开始:深入剖析 Spring Boot3 中配置文件的加载顺序

在当今的互联网软件开发领域,SpringBoot无疑是最为热门和广泛应用的框架之一。它以其强大的功能、便捷的开发体验,极大地提升了开发效率,成为众多开发者构建Web应用程序的首选。而在Spr...

Python中下划线 ‘_’ 的用法,你知道几种

Python中下划线()是一个有特殊含义和用途的符号,它可以用来表示以下几种情况:1在解释器中,下划线(_)表示上一个表达式的值,可以用来进行快速计算或测试。例如:>>>2+...

解锁Shell编程:变量_shell $变量

引言:开启Shell编程大门Shell作为用户与Linux内核之间的桥梁,为我们提供了强大的命令行交互方式。它不仅能执行简单的文件操作、进程管理,还能通过编写脚本实现复杂的自动化任务。无论是...

一文学会Python的变量命名规则!_python的变量命名有哪些要求

目录1.变量的命名原则3.内置函数尽量不要做变量4.删除变量和垃圾回收机制5.结语1.变量的命名原则①由英文字母、_(下划线)、或中文开头②变量名称只能由英文字母、数字、下画线或中文字所组成。③英文字...

更可靠的Rust-语法篇-区分语句/表达式,略览if/loop/while/for

src/main.rs://函数定义fnadd(a:i32,b:i32)->i32{a+b//末尾表达式}fnmain(){leta:i3...

C++第五课:变量的命名规则_c++中变量的命名规则

变量的命名不是想怎么起就怎么起的,而是有一套固定的规则的。具体规则:1.名字要合法:变量名必须是由字母、数字或下划线组成。例如:a,a1,a_1。2.开头不能是数字。例如:可以a1,但不能起1a。3....

Rust编程-核心篇-不安全编程_rust安全性

Unsafe的必要性Rust的所有权系统和类型系统为我们提供了强大的安全保障,但在某些情况下,我们需要突破这些限制来:与C代码交互实现底层系统编程优化性能关键代码实现某些编译器无法验证的安全操作Rus...

探秘 Python 内存管理:背后的神奇机制

在编程的世界里,内存管理就如同幕后的精密操控者,确保程序的高效运行。Python作为一种广泛使用的编程语言,其内存管理机制既巧妙又复杂,为开发者们提供了便利的同时,也展现了强大的底层控制能力。一、P...