CN113849173A - 一种基于json的动态表单生成方法及系统 - Google Patents

一种基于json的动态表单生成方法及系统 Download PDF

Info

Publication number
CN113849173A
CN113849173A CN202110993997.5A CN202110993997A CN113849173A CN 113849173 A CN113849173 A CN 113849173A CN 202110993997 A CN202110993997 A CN 202110993997A CN 113849173 A CN113849173 A CN 113849173A
Authority
CN
China
Prior art keywords
json
field
memory object
configuration
based dynamic
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202110993997.5A
Other languages
English (en)
Inventor
朱家兵
张晓明
李�灿
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Inspur Software Technology Co Ltd
Original Assignee
Inspur Software Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Inspur Software Technology Co Ltd filed Critical Inspur Software Technology Co Ltd
Priority to CN202110993997.5A priority Critical patent/CN113849173A/zh
Publication of CN113849173A publication Critical patent/CN113849173A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • Stored Programmes (AREA)

Abstract

本发明特别涉及一种基于JSON的动态表单生成方法及系统。该基于JSON的动态表单生成方法，先将表单JSON文件读入到内存，并为之创建一个内存对象；在表单加载为内存对象时，对表单JSON格式进行校验，并在发现不符合表单定义规则时给出提示信息；然后将读取的表单内存对象转换成UI框架特定的前端组件或元素，依托UI框架将最终的表单展现在Web页面中。该基于JSON的动态表单生成方法及系统，使用通用的JSON格式定义表单内将会动态变化的各个细节，同时提供了兼容各UI框架的页面展现适配机制，从而提高了复杂表单开发效率、可复用性、可维护性和安全性。

Description

一种基于JSON的动态表单生成方法及系统
技术领域
本发明涉及数据管理技术领域，特别涉及一种基于JSON的动态表单生成方法及系统。
背景技术
随着信息化的发展，更多的业务办理场景由线下转到了线上，Web是业务系统主要的载体，表单在其中主要承载着数据采集功能。当系统所需的表单面临表单数量多、表单域多、表单交互逻辑复杂和表单变化频繁等场景时，表单开发和维护的效率和质量问题日益凸显。
现有的web表单开发技术，需要基于HTML语言手动编写每一个表单域、基于CSS语言对表单各元素编写格式化样式、基于JavaScript语言编写表单交互逻辑，该方法存在开发维护难度大、扩展性差和安全性差等问题。
基于上述问题，本发明提出了一种基于JSON的动态表单生成方法及系统。
发明内容
本发明为了弥补现有技术的缺陷，提供了一种简单高效的基于JSON的动态表单生成方法及系统。
本发明是通过如下技术方案实现的：
一种基于JSON的动态表单生成方法及系统，其特征在于：包括以下步骤：
第一步，将表单JSON文件读入到内存，并为之创建一个内存对象；
第二步，在表单加载为内存对象时，对表单JSON格式进行校验，并在发现不符合表单定义规则时给出提示信息；
第三步，将读取的表单内存对象转换成UI框架特定的前端组件或元素；
第四步，经过适配机制的转换，依托UI框架将最终的表单展现在Web页面中。
所述第三步中，表单内存对象中定义了通用的表单域模型、表单事件模型和表单配置模型，表单解析器在不同的UI框架下提供相应的适配机制，使其能够将通用模型转换为UI框架特定的前端组件或元素。
该基于JSON的动态表单生成系统，包括表单加载器和表单解析器；
所述表单加载器负责将表单JSON文件读入到内存，并为之创建一个内存对象；在表单加载为内存对象时，表单加载器负责对表单JSON格式进行校验，并在发现不符合表单定义规则时给出提示信息；
所述表单解析器负责将表单加载器读取的表单内存对象转换成UI框架特定的前端组件或元素，然后依托UI框架将最终的表单展现在Web页面中。
所述表单内存对象中，表单的基本结构包括表单配置、表单域和表单事件三部分；
其中，表单配置包括表单基本配置和表单UI配置；表单域包括一到多个表单域描述信息，描述信息包括表单域类型(type)，表单域名称(field)和表单域标题(title)；所述表单事件包括一到多个表单事件，表单事件的值表示对预先定义的函数的引用。
所述表单基本配置包括但不限于表单插入的dom节点、表单初始值、组件全局配置和分页配置。
所述表单UI配置包括但不限于UI框架、表单布局和表单样式引用。
所述表单域类型(type)表示输入类型，包括但不限于文本、数字、日期、多行文本和选择框类型；
所述表单域名称(field)表示数据模型名称，与后端数据接口的数据模型一一对应；
所述表单域标题(title)表示标签名称，用于标识和说明当前域的内容。
所述表单事件的值引用的函数为共用函数。
所述表单解析器转换的方式支持多种UI框架。
所述表单加载器支持两种文件加载方式：
a)基于AJAX技术，异步加载远程表单JSON文件；
b)基于ES6 import语法，在工程内作为模块导入表单JSON文件。
所述表单加载器校验包含以下内容：
a)表单JSON文件结构是否符合表单定义规则；
b)表单配置中各项内容的值是否符合取值范围；
c)表单域类型是否符合取值范围且表单域名称唯一；
d)表单事件引用的函数是否在运行环境中已声明；
若上述有一项不符合，则给出提示信息。
本发明的有益效果是：该基于JSON的动态表单生成方法及系统，使用通用的JSON格式定义表单内将会动态变化的各个细节，同时提供了兼容各UI框架的页面展现适配机制，从而提高了复杂表单开发效率、可复用性、可维护性和安全性。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
附图1为本发明基于JSON的动态表单生成方法示意图。
具体实施方式
为了使本技术领域的人员更好的理解本发明中的技术方案，下面将结合本发明实施例，对本发明实施例中的技术方案进行清楚、完整的描述。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。
该基于JSON的动态表单生成方法，包括以下步骤：
第一步，将表单JSON文件读入到内存，并为之创建一个内存对象；
第二步，在表单加载为内存对象时，对表单JSON格式进行校验，并在发现不符合表单定义规则时给出提示信息；
第三步，将读取的表单内存对象转换成UI框架特定的前端组件或元素；
第四步，经过适配机制的转换，依托UI框架将最终的表单展现在Web页面中。
所述第三步中，表单内存对象中定义了通用的表单域模型、表单事件模型和表单配置模型，表单解析器在不同的UI框架下提供相应的适配机制，使其能够将通用模型转换为UI框架特定的前端组件或元素。
该基于JSON的动态表单生成系统，包括表单加载器和表单解析器；
所述表单加载器负责将表单JSON文件读入到内存，并为之创建一个内存对象；在表单加载为内存对象时，表单加载器负责对表单JSON格式进行校验，并在发现不符合表单定义规则时给出提示信息；
所述表单解析器负责将表单加载器读取的表单内存对象转换成UI框架特定的前端组件或元素，然后依托UI框架将最终的表单展现在Web页面中。
所述表单内存对象中，表单的基本结构包括表单配置、表单域和表单事件三部分；其示例如下：
Figure BDA0003233241390000041
其中，表单配置包括表单基本配置和表单UI配置；其示例如下：
Figure BDA0003233241390000042
表单域包括一到多个表单域描述信息，其示例如下：
Figure BDA0003233241390000043
描述信息包括表单域类型(type)，表单域名称(field)和表单域标题(title)；
所述表单事件包括一到多个表单事件，其示例如下：
Figure BDA0003233241390000051
表单事件的值表示对预先定义的函数的引用。
所述表单基本配置包括但不限于表单插入的dom节点、表单初始值、组件全局配置和分页配置。
所述表单UI配置包括但不限于UI框架、表单布局和表单样式引用。
所述表单域类型(type)表示输入类型，包括但不限于文本、数字、日期、多行文本和选择框类型；
所述表单域名称(field)表示数据模型名称，与后端数据接口的数据模型一一对应；
所述表单域标题(title)表示标签名称，用于标识和说明当前域的内容。
所述表单事件的值引用的函数为共用函数。
所述表单解析器转换的方式支持多种UI框架。
所述表单加载器支持两种文件加载方式：
a)基于AJAX技术，异步加载远程表单JSON文件；
b)基于ES6 import语法，在工程内作为模块导入表单JSON文件。
所述表单加载器校验包含以下内容：
a)表单JSON文件结构是否符合表单定义规则；
b)表单配置中各项内容的值是否符合取值范围；
c)表单域类型是否符合取值范围且表单域名称唯一；
d)表单事件引用的函数是否在运行环境中已声明；
若上述有一项不符合，则给出提示信息。
以上所述的实施例，只是本发明具体实施方式的一种，本领域的技术人员在本发明技术方案范围内进行的通常变化和替换都应包含在本发明的保护范围内。

Claims (8)

1.一种基于JSON的动态表单生成方法统，其特征在于：包括以下步骤：
第一步，将表单JSON文件读入到内存，并为之创建一个内存对象；
第二步，在表单加载为内存对象时，对表单JSON格式进行校验，并在发现不符合表单定义规则时给出提示信息；
第三步，将读取的表单内存对象转换成UI框架特定的前端组件或元素；
第四步，经过适配机制的转换，依托UI框架将最终的表单展现在Web页面中。
2.根据权利要求1所述的基于JSON的动态表单生成方法统，其特征在于：所述第三步中，表单内存对象中定义了通用的表单域模型、表单事件模型和表单配置模型，表单解析器在不同的UI框架下提供相应的适配机制，使其能够将通用模型转换为UI框架特定的前端组件或元素。
3.一种基于JSON的动态表单生成系统，其特征在于：包括表单加载器和表单解析器；
所述表单加载器负责将表单JSON文件读入到内存，并为之创建一个内存对象；在表单加载为内存对象时，表单加载器负责对表单JSON格式进行校验，并在发现不符合表单定义规则时给出提示信息；
所述表单解析器负责将表单加载器读取的表单内存对象转换成UI框架特定的前端组件或元素，然后依托UI框架将最终的表单展现在Web页面中。
4.根据权利要求3所述的基于JSON的动态表单生成系统，其特征在于：所述表单内存对象中，表单的基本结构包括表单配置、表单域和表单事件三部分；
其中，表单配置包括表单基本配置和表单UI配置；表单域包括一到多个表单域描述信息，描述信息包括表单域类型，表单域名称和表单域标题；所述表单事件包括一到多个表单事件，表单事件的值表示对预先定义的函数的引用；
所述表单基本配置包括但不限于表单插入的dom节点、表单初始值、组件全局配置和分页配置；
所述表单UI配置包括但不限于UI框架、表单布局和表单样式引用；
所述表单域类型表示输入类型，包括但不限于文本、数字、日期、多行文本和选择框类型；
所述表单域名称表示数据模型名称，与后端数据接口的数据模型一一对应；
所述表单域标题表示标签名称，用于标识和说明当前域的内容。
5.根据权利要求4所述的基于JSON的动态表单生成系统，其特征在于：所述表单事件的值引用的函数为共用函数。
6.根据权利要求3所述的基于JSON的动态表单生成系统，其特征在于：所述表单解析器转换的方式支持多种UI框架。
7.根据权利要求3所述的基于JSON的动态表单生成方法及系统，其特征在于：所述表单加载器支持两种文件加载方式：
a)基于AJAX技术，异步加载远程表单JSON文件；
b)基于ES6 import语法，在工程内作为模块导入表单JSON文件。
8.根据权利要求3所述的基于JSON的动态表单生成方法及系统，其特征在于：所述表单加载器校验包含以下内容：
a)表单JSON文件结构是否符合表单定义规则；
b)表单配置中各项内容的值是否符合取值范围；
c)表单域类型是否符合取值范围且表单域名称唯一；
d)表单事件引用的函数是否在运行环境中已声明；
若上述有一项不符合，则给出提示信息。
CN202110993997.5A 2021-08-27 2021-08-27 一种基于json的动态表单生成方法及系统 Pending CN113849173A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110993997.5A CN113849173A (zh) 2021-08-27 2021-08-27 一种基于json的动态表单生成方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110993997.5A CN113849173A (zh) 2021-08-27 2021-08-27 一种基于json的动态表单生成方法及系统

Publications (1)

Publication Number Publication Date
CN113849173A true CN113849173A (zh) 2021-12-28

Family

ID=78976248

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110993997.5A Pending CN113849173A (zh) 2021-08-27 2021-08-27 一种基于json的动态表单生成方法及系统

Country Status (1)

Country Link
CN (1) CN113849173A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116627418A (zh) * 2023-07-21 2023-08-22 之江实验室 一种基于递归算法的多级表单界面可视化生成方法及装置

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116627418A (zh) * 2023-07-21 2023-08-22 之江实验室 一种基于递归算法的多级表单界面可视化生成方法及装置
CN116627418B (zh) * 2023-07-21 2023-10-03 之江实验室 一种基于递归算法的多级表单界面可视化生成方法及装置

Similar Documents

Publication Publication Date Title
CN100501740C (zh) 将不同格式的文本数据转换为统一格式的方法及其系统
CN101976235A (zh) 基于动态网页的可扩展的Word报告自动生成方法
US20120017143A1 (en) Electronic device and method for data management
CN107391153A (zh) 一种基于Spring与MyBatis框架整合的代码生成方法及装置
CN104881275A (zh) 一种电子报表生成方法及装置
CN102937949B (zh) 一种在富文本编辑器内实现英文拼写检查的方法及系统
CN107168695B (zh) 一种excel数据解析方法及系统
CN112949276A (zh) 报表生成方法、装置、电子设备及存储介质
CN111309313A (zh) 一种快速生成html以及存储表单数据的方法
CN101980183A (zh) 一种解析Word文件信息的方法及其系统
CN108170409B (zh) Web前端控件的开发方法和系统
CN114338855B (zh) 一种实现hl7、fhir标准、自定义xml消息的解析生成方法
CN105975446A (zh) 手机端分模块显示word文档内容的方法及系统
CN110968294A (zh) 一种业务领域模型建立系统及方法
CN108664546B (zh) Xml数据结构转换方法和装置
CN109299074A (zh) 一种基于模板化数据库视图的数据校验方法及系统
CN113849173A (zh) 一种基于json的动态表单生成方法及系统
CN115422066A (zh) 一种测试用例的管理方法和装置
CN113723063B (zh) 一种rtf转html并在pdf文件实现效果的方法
CN111311461B (zh) 基于b-s的结构化动态病历表单的编辑器及生成方法
CN109614143B (zh) Ietm浏览器中自动生成故障流程图的开发方法
CN110619185B (zh) 一种数据处理方法、装置及电子设备
CN112905450B (zh) 基于模板变量替换的芯片寄存器自动开发系统
CN103885963A (zh) 一种内容存储与显示的方法和系统
CN112307400A (zh) 一种一键生成后台管理系统web项目的方法及系统

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination