CN117472372B - 一种响应式表单搭建方法及系统 - Google Patents
一种响应式表单搭建方法及系统 Download PDFInfo
- Publication number
- CN117472372B CN117472372B CN202311414281.0A CN202311414281A CN117472372B CN 117472372 B CN117472372 B CN 117472372B CN 202311414281 A CN202311414281 A CN 202311414281A CN 117472372 B CN117472372 B CN 117472372B
- Authority
- CN
- China
- Prior art keywords
- data
- json schema
- data structure
- processing
- component
- 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.)
- Active
Links
- 238000010276 construction Methods 0.000 title claims description 28
- 238000012545 processing Methods 0.000 claims abstract description 128
- 238000000034 method Methods 0.000 claims abstract description 46
- 238000009877 rendering Methods 0.000 claims abstract description 28
- 238000004806 packaging method and process Methods 0.000 claims abstract description 21
- 238000012795 verification Methods 0.000 claims abstract description 13
- 238000004364 calculation method Methods 0.000 claims description 38
- 238000005516 engineering process Methods 0.000 claims description 25
- 238000004140 cleaning Methods 0.000 claims description 22
- 230000008569 process Effects 0.000 claims description 14
- 238000013524 data verification Methods 0.000 claims description 7
- 230000000694 effects Effects 0.000 claims description 6
- 238000004590 computer program Methods 0.000 claims description 5
- 230000008859 change Effects 0.000 abstract description 24
- 238000011161 development Methods 0.000 abstract description 13
- 238000010586 diagram Methods 0.000 description 10
- 230000006870 function Effects 0.000 description 10
- 238000007726 management method Methods 0.000 description 8
- 238000004891 communication Methods 0.000 description 6
- 230000003993 interaction Effects 0.000 description 5
- 238000013499 data model Methods 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 230000010354 integration Effects 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000005538 encapsulation Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000011664 signaling Effects 0.000 description 1
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
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本发明公开了一种响应式表单搭建方法及系统，涉及前端开发技术领域，包括以下步骤：输入预设的JSON Schema表单数据结构；对输入的JSON Schema表单数据结构进行校验；对校验通过后的JSON Schema表单数据结构进行逻辑处理，获得最新相关数据；对最新相关数据进行组件封装，获得组件数据；接收组件数据，将组件数据在WEB浏览器上进行渲染，生成最新表单供用户使用。本发明通过搭建一种响应式表单，可以快速响应用户的需求变化，只需经过简单配置即可实现，提高用户使用满意度。
Description
技术领域
本发明涉及前端开发技术领域，具体而言，涉及一种响应式表单搭建方法及系统。
背景技术
在日常项目实施交付过程中，现存的表单变化不灵活、跟进效率低，手动录入表格会存在断跟、遗漏的现象，在应用表格记录数据和跟进过程，耗时又耗力，且不好保存客户资源，分类整理的难度较大。由于项目变更较多，记录起来也比较复杂，数据较多时容易出现错漏、遗失的情况，容易造成用户满意度低。
传统的表单需要通过学习编程工具，编写代码实现，学习语言困难度高，语言种类繁多，不利统一实施工具。还需要技术人员进行开发，时间周期长且效率低，所以急需一种快速表单设计方法，能及时快速响应用户需求变化，并且经过简单配置即可实现。
发明内容
为了克服上述问题或者至少部分地解决上述问题，本发明提供一种响应式表单搭建方法及系统，通过预设表单数据结构的方式让用户通过简单配置即可实现表单数据的变更，无需编码程序，可以快速响应用户的需求变化，提高用户的使用体验。
为解决上述技术问题，本发明采用的技术方案为：
第一方面，本发明提供一种响应式表单搭建方法，包括以下步骤：
输入预设的JSON Schema表单数据结构；
对输入的JSON Schema表单数据结构进行校验；
对校验通过后的JSON Schema表单数据结构进行逻辑处理，获得最新相关数据；
对最新相关数据进行组件封装，获得组件数据；
接收组件数据，将组件数据在WEB浏览器上进行渲染，生成最新表单供用户使用。
本发明通过输入预设的JSON Schema表单数据结构，对表单进行初步布局，用户可灵活变更数据信息，使用方便操作简单；然后对输入的JSON Schema表单数据结构进行校验，防止输入时有错误信息影响后续使用；再对校验通过后的JSON Schema表单数据结构进行逻辑处理，获得最新相关数据；并基于JSON数据Schema，采用表单内核处理JSON Schema表单数据结构，得到一系列相关的表单数据，没有其他多余的处理流程，使主要处理流程变得更加简单快捷高效；并对最新相关数据进行组件封装，获得组件数据，使生成的表单具有最新数据，能及时调整变更数据，完善管理；最后接收组件数据，将组件数据在WEB浏览器上进行渲染，生成最新表单供用户使用。通过预设表单数据结构的方式让用户通过简单配置即可实现表单数据的变更，及时调整数据信息，实现高效管理；且无需编码程序，使用简单操作方便，可以快速响应用户的需求变化，提高用户的使用体验。
基于第一方面，进一步的，上述对输入的JSON Schema表单数据结构进行校验包括：
对JSON Schema表单数据结构进行判断，判断JSON Schema表单数据结构的格式或内容是否有误，若有误，则终止执行后续流程并提示用户内容有误；若无误，则进行逻辑处理。
基于第一方面，进一步的，上述对校验通过后的JSON Schema表单数据结构进行逻辑处理包括以下步骤：
检查输入的JSON Schema识别使用的处理技术；
通过处理技术对JSON Schema表单数据结构进行处理，判断JSON Schema表单数据结构是否存在计算公式；
当JSON Schema表单数据结构不存在计算公式时，则定位JSON Schema表单数据结构所在位置并构建数据访问快捷路径；
通过数据访问快捷路径构建数据之间的关联关系，绑定数据关系；
根据数据关系生成JSON Schema表单数据结构与组件的绑定关系，确定表单渲染组件及组件相关界面样式设置。
基于第一方面，进一步的，上述通过处理技术对JSON Schema表单数据结构进行处理，判断JSON Schema表单数据结构是否存在计算公式包括：
当JSON Schema表单数据结构存在计算公式时，则进行数据清洗，完成数据清洗后生成并将最新处理数据返回给数据处理核心继续进行数据处理，直到无计算公式后完成数据处理。
基于第一方面，进一步的，上述对最新相关数据进行组件封装，获得组件数据包括：
封装呈现在WEB界面上的相关组件及相关组件的关联关系，将组件数据转换为浏览器认识的HTML及JS代码。
第二方面，本发明提供一种响应式表单搭建系统，包括：
数据输入模块，用于输入预设的JSON Schema表单数据结构；
数据校验模块，用于对输入的JSON Schema表单数据结构进行校验；
数据处理模块，用于对校验通过后的JSON Schema表单数据结构进行逻辑处理，获得最新相关数据；
数据封装模块，用于对最新相关数据进行组件封装，获得组件数据；
效果渲染模块，用于接收组件数据，将组件数据在WEB浏览器上进行渲染，生成最新表单供用户使用。
本发明通过数据输入模块，输入预设的JSON Schema表单数据结构，来对表单进行初步布局，用户可灵活变更数据信息，使用方便操作简单；然后通过数据校验模块对输入的JSON Schema表单数据结构进行校验，防止输入时有错误信息影响后续使用；再通过数据处理模块对校验通过后的JSON Schema表单数据结构进行逻辑处理，获得最新相关数据；并基于JSON数据Schema，采用表单内核处理JSON Schema表单数据结构，得到一系列相关的表单数据，没有其他多余的处理流程，使主要处理流程变得更加简单快捷高效；并通过数据封装模块对最新相关数据进行组件封装，获得组件数据，使生成的表单具有最新数据，能及时调整变更数据，完善管理；最后通过效果渲染模块接收组件数据，将组件数据在WEB浏览器上进行渲染，生成最新表单供用户使用。通过预设表单数据结构的方式让用户通过简单配置即可实现表单数据的变更，及时调整数据信息，实现高效管理；且无需编码程序，使用简单操作方便，可以快速响应用户的需求变化，提高用户的使用体验。
基于第二方面，进一步的，上述数据处理模块，包括查询子模块、判断子模块、路径构建子模块、关联子模块以及组件绑定子模块，其中：
查询子模块，用于检查输入的JSON Schema识别使用的处理技术；
判断子模块，用于通过处理技术对JSON Schema表单数据结构进行处理，判断JSONSchema表单数据结构是否存在计算公式；
路径构建子模块，用于当JSON Schema表单数据结构不存在计算公式时，则定位JSON Schema表单数据结构所在位置并构建数据访问快捷路径；
关联子模块，用于通过数据访问快捷路径构建数据之间的关联关系，绑定数据关系；
组件绑定子模块，用于根据数据关系生成JSON Schema表单数据结构与组件的绑定关系，确定表单渲染组件及组件相关界面样式设置。
基于第二方面，进一步的，上述判断子模块包括公式清洗单元，其中：
公式清洗单元，用于当JSON Schema表单数据结构存在计算公式时，则进行数据清洗，完成数据清洗后生成并将最新处理数据返回给数据处理核心继续进行数据处理，直到无计算公式后完成数据处理。
第三方面，本申请提供一种电子设备，其包括存储器，用于存储一个或多个程序；处理器；当一个或多个程序被处理器执行时，实现如上述第一方面中任一项的方法。
第四方面，本申请提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如上述第一方面中任一项的方法。
本发明至少具有如下优点或有益效果：
1.通过预设JSON Schema表单数据结构来帮助用户简便、高效地完成应用系统的搭建，可通过拖拽组件完成表单相关功能。
2.本发明具备快速敏捷的应用构建能力及出色的二次开发能力，无需编码程序，操作简单使用方便。
3.本发明可助力用户以低成本、短周期、高效率的方式实现各类数字化应用，快速搭建客户需要的表单，实现用户要求的功能。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。
图1为本发明实施例一种响应式表单搭建方法的流程图；
图2为本发明实施例一种响应式表单搭建方法的框架流程示意图；
图3为本发明实施例一种响应式表单搭建方法中逻辑处理的框架流程示意图；
图4为本发明实施例一种响应式表单搭建方法中逻辑处理的流程图；
图5为本发明实施例一种响应式表单搭建系统的原理框图；
图6为本发明实施例一种响应式表单搭建方法系统中数据处理模块的原理框图；
图7为本发明实施例提供的一种电子设备的结构框图。
附图标记说明：100、数据输入模块；200、数据校验模块、300、数据处理模块；400、数据封装模块；500、效果渲染模块；310、查询子模块；320、判断子模块；330、路径构建子模块；340、关联子模块；350、组件绑定子模块；101、存储器；102、处理器；103、通信接口。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。
因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。
需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
在本发明实施例的描述中，“多个”代表至少2个。
实施例1：
如图1-2所示，本发明实施例提供一种响应式表单搭建方法，包括以下步骤：
S10、输入预设的JSON Schema表单数据结构；
S20、对输入的JSON Schema表单数据结构进行校验；
S30、对校验通过后的JSON Schema表单数据结构进行逻辑处理，获得最新相关数据；最新相关数据包括组件值、状态等；
S40、对最新相关数据进行组件封装，获得组件数据；
S50、接收组件数据，将组件数据在WEB浏览器上进行渲染，生成最新表单供用户使用。
本发明通过输入预设的JSON Schema表单数据结构，对表单进行初步布局，用户可灵活变更数据信息，使用方便操作简单；然后对输入的JSON Schema表单数据结构进行校验，防止输入时有错误信息影响后续使用；再对校验通过后的JSON Schema表单数据结构进行逻辑处理，获得最新相关数据；基于JSON数据Schema，采用表单内核处理JSON Schema表单数据结构，得到一系列相关的表单数据，没有其他多余的处理流程，使主要处理流程变得更加简单快捷高效；其中，表单内核开发了模型处理器、路径系统以及公式系统，整体对外通过定义JSON数据结构表现，在数据接入方面更加便捷、灵活、共享；并对最新相关数据进行组件封装，获得组件数据；采用组件库，即表单字段的呈现方式，常见的组件开源项目有Element、IView等，该类库组件类型丰富，样式丰富且集成方式简单，能有效的提升表单开发效率，且使生成的表单具有最新数据，能及时调整变更数据，完善管理；最后接收组件数据，将组件数据在WEB浏览器上进行渲染，生成最新表单供用户使用。其采用UI桥接模式，基于前端多种开发语言技术，在开发程度上技术成熟，开发人员基数庞大，开发效率及性能都比较优秀；通过集成多种开发语言技术，从而改变表单的生成及渲染处理方式，使得表单做得更加丰富复杂，在承载复杂业务上提供很好的助力，整体提升表单的质量。本发明通过预设表单数据结构的方式让用户通过简单配置即可实现表单数据的变更，及时调整数据信息，实现高效管理；且无需编码程序，使用简单操作方便，可以快速响应用户的需求变化，提高用户的使用体验。
在其中一个实施例中，对输入的JSON Schema表单数据结构进行校验包括：
对JSON Schema表单数据结构进行判断，判断JSON Schema表单数据结构的格式或内容是否有误，若有误，则终止执行后续流程并提示用户内容有误；若无误，则进行逻辑处理。
在其中一个实施例中，如图3-4所示，对校验通过后的JSON Schema表单数据结构进行逻辑处理包括以下步骤：
S31、检查输入的JSON Schema识别使用的处理技术；
S32、通过处理技术对JSON Schema表单数据结构进行处理，判断JSON Schema表单数据结构是否存在计算公式；
S33、当JSON Schema表单数据结构不存在计算公式时，则定位JSON Schema表单数据结构所在位置并构建数据访问快捷路径；
S34、通过数据访问快捷路径构建数据之间的关联关系，绑定数据关系；
S35、根据数据关系生成JSON Schema表单数据结构与组件的绑定关系，确定表单渲染组件及组件相关界面样式设置。
为确保表JSON Schema表单数据结构的准确性，首先判断JSON Schema表单数据结构的格式或内容是否有误，无误后对其进行逻辑处理；具体的逻辑处理流程为：首先需检查输入的JSON Schema识别使用的处理技术；识别技术通过解析Json Schema得到扁平化数据结构，逐一进行数据校验，为后续处理数据提供前置配置；然后通过该处理技术对JSONSchema表单数据结构进行处理，判断JSON Schema表单数据结构是否存在计算公式；当JSONSchema表单数据结构存在计算公式时，则进行数据清洗，完成数据清洗后生成并将最新处理数据返回给数据处理核心继续进行数据处理，直到无计算公式后完成数据处理；采用公式处理核心对数据进行清理：公式处理核心内部集成了类似Excel单元计算逻辑，把JSONSchema解析成类似Excel单元格，让数据处理更加通俗易懂，简单快捷，同时公式处理核心还允许自定义函数，以方便支持更加强大的计算逻辑，使用户可根据实际需要定义公式变量绑定到表单上，进而得到想要的处理结果；当JSON Schema表单数据结构不存在计算公式时，则定位JSON Schema表单数据结构所在位置并构建数据访问快捷路径；并通过数据访问快捷路径构建数据之间的关联关系，绑定数据关系；数据之间的关联关系是数据模型与界面展示DOM树元素之间的关联关系，通过双方的唯一Id建立绑定关系，它们之间的交互通过表单引擎监听浏览器本地缓存数据库数据变动实现数据互通交互；最后根据数据关系生成JSON Schema表单数据结构与组件的绑定关系，确定表单渲染组件及组件相关界面样式设置；其中，数据也就是业务数据模型，结构为Json Schema，组件则为浏览器html元素，他们之间通过各自的唯一标识Id建立绑定关系，表单编辑器上层是操作浏览器html组件，然后通过它们的绑定关系映射到数据业务模型上得到想要的界面属性如组件值、状态等，同理通过业务模型数据也可以反向回馈到浏览器html组件上。为更好理解该逻辑处理流程，以下举例说明具体操作内容：
假设定义Schems结构为
1、第一步在表单编辑器中输入Schema数据结构；
2、第二步内核识别使用组件技术为element组件库数据；
3、第三步数据处理，得到表单字段名称为name,使用组件为text文本组件，样式为color且值为red,字段值为张三；
4、第四步构建路径系统，该实例的访问路径为object.name；
5、第五步构建组件关系；
6、第六步构建组件数据得到基于HTML的渲染文本:
<textarea id＝”name”class＝”element-text”style＝”color:red”>
张三
</textarea>
7、最后返回组件HTML给界面渲染使用。
通过上述JSON Schema表单数据结构的核心处理流程对表单数据进行调试处理后，用户可以以低成本、短周期、高效率的方式实现各类数字化应用，无需编码程序，操作简单使用方便，只需通过拖拽组件来完成表单相关功能，实现快捷表单搭建。
在其中一个实施例中，通过处理技术对JSON Schema表单数据结构进行处理，判断JSON Schema表单数据结构是否存在计算公式包括：
当JSON Schema表单数据结构存在计算公式时，则进行数据清洗，完成数据清洗后生成并将最新处理数据返回给数据处理核心继续进行数据处理，直到无计算公式后完成数据处理。
在其中一个实施例中，对最新相关数据进行组件封装，获得组件数据包括：
封装呈现在WEB界面上的相关组件及相关组件的关联关系，将组件数据转换为浏览器认识的HTML及JS代码。
通过对最新相关数据进行组件封装，完成表单布局，并将相关组件数据进项转换，使其可以自由在浏览器上展现，便于用户观看并进行操作，即使对表单数据进行更新，快速响应用户需求变化。
实施例2：
请参阅图5，图5为本发明实施例一种响应式表单搭建系统的原理框图，包括：
数据输入模块100，用于输入预设的JSON Schema表单数据结构；
数据校验模块200，用于对输入的JSON Schema表单数据结构进行校验；
数据处理模块300，用于对校验通过后的JSON Schema表单数据结构进行逻辑处理，获得最新相关数据；
数据封装模块400，用于对最新相关数据进行组件封装，获得组件数据；
效果渲染模块500，用于接收组件数据，将组件数据在WEB浏览器上进行渲染，生成最新表单供用户使用。
本发明通过数据输入模块100输入预设的JSON Schema表单数据结构，对表单进行初步布局，用户可灵活变更数据信息，使用方便操作简单；然后通过数据校验模块200对输入的JSON Schema表单数据结构进行校验，防止输入时有错误信息影响后续使用；再通过数据处理模块300对校验通过后的JSON Schema表单数据结构进行逻辑处理，获得最新相关数据；基于JSON数据Schema，采用表单内核处理JSON Schema表单数据结构，得到一系列相关的表单数据，没有其他多余的处理流程，使主要处理流程变得更加简单快捷高效；其中，表单内核开发了模型处理器、路径系统以及公式系统，整体对外通过定义JSON数据结构表现，在数据接入方面更加便捷、灵活、共享；并通过数据封装模块400对最新相关数据进行组件封装，获得组件数据；采用组件库，即表单字段的呈现方式，常见的组件开源项目有Element、IView等，该类库组件类型丰富，样式丰富且集成方式简单，能有效的提升表单开发效率，且使生成的表单具有最新数据，能及时调整变更数据，完善管理；最后通过效果渲染模块500接收组件数据，将组件数据在WEB浏览器上进行渲染，生成最新表单供用户使用。其采用UI桥接模式，基于前端多种开发语言技术，在开发程度上技术成熟，开发人员基数庞大，开发效率及性能都比较优秀；通过集成多种开发语言技术，从而改变表单的生成及渲染处理方式，使得表单做得更加丰富复杂，在承载复杂业务上提供很好的助力，整体提升表单的质量。本发明通过预设表单数据结构的方式让用户通过简单配置即可实现表单数据的变更，及时调整数据信息，实现高效管理；且无需编码程序，使用简单操作方便，可以快速响应用户的需求变化，提高用户的使用体验。
在其中一个实施例中，如图6所示，上述数据处理模块300包括查询子模块310、判断子模块320、路径构建子模块330、关联子模块340以及组件绑定子模块350，其中：
查询子模块310，用于检查输入的JSON Schema识别使用的处理技术；
判断子模块320，用于通过处理技术对JSON Schema表单数据结构进行处理，判断JSON Schema表单数据结构是否存在计算公式；
路径构建子模块330，用于当JSON Schema表单数据结构不存在计算公式时，则定位JSON Schema表单数据结构所在位置并构建数据访问快捷路径；
关联子模块340，用于通过数据访问快捷路径构建数据之间的关联关系，绑定数据关系；
组件绑定子模块350，用于根据数据关系生成JSON Schema表单数据结构与组件的绑定关系，确定表单渲染组件及组件相关界面样式设置。
为确保表JSON Schema表单数据结构的准确性，首先判断JSON Schema表单数据结构的格式或内容是否有误，无误后对其进行逻辑处理；具体的逻辑处理流程为：首先通过查询子模块310检查输入的JSON Schema识别使用的处理技术；识别技术通过解析JsonSchema得到扁平化数据结构，逐一进行数据校验，为后续处理数据提供前置配置；然后根据判断子模块320通过该处理技术对JSON Schema表单数据结构进行处理，判断JSON Schema表单数据结构是否存在计算公式；当JSON Schema表单数据结构存在计算公式时，则进行数据清洗，完成数据清洗后生成并将最新处理数据返回给数据处理核心继续进行数据处理，直到无计算公式后完成数据处理；采用公式处理核心对数据进行清理：公式处理核心内部集成了类似Excel单元计算逻辑，把JSON Schema解析成类似Excel单元格，让数据处理更加通俗易懂，简单快捷，同时公式处理核心还允许自定义函数，以方便支持更加强大的计算逻辑，使用户可根据实际需要定义公式变量绑定到表单上，进而得到想要的处理结果；通过路径构建子模块330来判断当JSON Schema表单数据结构不存在计算公式时，则定位JSONSchema表单数据结构所在位置并构建数据访问快捷路径；并根据关联子模块340来通过数据访问快捷路径构建数据之间的关联关系，绑定数据关系；数据之间的关联关系是数据模型与界面展示DOM树元素之间的关联关系，通过双方的唯一Id建立绑定关系，它们之间的交互通过表单引擎监听浏览器本地缓存数据库数据变动实现数据互通交互；最后通过组件绑定子模块350来根据数据关系生成JSON Schema表单数据结构与组件的绑定关系，确定表单渲染组件及组件相关界面样式设置；其中，数据也就是业务数据模型，结构为Json Schema，组件则为浏览器html元素，他们之间通过各自的唯一标识Id建立绑定关系，表单编辑器上层是操作浏览器html组件，然后通过它们的绑定关系映射到数据业务模型上得到想要的界面属性如组件值、状态等，同理通过业务模型数据也可以反向回馈到浏览器html组件上。为更好理解该数据处理模块300，以下举例说明具体操作内容：
假设定义Schems结构为
1、第一步在表单编辑器中输入Schema数据结构；
2、第二步内核识别使用组件技术为element组件库数据；
3、第三步数据处理，得到表单字段名称为name,使用组件为text文本组件，样式为color且值为red,字段值为张三；
4、第四步构建路径系统，该实例的访问路径为object.name；
5、第五步构建组件关系；
6、第六步构建组件数据得到基于HTML的渲染文本:
<textarea id＝”name”class＝”element-text”style＝”color:red”>
张三
</textarea>
8、最后返回组件HTML给界面渲染使用。
通过上述数据处理模块300的JSON Schema表单数据结构的核心处理流程对表单数据进行调试处理后，用户可以以低成本、短周期、高效率的方式实现各类数字化应用，无需编码程序，操作简单使用方便，只需通过拖拽组件来完成表单相关功能，实现快捷表单搭建。
在其中一个实施例中，上述判断子模块320包括公式清洗单元，其中：
公式清洗单元，用于当JSON Schema表单数据结构存在计算公式时，则进行数据清洗，完成数据清洗后生成并将最新处理数据返回给数据处理核心继续进行数据处理，直到无计算公式后完成数据处理。
如图7所示，第三方面，本申请实施例提供一种电子设备，其包括存储器101，用于存储一个或多个程序；处理器102。当一个或多个程序被处理器102执行时，实现如上述第一方面中任一项的方法。
还包括通信接口103，该存储器101、处理器102和通信接口103相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。存储器101可用于存储软件程序及模块，处理器102通过执行存储在存储器101内的软件程序及模块，从而执行各种功能应用以及数据处理。该通信接口103可用于与其他节点设备进行信令或数据的通信。
其中，存储器101可以是但不限于，随机存取存储器(Random Access Memory，RAM)，只读存储器(Read Only Memory，ROM)，可编程只读存储器(Programmable Read-OnlyMemory，PROM)，可擦除只读存储器(Erasable Programmable Read-Only Memory，EPROM)，电可擦除只读存储器(Electric Erasable Programmable Read-Only Memory，EEPROM)等。
处理器102可以是一种集成电路芯片，具有信号处理能力。该处理器102可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(NetworkProcessor，NP)等；还可以是数字信号处理器(Digital Signal Processing，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field－Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
在本申请所提供的实施例中，应该理解到，所揭露的方法及系统，也可以通过其它的方式实现。以上所描述的方法及系统实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本申请的多个实施例的方法及系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
另外，在本申请各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。
第四方面，本申请实施例提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器102执行时实现如上述第一方面中任一项的方法。所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random AccessMemory)、磁碟或者光盘等各种可以存储程序代码的介质。
以上仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
对于本领域技术人员而言，显然本申请不限于上述示范性实施例的细节，而且在不背离本申请的精神或基本特征的情况下，能够以其它的具体形式实现本申请。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本申请的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本申请内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。
Claims (6)
1.一种响应式表单搭建方法，其特征在于，包括以下步骤：
输入预设的JSON Schema表单数据结构；
对输入的JSON Schema表单数据结构进行校验；
对校验通过后的JSON Schema表单数据结构进行逻辑处理，获得最新相关数据；逻辑处理包括以下步骤：检查输入的JSON Schema识别使用的处理技术；通过处理技术对JSONSchema表单数据结构进行处理，判断JSON Schema表单数据结构是否存在计算公式；当JSONSchema表单数据结构存在计算公式时，则进行数据清洗，完成数据清洗后生成并将最新处理数据返回给数据处理核心继续进行数据处理，直到无计算公式后完成数据处理；当JSONSchema表单数据结构不存在计算公式时，则定位JSON Schema表单数据结构所在位置并构建数据访问快捷路径；通过数据访问快捷路径构建数据之间的关联关系，绑定数据关系；根据数据关系生成JSON Schema表单数据结构与组件的绑定关系，确定表单渲染组件及组件相关界面样式设置；最新相关数据包括组件值、状态；组件包括界面的html元素；
对最新相关数据进行组件封装，获得组件数据；
接收组件数据，将组件数据在WEB浏览器上进行渲染，生成最新表单供用户使用。
2.根据权利要求1所述的一种响应式表单搭建方法，其特征在于，所述对输入的JSONSchema表单数据结构进行校验包括：
对JSON Schema表单数据结构进行判断，判断JSON Schema表单数据结构的格式或内容是否有误，若有误，则终止执行后续流程并提示用户内容有误；若无误，则进行逻辑处理。
3.根据权利要求1所述的一种响应式表单搭建方法，其特征在于，所述对最新相关数据进行组件封装，获得组件数据包括：
封装呈现在WEB界面上的相关组件及相关组件的关联关系，将组件数据转换为浏览器认识的HTML及JS代码。
4.一种响应式表单搭建系统，其特征在于，包括：
数据输入模块，用于输入预设的JSON Schema表单数据结构；
数据校验模块，用于对输入的JSON Schema表单数据结构进行校验；
数据处理模块，用于对校验通过后的JSON Schema表单数据结构进行逻辑处理，获得最新相关数据；其中：查询子模块，用于检查输入的JSON Schema识别使用的处理技术；判断子模块，用于通过处理技术对JSON Schema表单数据结构进行处理，判断JSON Schema表单数据结构是否存在计算公式；所述判断子模块包括公式清洗单元，其中：公式清洗单元，用于当JSON Schema表单数据结构存在计算公式时，则进行数据清洗，完成数据清洗后生成并将最新处理数据返回给数据处理核心继续进行数据处理，直到无计算公式后完成数据处理；路径构建子模块，用于当JSON Schema表单数据结构不存在计算公式时，则定位JSONSchema表单数据结构所在位置并构建数据访问快捷路径；关联子模块，用于通过数据访问快捷路径构建数据之间的关联关系，绑定数据关系；组件绑定子模块，用于根据数据关系生成JSON Schema表单数据结构与组件的绑定关系，确定表单渲染组件及组件相关界面样式设置；最新相关数据包括组件值、状态；组件包括界面的html元素；
数据封装模块，用于对最新相关数据进行组件封装，获得组件数据；
效果渲染模块，用于接收组件数据，将组件数据在WEB浏览器上进行渲染，生成最新表单供用户使用。
5.一种电子设备，其特征在于，包括：
存储器，用于存储一个或多个程序；
处理器；
当所述一个或多个程序被所述处理器执行时，实现如权利要求1-3中任一项所述的方法。
6.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现如权利要求1-3中任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311414281.0A CN117472372B (zh) | 2023-10-27 | 2023-10-27 | 一种响应式表单搭建方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311414281.0A CN117472372B (zh) | 2023-10-27 | 2023-10-27 | 一种响应式表单搭建方法及系统 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN117472372A CN117472372A (zh) | 2024-01-30 |
| CN117472372B true CN117472372B (zh) | 2024-04-09 |
Family
ID=89628636
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311414281.0A Active CN117472372B (zh) | 2023-10-27 | 2023-10-27 | 一种响应式表单搭建方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117472372B (zh) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| JP7145543B1 (ja) * | 2021-12-17 | 2022-10-03 | 合同会社Ｒｓａテクノロジーズ | 表示制御プログラム |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105808646A (zh) * | 2016-02-26 | 2016-07-27 | 上海全成通信技术有限公司 | 基于json schema的复杂页面内内容管理校验方法及装置 |
| CN114237594A (zh) * | 2021-11-16 | 2022-03-25 | 唯品会(广州)软件有限公司 | 一种表单界面生成方法、装置、系统及可读存储介质 |
| CN114385957A (zh) * | 2022-03-24 | 2022-04-22 | 北京搜狐新媒体信息技术有限公司 | 一种落地页的创建方法及建站平台 |
| CN114428601A (zh) * | 2021-11-24 | 2022-05-03 | 北京沃东天骏信息技术有限公司 | 视觉稿检查方法及装置 |
| CN115202652A (zh) * | 2022-06-24 | 2022-10-18 | 济南浪潮数据技术有限公司 | 一种云上业务申请表的平台搭建方法、系统、设备和介质 |
| CN115617327A (zh) * | 2022-11-08 | 2023-01-17 | 浙江极氪智能科技有限公司 | 低代码页面搭建系统、方法及计算机可读存储介质 |
| WO2023109074A1 (zh) * | 2021-12-17 | 2023-06-22 | 深圳前海微众银行股份有限公司 | 一种实现联动功能的方法、装置、设备、存储介质和程序 |
| CN116662029A (zh) * | 2023-05-31 | 2023-08-29 | 天翼数字生活科技有限公司 | 一种基于模版的接口调用及解析方法、装置和电子设备 |
-
2023
- 2023-10-27 CN CN202311414281.0A patent/CN117472372B/zh active Active
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105808646A (zh) * | 2016-02-26 | 2016-07-27 | 上海全成通信技术有限公司 | 基于json schema的复杂页面内内容管理校验方法及装置 |
| CN114237594A (zh) * | 2021-11-16 | 2022-03-25 | 唯品会(广州)软件有限公司 | 一种表单界面生成方法、装置、系统及可读存储介质 |
| CN114428601A (zh) * | 2021-11-24 | 2022-05-03 | 北京沃东天骏信息技术有限公司 | 视觉稿检查方法及装置 |
| WO2023109074A1 (zh) * | 2021-12-17 | 2023-06-22 | 深圳前海微众银行股份有限公司 | 一种实现联动功能的方法、装置、设备、存储介质和程序 |
| CN114385957A (zh) * | 2022-03-24 | 2022-04-22 | 北京搜狐新媒体信息技术有限公司 | 一种落地页的创建方法及建站平台 |
| CN115202652A (zh) * | 2022-06-24 | 2022-10-18 | 济南浪潮数据技术有限公司 | 一种云上业务申请表的平台搭建方法、系统、设备和介质 |
| CN115617327A (zh) * | 2022-11-08 | 2023-01-17 | 浙江极氪智能科技有限公司 | 低代码页面搭建系统、方法及计算机可读存储介质 |
| CN116662029A (zh) * | 2023-05-31 | 2023-08-29 | 天翼数字生活科技有限公司 | 一种基于模版的接口调用及解析方法、装置和电子设备 |
Non-Patent Citations (2)
| Title |
|---|
| 一种为Rest API自动创建表单界面的方法;陈淼波 等;《电子技术与软件工程》;20221031(第20期);40-44 * |
| 铁路基础设施全生命周期数据传递关键技术研究;解亚龙 等;《中国铁路》;20200131(第01期);79-86 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN117472372A (zh) | 2024-01-30 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110928772B (zh) | 一种测试方法及装置 | |
| CN108415832B (zh) | 接口自动化测试方法、装置、设备及存储介质 | |
| EP3433732B1 (en) | Converting visual diagrams into code | |
| CN109683953B (zh) | 一种基于可视化界面进行配置文件处理的方法及装置 | |
| CN106657192B (zh) | 一种用于呈现服务调用信息的方法与设备 | |
| CN117472372B (zh) | 一种响应式表单搭建方法及系统 | |
| CN112368685A (zh) | 可定制的企业自动化测试框架 | |
| CN111581920A (zh) | 文档转换方法、装置、设备及计算机存储介质 | |
| CN104461531A (zh) | 一种报表系统自定义函数的实现方法 | |
| CN111142863A (zh) | 一种页面生成的方法及装置 | |
| CN108460068A (zh) | 报表导入导出的方法、装置、存储介质及终端 | |
| CN115840687A (zh) | 一种基于业务层面的可视化日志链路追踪方法及系统 | |
| CN114594927A (zh) | 低代码开发方法、装置、系统、服务器及存储介质 | |
| CN111079284A (zh) | 电网全域逻辑数据模型验证方法、装置、服务器及介质 | |
| CN117032646A (zh) | 指标配置方法、指标执行方法及系统 | |
| CN111008011A (zh) | 一个面向电力平台应用开发的系统构建器 | |
| CN111522748B (zh) | 一种自动化测试案例生成方法、装置、服务器及存储介质 | |
| US11442724B2 (en) | Pattern recognition | |
| CN110781142B (zh) | 数据导入方法及装置、服务端及存储介质 | |
| CN111930377A (zh) | 拓扑关系展示方法、装置、服务器及存储介质 | |
| Rosenberg et al. | Top-down business process development and execution using quality of service aspects | |
| CN116501318B (zh) | 表单创建方法、装置、电子设备及计算机可读存储介质 | |
| CN112487022B (zh) | 关联数据的采集方法、系统、存储介质及电子设备 | |
| CN117008890B (zh) | 扩展应用开发系统及方法 | |
| US20220066795A1 (en) | Knowledge engine auto-generation of guided flow experience |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |