CN117193766A - 基于配置项动态加载融媒体表单页面的方法及系统 - Google Patents

Abstract

本申请公开了一种基于配置项动态加载融媒体表单页面的方法，该方法包括：初始化表单页面；根据表单对应的前端代码模块的数据接口获取表单区域属性配置；每个表单根据属性配置建立对应的组件库；前端页面根据接口数据从每个表单项的组件库中加载对应的表单项以完成渲染。本申请提供的上述方案，在表单页面初始化时，表单对应的前端代码模块的数据接口获取表单区域属性配置，此时，前端页面根据对应的属性动态的渲染每一个表单项。这样就可以实现只需要维护好表单的子组件库就可以动态加载表单页面，有效减少了维护难度、提高了后续项目的开发效率、大大的提高了代码复用性降低代码开发量、减少了代码的Bug率。

Description

基于配置项动态加载融媒体表单页面的方法及系统

技术领域

本发明涉及计算机技术领域，具体涉及一种基于配置项动态加载融媒体表单页面的方法及系统。

背景技术

通常情况下，在开发前端表单视图页面时往往需要新建一个js文件（前端开发的通用语言文件），然后基于新的js文件根据项目需求和需求原型（产品人员提供的表单区域的设计图）进行表单元素的重新开发，并且需要重新进行表单元素的输入逻辑、回显逻辑、校验逻辑等的开发。

但是，当项目量非常庞大时，以上的开发模式势必会造成工作量大、开发效率低下、代码复用性低、代码质量低的问题。

发明内容

鉴于现有技术中的上述缺陷或不足，期望提供一种基于配置项动态加载融媒体表单页面的方法及系统。

第一方面，本申请实施例提供了一种基于配置项动态加载融媒体表单页面的方法，该方法包括：

初始化表单页面；

根据表单对应的前端代码模块的数据接口获取表单区域属性配置；

每个表单根据属性配置建立对应的组件库；

前端页面根据接口数据从每个表单项的组件库中加载对应的表单项以完成渲染。

在其中一个实施例中，所述表单页面包括网页上用于负责数据采集功能的页面。

在其中一个实施例中，所述根据表单对应的前端代码模块的数据接口获取表单区域属性配置，包括：

根据表单对应的前端代码模块的数据接口获取表单区域的className类名、field字段key、fieldType字段类型、id字段id、regx字段校验正则、required字段是否必填、selectvalue可选项、showName字段的中文名以及sort字段的排序值。

在其中一个实施例中，所述前端页面根据接口数据从每个表单项的组件库中加载对应的表单项以完成渲染，包括：

前端页面根据表单项属性里面的fieldType字段从子组件库里面加载对应的组件；

将className类名、field字段key、fieldType字段类型、id字段id、regx字段校验正则、required字段是否必填、selectvalue可选项、showName字段的中文名以及sort字段的排序值传入到组件中；

组件根据接收到的属性进行视图渲染、输入和输出逻辑联通。

第二方面，本申请实施例提供了一种基于配置项动态加载融媒体表单页面的系统，该系统包括：

初始化模块，用于初始化表单页面；

获取模块，用于根据表单对应的前端代码模块的数据接口获取表单区域属性配置；

建立模块，用于每个表单根据属性配置建立对应的组件库；

渲染模块，用于前端页面根据接口数据从每个表单项的组件库中加载对应的表单项以完成渲染。

在其中一个实施例中，所述表单页面包括网页上用于负责数据采集功能的页面。

在其中一个实施例中，所述根据表单对应的前端代码模块的数据接口获取表单区域属性配置，包括：

根据表单对应的前端代码模块的数据接口获取表单区域的className类名、field字段key、fieldType字段类型、id字段id、regx字段校验正则、required字段是否必填、selectvalue可选项、showName字段的中文名以及sort字段的排序值。

在其中一个实施例中，所述前端页面根据接口数据从每个表单项的组件库中加载对应的表单项以完成渲染，包括：

前端页面根据表单项属性里面的fieldType字段从子组件库里面加载对应的组件；

将className类名、field字段key、fieldType字段类型、id字段id、regx字段校验正则、required字段是否必填、selectvalue可选项、showName字段的中文名以及sort字段的排序值传入到组件中；

组件根据接收到的属性进行视图渲染、输入和输出逻辑联通。

本申请的有益效果包括：

本申请提供的一种基于配置项动态加载融媒体表单页面的方法，在表单页面初始化时，表单对应的前端代码模块的数据接口获取表单区域属性配置，此时，前端页面根据对应的属性动态的渲染每一个表单项。这样就可以实现只需要维护好表单的子组件库就可以动态加载表单页面，有效减少了维护难度、提高了后续项目的开发效率、大大的提高了代码复用性降低代码开发量、减少了代码的Bug率。

附图说明

通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显：

图1示出了本申请实施例提供的基于配置项动态加载融媒体表单页面的方法的流程示意图；

图2示出了根据本申请一个实施例的基于配置项动态加载融媒体表单页面的系统200的示例性结构框图；

图3示出了根据本申请实施例提供的代码示意图；

图4示出了根据本申请实施例提供的进入表单页面，获取表单配置参数的代码示意图；

图5示出了根据本申请实施例提供的根据配置参数循环渲染，并根据字段fieldType来动态引入表单子项的代码示意图；

图6示出了根据本申请实施例提供的每一个表单子项应该完成视图、输入、回显等功能的代码示意图；

图7示出了根据本申请实施例提供的渲染后的效果示意图；

图8示出了适于用来实现本申请实施例的终端设备的计算机系统的结构示意图。

具体实施方式

下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释相关申请，而非对该申请的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与申请相关的部分。

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

请参考图1-7所示，图1示出了本申请实施例提供的一种基于配置项动态加载融媒体表单页面的方法，该方法包括：

步骤110：初始化表单页面；

步骤120：根据表单对应的前端代码模块的数据接口获取表单区域属性配置；

步骤130：每个表单根据属性配置建立对应的组件库；

步骤140：前端页面根据接口数据从每个表单项的组件库中加载对应的表单项以完成渲染。

示例性的，上述表单页面指的是：网页上用来负责数据采集功能的页面。每一个表单都存在于一个网页上，而每个网页都是一个前端代码模块，因此在当前模块里面是可以知道自己当前这个表单里面应该调用哪个接口去获取数据的，调用对应的接口后就可以得到当前页面表单所需要的配置。

每个属性配置包括但不限于className类名、field字段key、fieldType字段类型、id字段id、regx字段校验正则、required字段是否必填、selectvalue可选项、showName字段的中文名以及sort字段的排序值。

前端页面根据表单项属性里面的fieldType字段从子组件库里面加载对应的组件，然后把className类名、field字段key、fieldType字段类型、id字段id、regx字段校验正则、required字段是否必填、selectvalue可选项、showName字段的中文名以及sort字段的排序值传入这个组件中，组件中接收到这些属性后进行视图渲染、输入和输出逻辑联通。

采用上述技术方案，在表单页面初始化时，表单对应的前端代码模块的数据接口获取表单区域属性配置，此时，前端页面根据对应的属性动态的渲染每一个表单项。这样就可以实现只需要维护好表单的子组件库就可以动态加载表单页面，有效减少了维护难度、提高了后续项目的开发效率、大大的提高了代码复用性降低代码开发量、减少了代码的Bug率

在一些实施例中，表单页面包括网页上用于负责数据采集功能的页面。

在一些实施例中，根据表单对应的前端代码模块的数据接口获取表单区域属性配置，包括：

根据表单对应的前端代码模块的数据接口获取表单区域的className类名、field字段key、fieldType字段类型、id字段id、regx字段校验正则、required字段是否必填、selectvalue可选项、showName字段的中文名以及sort字段的排序值。

在一些实施例中，前端页面根据接口数据从每个表单项的组件库中加载对应的表单项以完成渲染，包括：

前端页面根据表单项属性里面的fieldType字段从子组件库里面加载对应的组件；

将className类名、field字段key、fieldType字段类型、id字段id、regx字段校验正则、required字段是否必填、selectvalue可选项、showName字段的中文名以及sort字段的排序值传入到组件中；

组件根据接收到的属性进行视图渲染、输入和输出逻辑联通。

应当注意，尽管在附图中以特定顺序描述了本申请方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

进一步地，请参考图2，图2示出了本申请一个实施例的一种基于配置项动态加载融媒体表单页面的系统200的示例性结构框图，该系统包括：

初始化模块210，用于初始化表单页面；

获取模块220，用于根据表单对应的前端代码模块的数据接口获取表单区域属性配置；

建立模块230，用于每个表单根据属性配置建立对应的组件库；

渲染模块240，用于前端页面根据接口数据从每个表单项的组件库中加载对应的表单项以完成渲染。

应当理解，系统200中记载的诸单元或模块与参考图1描述的方法中的各个步骤相对应。由此，上文针对方法描述的操作和特征同样适用于系统200及其中包含的单元，在此不再赘述。系统200可以预先实现在电子设备的浏览器或其他安全应用中，也可以通过下载等方式而加载到电子设备的浏览器或其安全应用中。系统200中的相应单元可以与电子设备中的单元相互配合以实现本申请实施例的方案。

下面参考图8，其示出了适于用来实现本申请实施例的终端设备或服务器的计算机系统300的结构示意图。

如图8所示，计算机系统300包括中央处理单元（CPU）301，其可以根据存储在只读存储器（ROM）302中的程序或者从存储部分308加载到随机访问存储器（RAM）303中的程序而执行各种适当的动作和处理。在RAM 303中，还存储有系统300操作所需的各种程序和数据。CPU301、ROM 302以及RAM 303通过总线304彼此相连。输入/输出（I/O）接口305也连接至总线304。

以下部件连接至I/O接口305：包括键盘、鼠标等的输入部分306；包括诸如阴极射线管（CRT）、液晶显示器（LCD）等以及扬声器等的输出部分307；包括硬盘等的存储部分308；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分309。通信部分309经由诸如因特网的网络执行通信处理。驱动器310也根据需要连接至I/O接口305。可拆卸介质311，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器310上，以便于从其上读出的计算机程序根据需要被安装入存储部分308。

特别地，根据本公开的实施例，上文参考图1描述的过程可以被实现为计算机软件程序或以HTTP接口形式提供相关处理服务。例如，本公开的实施例包括一种计算机程序产品，其包括有形地包含在机器可读介质上的计算机程序，计算机程序包含用于执行图1的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分309从网络上被下载和安装，和/或从可拆卸介质311被安装。

附图中的流程图和框图，图示了按照本申请各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，前述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本申请实施例中所涉及到的单元或模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元或模块也可以设置在处理器中，例如，可以描述为：一种处理器包括第一子区域生成单元、第二子区域生成单元以及显示区域生成单元。其中，这些单元或模块的名称在某种情况下并不构成对该单元或模块本身的限定，例如，显示区域生成单元还可以被描述为“用于根据第一子区域和第二子区域生成文本的显示区域的单元”。

作为另一方面，本申请还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施例中前述装置中所包含的计算机可读存储介质；也可以是单独存在，未装配入设备中的计算机可读存储介质。计算机可读存储介质存储有一个或者一个以上程序，前述程序被一个或者一个以上的处理器用来执行描述于本申请的应用于透明窗口信封的文本生成方法。

以上描述仅为本申请的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本申请中所涉及的申请范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离前述申请构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本申请中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

Claims (8)

1.一种基于配置项动态加载融媒体表单页面的方法，其特征在于，该方法包括：

初始化表单页面；

根据表单对应的前端代码模块的数据接口获取表单区域属性配置；

每个表单根据属性配置建立对应的组件库；

前端页面根据接口数据从每个表单项的组件库中加载对应的表单项以完成渲染。

2.根据权利要求1所述的基于配置项动态加载融媒体表单页面的方法，其特征在于，所述表单页面包括网页上用于负责数据采集功能的页面。

3.根据权利要求1所述的基于配置项动态加载融媒体表单页面的方法，其特征在于，所述根据表单对应的前端代码模块的数据接口获取表单区域属性配置，包括：

根据表单对应的前端代码模块的数据接口获取表单区域的className类名、field字段key、fieldType字段类型、id字段id、regx字段校验正则、required字段是否必填、selectvalue可选项、showName字段的中文名以及sort字段的排序值。

4.根据权利要求3所述的基于配置项动态加载融媒体表单页面的方法，其特征在于，所述前端页面根据接口数据从每个表单项的组件库中加载对应的表单项以完成渲染，包括：

前端页面根据表单项属性里面的fieldType字段从子组件库里面加载对应的组件；

将className类名、field字段key、fieldType字段类型、id字段id、regx字段校验正则、required字段是否必填、selectvalue可选项、showName字段的中文名以及sort字段的排序值传入到组件中；

组件根据接收到的属性进行视图渲染、输入和输出逻辑联通。

5.一种基于配置项动态加载融媒体表单页面的系统，其特征在于，该系统包括：

初始化模块，用于初始化表单页面；

获取模块，用于根据表单对应的前端代码模块的数据接口获取表单区域属性配置；

建立模块，用于每个表单根据属性配置建立对应的组件库；

渲染模块，用于前端页面根据接口数据从每个表单项的组件库中加载对应的表单项以完成渲染。

6.根据权利要求5所述的基于配置项动态加载融媒体表单页面的系统，其特征在于，所述表单页面包括网页上用于负责数据采集功能的页面。

7.根据权利要求6所述的基于配置项动态加载融媒体表单页面的系统，其特征在于，所述根据表单对应的前端代码模块的数据接口获取表单区域属性配置，包括：

根据表单对应的前端代码模块的数据接口获取表单区域的className类名、field字段key、fieldType字段类型、id字段id、regx字段校验正则、required字段是否必填、selectvalue可选项、showName字段的中文名以及sort字段的排序值。

8.根据权利要求7所述的基于配置项动态加载融媒体表单页面的系统，其特征在于，所述前端页面根据接口数据从每个表单项的组件库中加载对应的表单项以完成渲染，包括：

前端页面根据表单项属性里面的fieldType字段从子组件库里面加载对应的组件；

将className类名、field字段key、fieldType字段类型、id字段id、regx字段校验正则、required字段是否必填、selectvalue可选项、showName字段的中文名以及sort字段的排序值传入到组件中；

组件根据接收到的属性进行视图渲染、输入和输出逻辑联通。