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

本申请公开了一种基于配置项动态加载融媒体表单页面的方法，该方法包括：初始化表单页面；根据表单对应的前端代码模块的数据接口获取表单区域属性配置；每个表单根据属性配置建立对应的组件库；前端页面根据接口数据从每个表单项的组件库中加载对应的表单项以完成渲染

【技术实现步骤摘要】
基于配置项动态加载融媒体表单页面的方法及系统


[0001]本专利技术涉及计算机
，具体涉及一种基于配置项动态加载融媒体表单页面的方法及系统
。

技术介绍

[0002]通常情况下，在开发前端表单视图页面时往往需要新建一个
js
文件（前端开发的通用语言文件），然后基于新的
js
文件根据项目需求和需求原型（产品人员提供的表单区域的设计图）进行表单元素的重新开发，并且需要重新进行表单元素的输入逻辑
、
回显逻辑
、
校验逻辑等的开发
。
[0003]但是，当项目量非常庞大时，以上的开发模式势必会造成工作量大
、
开发效率低下
、
代码复用性低
、
代码质量低的问题
。

技术实现思路

[0004]鉴于现有技术中的上述缺陷或不足，期望提供一种基于配置项动态加载融媒体表单页面的方法及系统
。
[0005]第一方面，本申请实施例提供了一种基于配置项动态加载融媒体表单页面的方法，该方法包括：初始化表单页面；根据表单对应的前端代码模块的数据接口获取表单区域属性配置；每个表单根据属性配置建立对应的组件库；前端页面根据接口数据从每个表单项的组件库中加载对应的表单项以完成渲染
。
[0006]在其中一个实施例中，所述表单页面包括网页上用于负责数据采集功能的页面
。
[0007]在其中一个实施例中，所述根据表单对应的前端代码模块的数据接口获取表单区域属性配置，包括：根据表单对应的前端代码模块的数据接口获取表单区域的
className
类名
、field
字段
key、fieldType
字段类型
、id
字段
id、regx
字段校验正则
、required
字段是否必填
、selectvalue
可选项
、showName
字段的中文名以及
sort
字段的排序值
。
[0008]在其中一个实施例中，所述前端页面根据接口数据从每个表单项的组件库中加载对应的表单项以完成渲染，包括：前端页面根据表单项属性里面的
fieldType
字段从子组件库里面加载对应的组件；将
className
类名
、field
字段
key、fieldType
字段类型
、id
字段
id、regx
字段校验正则
、required
字段是否必填
、selectvalue
可选项
、showName
字段的中文名以及
sort
字段的排序值传入到组件中；组件根据接收到的属性进行视图渲染
、
输入和输出逻辑联通
。
[0009]第二方面，本申请实施例提供了一种基于配置项动态加载融媒体表单页面的系
统，该系统包括：初始化模块，用于初始化表单页面；获取模块，用于根据表单对应的前端代码模块的数据接口获取表单区域属性配置；建立模块，用于每个表单根据属性配置建立对应的组件库；渲染模块，用于前端页面根据接口数据从每个表单项的组件库中加载对应的表单项以完成渲染
。
[0010]在其中一个实施例中，所述表单页面包括网页上用于负责数据采集功能的页面
。
[0011]在其中一个实施例中，所述根据表单对应的前端代码模块的数据接口获取表单区域属性配置，包括：根据表单对应的前端代码模块的数据接口获取表单区域的
className
类名
、field
字段
key、fieldType
字段类型
、id
字段
id、regx
字段校验正则
、required
字段是否必填
、selectvalue
可选项
、showName
字段的中文名以及
sort
字段的排序值
。
[0012]在其中一个实施例中，所述前端页面根据接口数据从每个表单项的组件库中加载对应的表单项以完成渲染，包括：前端页面根据表单项属性里面的
fieldType
字段从子组件库里面加载对应的组件；将
className
类名
、field
字段
key、fieldType
字段类型
、id
字段
id、regx
字段校验正则
、required
字段是否必填
、selectvalue
可选项
、showName
字段的中文名以及
sort
字段的排序值传入到组件中；组件根据接收到的属性进行视图渲染
、
输入和输出逻辑联通
。
[0013]本申请的有益效果包括：本申请提供的一种基于配置项动态加载融媒体表单页面的方法，在表单页面初始化时，表单对应的前端代码模块的数据接口获取表单区域属性配置，此时，前端页面根据对应的属性动态的渲染每一个表单项
。
这样就可以实现只需要维护好表单的子组件库就可以动态加载表单页面，有效减少了维护难度
、
提高了后续项目的开发效率
、
大大的提高了代码复用性降低代码开发量
、
减少了代码的
Bug
率
。
附图说明
[0014]通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征
、
目的和优点将会变得更明显：图1示出了本申请实施例提供的基于配置项动态加载融媒体表单页面的方法的流程示意图；图2示出了根据本申请一个实施例的基于配置项动态加载融媒体表单页面的系统
200
的示例性结构框图；图3示出了根据本申请实施例提供的代码示意图；图4示出了根据本申请实施例提供的进入表单页面，获取表单配置参数的代码示意图；图5示出了根据本申请实施例提供的根据配置参数循环渲染，并根据字段
fieldType
来动态引入表单子项的代码示意图；图6示出了根据本申请实施例提供的每一个表单子项应该完成视图
、
输入
、
回显等功能的代码示意图；图7示出了根据本申请实施例提供的渲染后的效果示意图；图8示出了适于用来实现本申请实施例的终端设备的计算机系统的结构示意图
。
具体实施方式
[0015]下面结合附图和实施例对本申请作进一步的详细说明
。
可以理解的是，此处所描述的具体实施例仅仅用于解释相关申请，而非对该申请的限定
。
另外还需要说明的是，为了便于描述，附图中仅示出了本文档来自技高网...

【技术保护点】

【技术特征摘要】
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.
一种基于配置项动态...

【专利技术属性】
技术研发人员：李传咏，杜鑫，张勋，雷蕾，田若君，
申请(专利权)人：西安博达软件股份有限公司，
类型：发明
国别省市：