CN111782314A - 网页表单的处理方法、装置、电子设备及存储介质 - Google Patents
网页表单的处理方法、装置、电子设备及存储介质 Download PDFInfo
- Publication number
- CN111782314A CN111782314A CN202010443478.7A CN202010443478A CN111782314A CN 111782314 A CN111782314 A CN 111782314A CN 202010443478 A CN202010443478 A CN 202010443478A CN 111782314 A CN111782314 A CN 111782314A
- Authority
- CN
- China
- Prior art keywords
- component
- value
- target
- description information
- initial
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 72
- 238000012545 processing Methods 0.000 title claims abstract description 60
- 238000009877 rendering Methods 0.000 claims abstract description 58
- 238000012795 verification Methods 0.000 claims description 29
- 230000006870 function Effects 0.000 claims description 24
- 230000004044 response Effects 0.000 claims description 24
- 238000012544 monitoring process Methods 0.000 claims description 10
- 238000004590 computer program Methods 0.000 claims description 5
- 230000008569 process Effects 0.000 abstract description 27
- 238000004891 communication Methods 0.000 description 13
- 238000010586 diagram Methods 0.000 description 11
- 230000008859 change Effects 0.000 description 7
- 238000005516 engineering process Methods 0.000 description 6
- 230000003287 optical effect Effects 0.000 description 4
- 230000005236 sound signal Effects 0.000 description 4
- 230000008901 benefit Effects 0.000 description 3
- 230000000694 effects Effects 0.000 description 3
- 230000003993 interaction Effects 0.000 description 3
- 238000007726 management method Methods 0.000 description 3
- 230000001133 acceleration Effects 0.000 description 2
- 238000004458 analytical method Methods 0.000 description 2
- 238000004364 calculation method Methods 0.000 description 2
- 230000001419 dependent effect Effects 0.000 description 2
- 238000000605 extraction Methods 0.000 description 2
- 238000005316 response function Methods 0.000 description 2
- 230000009471 action Effects 0.000 description 1
- 230000006978 adaptation Effects 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000013524 data verification Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 239000000284 extract Substances 0.000 description 1
- 238000003384 imaging method Methods 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000013507 mapping Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
- 238000012800 visualization Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请提供了一种网页表单的处理方法、装置、电子设备及存储介质,包括:获取包括多个组件各自的描述信息的描述配置文件,以及所述组件对应的初始值,对所述描述配置文件和所述初始值进行渲染,得到初始网页表单并展示;在接收到输入值时,对所述初始网页表单中与所述输入值对应的第一目标组件的描述信息,以及与所述第一目标组件对应的第二目标组件的描述信息进行更新,使得所述初始网页表单更新为目标网页表单。本申请中,通过输入值,不单单影响了输入值对应的第一目标组件的渲染过程,还对与第一目标组件对应的第二目标组件的渲染过程产生了影响,实现了组件级别的动态表单逻辑,提高了网页表单的应用范围。
Description
技术领域
本申请实施例涉及通信技术领域,尤其涉及一种网页表单的处理方法、装置、电子设备及存储介质。
背景技术
随着互联网发展至今,在浏览器中填写网页表单已经非常常见。一个网页表单需要实现最简单的两个功能:一是用户可以输入数据,二是可以将数据发送给服务端。
相关技术中,具体可以通过基于Vue(Vue是一套构建用户界面的渐进式框架)框架的vue-form-making工具包,实现网页表单的生成渲染以及运行。vue-form-making工具包的特性包括:可视化配置页面、栅格布局、一键预览配置的效果、一键生成配置JSON(JavaScript Object Notation,JS对象简谱)数据、一键生成代码,立即可运行、提供自定义组件满足用户自定义需求、提供远端数据接口,方便用户需要异步获取数据加载等,能够基于可视化操作快速设计出表单页面,并获取到表单配置json数据,并根据设计器中获取的配置json数据,快速渲染出表单页面。
但是,目前方案中,vue-form-making工具包缺乏根据用户输入动态渲染表单的能力,使得网页表单的应用范围较小,无法满足复杂场景下的用户需求。例如,在账户注册表单中,vue-form-making工具包无法根据用户在注册方式选择组件中选择的手机号或邮箱注册方式,对应渲染展示输入手机号或输入邮箱的组件。
发明内容
本申请实施例提供一种网页表单的处理方法、装置、电子设备及存储介质,以解决相关技术中缺乏根据用户输入动态渲染表单的能力,使得网页表单的应用范围较小,无法满足复杂场景下的用户需求的问题。
第一方面,本申请实施例提供了一种网页表单的处理方法,该方法包括:
获取包括多个组件各自的描述信息的描述配置文件,以及所述组件对应的初始值,所述描述信息包括:依赖关系规则,所述依赖关系规则包括第一目标组件与第二目标组件之间的对应关系;所述初始值为组件在网页表单中展示时的默认取值;
对所述描述配置文件和所述初始值进行渲染,得到初始网页表单并展示;
在接收到对所述初始网页表单填写的输入值时,根据所述输入值、以及所述依赖关系规则,对所述初始网页表单中与所述输入值对应的第一目标组件的描述信息,以及与所述第一目标组件对应的第二目标组件的描述信息进行更新,使得所述初始网页表单更新为目标网页表单;
对所述目标网页表单进行展示。
在一种可选实施方式中,所述描述信息还包括:针对预设类型值的数据发送接口以及数据接收接口;
在所述接收到对所述初始网页表单填写的输入值之后,所述对所述初始网页表单中与所述输入值对应的第一目标组件的描述信息,以及与所述第一目标组件对应的第二目标组件的描述信息进行更新之前,所述方法还包括:
在所述输入值为所述预设类型值的情况下,通过所述数据发送接口将所述输入值发送至服务器;
通过所述数据接收接口,接收所述服务器在对所述输入值校验后返回的远程校验结果;
将所述远程校验结果添加至所述第一目标组件的描述信息中。
在一种可选实施方式中,所述描述信息还包括:针对所述输入值的合法性校验规则;
在所述接收到对所述初始网页表单填写的输入值之后,所述对所述初始网页表单中与所述输入值对应的第一目标组件的描述信息,以及与所述第一目标组件对应的第二目标组件的描述信息进行更新之前,所述方法还包括:
在所述输入值不满足所述合法性校验规则的情况下,将预设的通知文本添加至所述第一目标组件的描述信息中。
在一种可选实施方式中,所述合法性校验规则包括:所述输入值不为空、所述输入值符合正则表达式、所述输入值的最大长度小于第一预设阈值和/或所述输入值的最小长度大于第二预设阈值中的一种或多种。
在一种可选实施方式中,所述描述信息还包括数据路径;
所述获取所述组件对应的初始值,包括:
若根据所述数据路径获取得到对应的数值,则将所述数值确定为所述初始值;
若根据所述数据路径未获取得到对应的数值,则将预设的默认值确定为所述初始值。
在一种可选实施方式中,所述描述信息还包括所述描述信息对应的组件的组件标识,所述对所述描述配置文件和所述初始值进行渲染,得到初始网页表单并展示,包括:
将每个组件,通过所述组件的描述信息包括的组件标识,在预设的全局变量表中进行注册;
遍历所述描述配置文件中的所有组件,并根据所述组件的描述信息以及所述组件的初始值,对所述组件进行渲染,直至所有组件完成所述渲染,得到所述初始网页表单并展示。
在一种可选实施方式中,所述依赖关系规则包括:与所述组件之间具有依赖关系的组件的组件标识、监听事件规则、响应启动时的取值位置、处理函数和赋值目标;
所述根据所述输入值、以及所述依赖关系规则,对所述初始网页表单中与所述输入值对应的第一目标组件的描述信息,以及与所述第一目标组件对应的第二目标组件的描述信息进行更新,包括:
确定所述输入值对应的第一目标组件的描述信息;
将所述输入值替换所述第一目标组件对应的初始值,并生成对应的响应事件;
根据所述依赖关系规则,确定与所述第一目标组件对应的第二目标组件的组件标识,并根据所述第二目标组件的组件标识,确定所述第二目标组件的描述信息;
在所述响应事件符合所述监听事件规则的情况下,从所述第一目标组件的描述信息中与所述响应启动时的取值位置对应的位置处,提取得到目标值;
通过所述处理函数对所述目标值进行计算,得到输出值;
将所述输出值覆盖至所述第二目标组件的描述信息中与所述赋值目标对应的位置处。
在一种可选实施方式中,在所述对所述目标网页表单进行展示之后,所述方法还包括:
在完成对所述目标网页表单中所有组件的填写操作之后,提取所述目标网页表单中所有组件的当前值,并将所述当前值发送至服务器进行处理。
第二方面,本申请实施例提供了一种网页表单的处理装置,该装置包括:
获取模块,被配置为获取包括多个组件各自的描述信息的描述配置文件,以及所述组件对应的初始值,所述描述信息包括:依赖关系规则,所述依赖关系规则包括第一目标组件与第二目标组件之间的对应关系;所述初始值为组件在网页表单中展示时的默认取值;
渲染模块,被配置为对所述描述配置文件和所述初始值进行渲染,得到初始网页表单并展示;
更新模块,被配置为在接收到对所述初始网页表单填写的输入值时,根据所述输入值、以及所述依赖关系规则,对所述初始网页表单中与所述输入值对应的第一目标组件的描述信息,以及与所述第一目标组件对应的第二目标组件的描述信息进行更新,使得所述初始网页表单更新为目标网页表单;
展示模块,被配置为对所述目标网页表单进行展示。
在一种可选实施方式中,所述描述信息还包括:针对预设类型值的数据发送接口以及数据接收接口;所述更新模块,包括:
第一发送子模块,被配置为在所述输入值为所述预设类型值的情况下,通过所述数据发送接口将所述输入值发送至服务器;
接收子模块,被配置为通过所述数据接收接口,接收所述服务器在对所述输入值校验后返回的远程校验结果;
第一添加子模块,被配置为将所述远程校验结果添加至所述第一目标组件的描述信息中。
在一种可选实施方式中,所述描述信息还包括:针对所述输入值的合法性校验规则;
所述更新模块,包括:
第二添加子模块,被配置为在所述输入值不满足所述合法性校验规则的情况下,将预设的通知文本添加至所述第一目标组件的描述信息中。
在一种可选实施方式中,所述合法性校验规则包括:所述输入值不为空、所述输入值符合正则表达式、所述输入值的最大长度小于第一预设阈值和/或所述输入值的最小长度大于第二预设阈值中的一种或多种。
在一种可选实施方式中,所述描述信息还包括数据路径;
所述获取模块,包括:
第一确定子模块,被配置为若根据所述数据路径获取得到对应的数值,则将所述数值确定为所述初始值;
第二确定子模块,被配置为若根据所述数据路径未获取得到对应的数值,则将预设的默认值确定为所述初始值。
在一种可选实施方式中,所述描述信息还包括所述描述信息对应的组件的组件标识,所述渲染模块包括:
注册子模块,被配置为通过所述组件的描述信息包括的组件标识,在预设的全局变量表中进行注册;
渲染子模块,被配置为遍历所述描述配置文件中的所有组件,并根据所述组件的描述信息以及所述组件的初始值,对所述组件进行渲染,直至所有组件完成所述渲染,得到所述初始网页表单并展示。
在一种可选实施方式中,所述依赖关系规则包括:与所述组件之间具有依赖关系的组件的组件标识、监听事件规则、响应启动时的取值位置、处理函数和赋值目标;
所述更新模块,包括:
第三确定子模块,被配置为确定所述输入值对应的第一目标组件的描述信息;
生成子模块,被配置为将所述输入值替换所述第一目标组件对应的初始值,并生成对应的响应事件;
第四确定子模块,被配置为根据所述依赖关系规则,确定与所述第一目标组件对应的第二目标组件的组件标识,并根据所述第二目标组件的组件标识,确定所述第二目标组件的描述信息;
提取子模块,被配置为在所述响应事件符合所述监听事件规则的情况下,从所述第一目标组件的描述信息中与所述响应启动时的取值位置对应的位置处,提取得到目标值;
计算子模块,被配置为通过所述处理函数对所述目标值进行计算,得到输出值;
赋值子模块,被配置为将所述输出值覆盖至所述第二目标组件的描述信息中与所述赋值目标对应的位置处。
在一种可选实施方式中,所述装置还包括:
输出模块,被配置为在完成对所述目标网页表单中所有组件的填写操作之后,提取所述目标网页表单中所有组件的当前值,并将所述当前值发送至服务器进行处理。
第三方面,本申请实施例还提供了一种电子设备,包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序,所述计算机程序被所述处理器执行时实现如本申请提供的网页表单的处理方法的步骤。
第四方面,本申请实施例还提供了一种存储介质,当所述存储介质中的指令由电子设备的处理器执行时,使得电子设备能够执行如本申请提供的网页表单的处理方法的步骤。
第五方面,本申请实施例还提供了一种应用程序,所述应用程序由电子设备的处理器执行时,实现如本申请提供的网页表单的处理方法的步骤。
在本申请实施例中,获取包括多个组件各自的描述信息的描述配置文件,以及组件对应的初始值,描述信息包括:依赖关系规则,依赖关系规则包括第一目标组件与第二目标组件之间的对应关系;初始值为组件在网页表单中展示时的默认取值;对描述配置文件和初始值进行渲染,得到初始网页表单并展示;在接收到对初始网页表单填写的输入值时,根据输入值、以及依赖关系规则,对初始网页表单中与输入值对应的第一目标组件的描述信息,以及与第一目标组件对应的第二目标组件的描述信息进行更新,使得初始网页表单更新为目标网页表单;对目标网页表单进行展示。本申请中,可以在初始网页表单的基础上,根据对组件输入的输入值以及组件之间的依赖关系规则,对输入值对应的第一目标组件的描述信息,以及与第一目标组件对应的第二目标组件的描述信息进行了更新,即通过输入值,不单单影响了输入值对应的第一目标组件的渲染过程,还对与第一目标组件对应的第二目标组件的渲染过程产生了影响,实现了组件级别的动态表单逻辑,提高了网页表单的应用范围。
上述说明仅是本申请技术方案的概述,为了能够更清楚了解本申请的技术手段,而可依照说明书的内容予以实施,并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂,以下特举本申请的具体实施方式。
附图说明
通过阅读下文优选实施方式的详细描述,各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的,而并不认为是对本申请的限制。而且在整个附图中,用相同的参考符号表示相同的部件。在附图中:
图1是本申请实施例提供的一种网页表单的处理方法的步骤流程图;
图2是本申请实施例提供的一种网页表单的界面图;
图3是本申请实施例提供的另一种网页表单的界面图;
图4是本申请实施例提供的另一种网页表单的处理方法的步骤流程图;
图5是本申请实施例提供的一种描述配置文件中的树状结构图;
图6是本申请实施例提供的一种账号注册场景下的初始化过程的流程图;
图7是本申请实施例提供的一种账号注册场景下的运行过程的流程图;
图8是本申请实施例提供的一种账号注册场景下的提交过程的流程图;
图9是本申请实施例提供的一种网页表单的处理装置的框图;
图10是本申请一个实施例的电子设备的逻辑框图;
图11是本申请另一个实施例的电子设备的逻辑框图。
具体实施方式
下面将参照附图更详细地描述本申请的示例性实施例。虽然附图中显示了本申请的示例性实施例,然而应当理解,可以以各种形式实现本申请而不应被这里阐述的实施例所限制。相反,提供这些实施例是为了能够更透彻地理解本申请,并且能够将本申请的范围完整的传达给本领域的技术人员。
图1是本申请实施例提供的一种网页表单的处理方法的步骤流程图,如图1所示,该方法可以包括:
步骤101,获取包括多个组件各自的描述信息的描述配置文件,以及所述组件对应的初始值,所述描述信息包括:依赖关系规则。
其中,依赖关系规则包括第一目标组件与第二目标组件之间的对应关系;所述初始值为组件在网页表单中展示时的默认取值。
在本申请实施例中,组件(Component)是对数据和方法的简单封装,在网页表单中,可以将网页表单中需要展示的元素的功能的展示效果,以数据和方法的方式进行封装,得到对应的组件。例如,网页表单中需要有一个发生按钮,点击该按钮后能够实现将数据发送至目标端的目的,则可以将按钮的功能和展示效果以数据和方法的方式进行封装,得到该发送按钮对应的组件,该按钮的功能包括但不限于对发送接口的调用方法。
本申请实施例可以将各种类型的组件抽象并封装,如一般的输入框组件、下拉框组件等。再通过一定的描述语法描述一个表单中需要的数据对应的组件,每个组件的属性,以及组件之间的依赖关系,从而得到包括多个组件各自的描述信息的描述配置文件,运行时可以解析描述配置文件,并且在浏览器中渲染出对应的组件的描述信息。描述配置文件为多个组件的显示结构的集合,描述配置文件可以根据界面描述语言进行建立,一个网页表单的描述配置文件可以描述网页表单中的文字、图形和图像等界面元素的显示结构,每个组件可以在描述配置文件中具有对应的描述信息。
进一步的,一个网页表单中,所展示的每个组件(展示的组件也可以被理解为展示元素),可以具有对应的初始值,该初始值可以由开发人员根据实际需求进行制定,也可以为预设的默认值。
例如,在账号注册场景中,用户可以用自己的手机号或邮箱进行账号注册,且经过统计,用户更偏向于采用手机号进行账号注册。根据上述情况,参照图2,示出了本申请实施例提供的一种网页表单的界面图,其中该网页表单可以包括两个组件:注册方式选择组件和手机号输入组件,其中,由于用户更偏向于采用手机号进行账号注册,注册方式选择组件的初始值可以为“手机”,手机号输入组件的初始值可以为空,以等待输入输入值。
进一步的,不同的组件之间还存在相互依赖关系,该相互依赖关系可以为一个组件在触发对应事件后,会使得另一个与其对应的组件发生变更。
具体的,依赖关系规则可以包括:若组件A和组件B之间存在依赖关系,则组件A和组件B各自可以具有对应的组件标识(uuid),且组件A和组件B可以通过对方的组件标识与对方进行通信。
步骤102,对所述描述配置文件和所述初始值进行渲染,得到初始网页表单并展示。
在本申请实施例中,可以基于Vue框架实现一个封装后的动态表单工具类库,该动态表单工具类库可以根据组件的值以及描述配置文件,实现网页表单的渲染,开发人员可以引入该动态表单工具类库,并将描述配置文件和初始值做为其输入,将渲染好的网页表单做为输出。
动态表单工具类库的具体代码引入,可以包括:
<general-form-form
:config="formConfig"//用于输入表单描述
:init-data="formData""//用于输入数据值
@submit-valid="onSubmit"//用于处理校验成功的用户提交事件
></general-form-form>
具体的,在该步骤中,动态表单工具类库可以对描述配置文件进行遍历操作,解析每个组件对应的描述信息,得到解析结果,并获取每个组件所需的渲染数据,再根据每个组件的解析结果和渲染数据,对每个组件进行渲染生成,同时为组件添加初始值,当所有组件渲染完毕后,得到可以展示的初始网页表单。
例如,在账号注册场景中,根据描述配置文件中注册方式选择组件和手机号输入组件的描述信息,以及注册方式选择组件的初始值:“手机”,手机号输入组件为空的初始值,可以渲染得到如图2所示的网页表单。
步骤103,在接收到对所述初始网页表单填写的输入值时,根据所述输入值、以及所述依赖关系规则,对所述初始网页表单中与所述输入值对应的第一目标组件的描述信息,以及与所述第一目标组件对应的第二目标组件的描述信息进行更新,使得所述初始网页表单更新为目标网页表单。
在得到初始网页表单并通过浏览器展示之后,用户可以进行在初始网页表单中填表的操作,具体的,用户可以针对初始网页表单中的组件填写对应的输入值。
由于依赖关系规则包括:若组件A和组件B之间存在依赖关系,则组件A和组件B各自可以具有对应的组件标识,且组件A和组件B可以通过对方的组件标识与对方进行通信。组件B可以监听组件A的组件标识,以表明组件A和组件B之间存在依赖关系。并且组件B在组件A得到用户输入产生响应事件时,组件B可以针对该响应事件,通过预设的处理函数生成输出值,并通过输出值更新自己对应位置的初始值。
例如,在图2示出的账号注册场景中,初始状态下注册方式选择组件的初始值可以为“手机”,当用户对注册方式选择组件进行输入,将注册方式选择为“邮箱”时,则可以将注册方式选择组件确定为第一目标组件,输入值可以为“邮箱”,注册方式选择组件在发生更新的基础上,与注册方式选择组件对应的手机号输入组件可以作为第二目标组件,可以响应该输入值输入“邮箱”的事件,并生成输出值“true”,通过输出值“true”将其组件属性中hide项的原始值“false”进行替换,使得手机号输入组件由原先在界面中展示变为在界面中隐藏。
另外,同样与注册方式选择组件对应的邮箱输入组件可以作为第二目标组件,同时响应该输入值可以“邮箱”的事件,并生成输出值“false”,通过输出值“false”将其组件属性中hide项的原始值“true”进行替换,使得邮箱输入组件由原先在界面中隐藏变为在界面中展示,得到如图3展示的目标网页表单。
步骤104,对所述目标网页表单进行展示。
在本申请实施例中,浏览器可以将得到的新的目标网页表单替换原有旧的初始网页表单,新的目标网页表中,已经根据输入值与组件之间的依赖关系规则,对输入值对应的第一目标组件的描述信息,以及与第一目标组件对应的第二目标组件的描述信息进行了更新,即通过输入值,不单单影响了输入值对应的第一目标组件的渲染过程,还对与第一目标组件对应的第二目标组件的渲染过程产生了影响,实现了组件级别的动态表单逻辑。
综上所述,本申请实施例提供的一种网页表单的处理方法,包括:获取包括多个组件各自的描述信息的描述配置文件,以及组件对应的初始值,描述信息包括:依赖关系规则,依赖关系规则包括第一目标组件与第二目标组件之间的对应关系;初始值为组件在网页表单中展示时的默认取值;对描述配置文件和初始值进行渲染,得到初始网页表单并展示;在接收到对初始网页表单填写的输入值时,根据输入值、以及依赖关系规则,对初始网页表单中与输入值对应的第一目标组件的描述信息,以及与第一目标组件对应的第二目标组件的描述信息进行更新,使得初始网页表单更新为目标网页表单;对目标网页表单进行展示。本申请中,可以在初始网页表单的基础上,根据对组件输入的输入值以及组件之间的依赖关系规则,对输入值对应的第一目标组件的描述信息,以及与第一目标组件对应的第二目标组件的描述信息进行了更新,即通过输入值,不单单影响了输入值对应的第一目标组件的渲染过程,还对与第一目标组件对应的第二目标组件的渲染过程产生了影响,实现了组件级别的动态表单逻辑,提高了网页表单的应用范围。
图4是本申请实施例提供的另一种网页表单的处理方法的步骤流程图,如图4所示,该方法可以包括:
步骤201、获取包括多个组件各自的描述信息的描述配置文件,以及所述组件对应的初始值,所述描述信息包括:依赖关系规则。
其中,所述依赖关系规则包括第一目标组件与第二目标组件之间的对应关系;所述初始值为组件在网页表单中展示时的默认取值。
在本申请实施例中,网页表单在浏览器中的渲染与后端需要的数据之间往往有很强烈的对应关系:例如提交网页表单时发送的数据基本上是一个JSON对象,其数据结构是key(键)-value(值)形式的键值对。如上述实施例中图3举例的包括注册方式“邮箱”的组件和输入邮箱地址组件的网页表单,发送的数据可以为:{"registerBy":2,"email":"[email protected]"},对应网页表单中一个下拉框组件,一个输入框组件。由此可以总结出一个网页表单可以分割成以基本输入组件(下拉框、输入框等)为最小单元的树状结构,而树状结构的根节点为容器组件,容器组件可以对应多个基本输入组件,每个组件可以一一对应需要发送的数据结构。本申请实施例在建立描述配置文件时即采用此原则,将网页表单视为一个树,并对其每个节点进行描述。
由于业务实践中,前后端常用JSON格式传输数据,JSON本身是一个树形结构。因此网页表单中的每个组件都可以对应JSON树形结构的某个节点。因此一个树状的描述配置文件可以更贴合数据实际情况。
例如,需要提交如下结构的数据:
则描述配置文件中组件形成的树状结构可以为图5所示,图5示出了本申请实施例提供的一种描述配置文件中的树状结构图,其中,位于根节点的容器组件,以及容器组件对应的两个基本输入组件:string字段组件和collection字段组件,以及collection字段组件的子节点x、y、z、z1、z2的层级以及位置,都能在树状结构中清晰明了的展示。
进一步的,若要抽象描述一个网页表单,则描述内容需求需满足:1、数据:描述配置文件中的组件的描述信息与渲染数据之间存在对应关系。2、描述配置文件中的组件的描述信息具有类型,如类型可以为“下拉框”,“必选”,“非必选”等。例如,图2的注册方式选择组件的类型为“下拉框”。描述配置文件中的组件的输入值需要进行合法性校验,如图2的注册方式选择组件的手机号输入组件的输入值需进行校验,以判断输入值是否为11位且未被使用等。3、依赖关系:组件A和组件B之间存在依赖关系,组件B会因为组件A的输入值的变化而产生相应的变化。
进一步的,若要抽象描述一个网页表单,则描述信息需求需满足:1、数据:需要给描述配置文件中每个组件输入表单提示(label),以及指定渲染数据的数据路径(output),比如在账号注册场景下,注册方式选择组件对应的是registerBy字段,提示为“注册方式”,邮箱输入组件对应的是email字段,提示为“邮箱地址”。2、组件及属性:每个组件可以有自己的组件类型(component),以及相应的配置项(props),如在账号注册场景下,注册方式选择组件的组件类型是一个下拉框,可通过配置项配置其用户界面上是否有可清空按钮、该数据是否必选等。3、依赖关系:组件响应其他组件事件的逻辑(deps,dependencies),如在账号注册场景下,邮箱输入组件和手机号输入组件响应注册方式选择组件,即邮箱输入组件和手机号输入组件分别依赖注册方式选择组件的用户输入事件。
因此,针对上述网页表单的描述内容需求和描述信息需求,描述配置文件中一个组件所需要的描述信息如下:
uuid组件ID//用于在全局表单组件映射表中注册,以对描述配置文件中其他组件暴露自身示例;
label组件标签//用于定义该组件的名称;
output数据路径//用于指示该组件渲染时所需数据的路径;
component组件类型//用于指示该组件的类型,如“输入框”、“下拉框”等;
props组件属性//用于根据实际需求进行配置,增加或减少组件的功能;
deps[]依赖关系//用于反映组件之间的依赖关系
其中依赖关系的描述信息具体可以包括:
listen监听组件ID
event监听事件
source响应启动时的取值位置
formatter处理函数
destination赋值目标
由于本申请实施例使用了JSON格式作为存储描述配置文件的数据结构,其标准已被广泛使用且对网页前端开发者友好。
可选的,每个组件的描述信息包括数据路径,步骤201具体可以包括:
子步骤2011、若根据所述数据路径获取得到对应的数值,则将所述数值确定为所述初始值。
子步骤2012、若根据所述数据路径未获取得到对应的数值,则将预设的默认值确定为所述初始值。
在本申请实施例中,可以根据组件的描述信息中的output数据路径字段,从本地或远端获取对应的数值,该远端可以为远端服务器或互联网。
若根据所述数据路径获取得到对应的数值,则将所述数值确定为所述初始值;若根据所述数据路径未获取得到对应的数值,则将预设的默认值确定为所述初始值。
例如,参照图3,在账号注册场景中,针对邮箱号输入组件12,可以根据其output数据路径字段,获取到当前初始值为[email protected],即会在邮箱号输入组件12的输入框中展示“[email protected]”的初始格式,以供用户对a、b、c的内容进行填写。若未获得初始值“[email protected]”,则可以以默认的空值作为邮箱号输入组件12初始值,即在邮箱号输入组件12的输入框中不展示任何内容。
步骤202、对所述描述配置文件和所述初始值进行渲染,得到初始网页表单并展示。
该步骤具体可以参照上述步骤102,此处不再赘述。
可选的,描述信息还包括所述描述信息对应的组件的组件标识,步骤202具体可以包括:
子步骤2021、将所述描述配置文件的每个组件,通过自身的组件标识在预设的全局变量表中进行注册。
子步骤2022、遍历所述描述配置文件中的每个组件,并根据所述组件以及所述组件的初始值,对所述组件进行渲染,直至所有组件完成所述渲染,得到所述初始网页表单并展示。
具体的,对描述配置文件和初始值进行渲染,得到初始网页表单的过程,可以理解为网页表单生成过程中的初始化过程,在本申请实施例中,每个组件的描述信息包括唯一的组件标识,该组件标识可以为uuid,并可以在全局变量表中注册组件自身的uuid,对表单中其他组件暴露自身实例,以实现组件之间相互通信的基础。
在所有组件都完成在全局变量表中的注册后,可以遍历每个组件中描述信息的deps[]依赖关系字段,在该组件所依赖的另一组件上注册监听事件及其响应函数,当事件发生时,已注册的响应函数会被执行。
之后,可以根据组件的描述信息的output数据路径字段获取初始数据中该组件的初始值,如邮箱号输入组件,可以根据其output数据路径字段获取到初始值:[email protected]。
参照图6,图6示出了本申请实施例提供的一种账号注册场景下的初始化过程的流程图,包括:
A1、开发人员可以输入初始值,以及描述配置文件至根组件。
A2、根组件保存初始值和描述配置文件,并遍历描述配置文件。
A3、根组件进行初始化操作,具体为执行将组件的组件标识在全局变量表中进行注册。以对表单中其他组件暴露自身实例,以实现组件之间相互通信的基础。
A4、在所有组件注册完毕后,注册组件之间的依赖关系。即邮箱号输入组件依赖于注册方式选择组件,则可以在邮箱号输入组件中监听注册方式选择组件的组件标识。
A5、组件通过output数据路径字段获取初始数据中对应该组件的初始值。如邮箱号输入组件可以根据其output数据路径字段获取到初始值:[email protected]。
A6、根据描述配置文件中的配置,初始值,对每个组件进行渲染,得到初始网页表单。
A7、将初始网页表单输出至浏览器,以供浏览器进行展示。
步骤203、接收对所述初始网页表单填写的输入值。
在本申请实施例中,输入值可以包括用户对初始网页表单中输入框的输入值输入操作,对初始网页表单中下拉框的输入值的选择操作等。
步骤204、根据所述输入值、以及所述依赖关系规则,对所述初始网页表单中与所述输入值对应的第一目标组件的描述信息,以及与所述第一目标组件对应的第二目标组件的描述信息进行更新,使得所述初始网页表单更新为目标网页表单。
该步骤具体可以参照上述步骤103,此处不再赘述。
可选的,所述描述信息还包括:针对预设类型值的数据发送接口以及数据接收接口,步骤204具体可以包括:
子步骤2041、在所述输入值为所述预设类型值的情况下,通过所述数据发送接口将所述输入值发送至服务器。
在网页表单的处理场景中,通常具有对用户输入的输入值进行远程校验的需求。在这种情况下,需要将输入值发送至服务器端进行远程校验。
因此,为了实现与远端服务器的交互,本申请实施例可以在描述信息中定义预设类型值的数据发送接口以及数据接收接口,以实现通过数据发送接口发送预设类型值的数据至服务器,并通过数据接收接口接受服务器返回的校验结果。
例如,在账号注册场景中,在描述配置文件中组件的描述信息中,可以通过字段,来实现提供数据发送接口以及数据接收接口的接口组件的建立,以及远端校验的数据收发规则,具体字段以及字段解释如下:
"validator":"1168fce0-5300-11ea-8147-eb34d92e76f5"//为邮箱号输入组件声明了一个接口组件作为远端校验
"uuid":"1168fce0-5300-11ea-8147-eb34d92e76f5"//为邮箱号输入组件指定了该接口组件作为远端校验
"url":"/validator/email"//发送请求的地址
"method":"POST"//定义请求方式
"payload":["99f2e640-4d95-11ea-a557-ffc5a5a93403"]//携带的数据指定了邮箱地址的ID,将邮箱号输入组件对应的数据发送
"pickKey":"data"//与服务器约定返回的字段值表示校验结果
同理,手机号输入组件的提供数据发送接口以及数据接收接口的接口组件的建立,以及远端校验的数据收发规则的字段,可以参照上述描述,此处不再赘述。
子步骤2042、通过所述数据接收接口,接收所述服务器在对所述输入值校验后返回的远程校验结果。
在本申请实施例中,服务器可以根据预设的校验规则,对输入值进行校验,并生成对应的校验结果。
例如,在通过手机号进行账号注册的场景,手机号输入组件可以将用户输入的“18711112221”通过接口组件的数据发送接口发送至服务器。服务器通过后端账号数据库,在校验过程中发现该手机号“18711112221”未被注册,则服务器在可以生成“该手机号未被注册”的远程校验结果,并将该远程校验结果发送至前端浏览器。
又比如,手机号输入组件可以将用户输入的“18711112222”通过接口组件的数据发送接口发送至服务器。服务器通过后端账号数据库,在校验过程中发现该手机号“18711112222”已被注册,则服务器在可以生成“该手机号已被注册,请输出新的手机号”的远程校验结果,并将该远程校验结果发送至前端浏览器。
子步骤2043、将所述远程校验结果添加至所述第一目标组件的描述信息中。
在该步骤中,前端的手机号输入组件可以通过接口组件的数据接收接口接收服务器返回的远程校验结果,并将远程校验结果添加至所述第一目标组件的描述信息中,则该远程校验结果可以在生成的网页表单中进行展示。
可选的,所述描述信息还包括:针对所述输入值的合法性校验规则;步骤204具体可以包括:
子步骤2044、在所述输入值不满足所述合法性校验规则的情况下,将预设的通知文本添加至所述第一目标组件的渲染数据中。
可选的,针对输入值的合法性校验规则包括:所述输入值不为空、所述输入值符合正则表达式、所述输入值的最大长度小于第一预设阈值和/或所述输入值的最小长度大于第二预设阈值中的一种或多种。
在本申请实施例中,为了减少与后端服务器的通信次数,降低服务器的负载,还可以将一些较为简单的数据校验交由前端浏览器执行。
具体的,描述配置文件中组件的描述信息还包括:合法性校验规则,以供浏览器对用户输入组件的输入值进行简单的合法性校验。
例如,在通过手机号进行账号注册的场景,手机号输入组件接收到的输入输入值为:“1871111222”,手机号输入组件包括的合法性校验规则为判断输入值是否为11位,手机号输入组件在通过合法性校验规则确定输入值“1871111222”不为11位电话号的情况下,可以将预设的通知文本“您输入的并非为11位电话号,请重新输入”添加至第一目标组件的渲染数据中,该通知文本可以在生成的网页表单中进行展示。
可选的,依赖关系规则包括:与所述组件之间具有依赖关系的组件的组件标识、监听事件规则、响应启动时的取值位置、处理函数和赋值目标;步骤204具体可以包括:
子步骤2045、确定所述输入值对应的第一目标组件的描述信息。
子步骤2046、将所述输入值替换所述第一目标组件对应的初始值,并生成对应的响应事件。
例如,参照图2,在账号注册场景中,初始网页表单中,注册方式选择组件的初始值可以为“手机”,当用户对注册方式选择组件进行输入,将注册方式选择为“邮箱”时,则可以将注册方式选择组件确定为第一目标组件,输入值可以为“邮箱”,并将输入值“邮箱”替换注册方式选择组件的初始值“手机”,并生成对应反应上述变更操作的响应事件。
子步骤2047、根据所述依赖关系规则,确定与所述第一目标组件对应的第二目标组件的组件标识,并根据所述第二目标组件的组件标识,确定所述第二目标组件的描述信息。
子步骤2048、在所述响应事件符合所述监听事件规则的情况下,从所述第一目标组件的描述信息中与所述响应启动时的取值位置对应的位置处,提取得到目标值。
子步骤2049、通过所述处理函数对所述目标值进行计算,得到输出值。
子步骤20410、将所述输出值覆盖至所述第二目标组件的描述信息中与所述赋值目标对应的位置处。
在本申请实施例中,在账号注册场景下,描述配置文件中,组件的一个监听另一依赖组件的组件标识的字段可以为:
"listen":"406c0bb0-4d95-11ea-a557-ffc5a5a93403"//监听ID(即注册方式选择组件)
组件的一个监听事件规则的字段可以为:
"event":"change"//监听的事件(注册方式选择组件的数据变化)
组件的一个响应启动时的取值位置的字段可以为:
"source":"value"//value代表注册方式选择组件的对应值,其中“1”为手机,“2”为邮箱
组件的一个处理函数的字段可以为:
"formatter":{}//表示规则运算函数,其中可以提供一系列预设函数
组件的一个赋值目标的字段可以为:
"destination":"hide"//运算后得到的值需要赋值给邮箱组件的hide属性,hide值为false表示显示,由此邮箱号输入组件可以被展示
进一步参照上述步骤2046中的示例,根据注册规则,注册方式选择组件分别与邮箱号输入组件和手机号输入组件具有依赖关系,则可以确定邮箱号输入组件和手机号输入组件为第二目标组件,注册方式选择组件根据全局变量表中邮箱号输入组件和手机号输入组件的组件标识,可以将响应事件分别发送至邮箱号输入组件和手机号输入组件。
假设在初始状态下注册方式选择组件的初始值可以为“手机”,当用户对注册方式选择组件进行输入,将注册方式选择为“邮箱”时,则可以将注册方式选择组件确定为第一目标组件,输入值可以为“邮箱”,注册方式选择组件在发生更新的基础上生成对应的响应事件,与注册方式选择组件对应的手机号输入组件可以作为第二目标组件,可以通过"event":"change"字段响应该输入值输入“邮箱”的事件,并通过"source":"value"字段取到值:“邮箱”,且通过"formatter":{}字段,以该字段对应的预设处理函数生成输出值“true”,之后根据"destination":"hide"字段找到的组件属性中hide项,并通过输出值“true”对hide项的原始值“false”进行替换,使得手机号输入组件由原先在界面中展示变为在界面中隐藏。
参照图7,图7示出了本申请实施例提供的一种账号注册场景下的运行过程的流程图,包括:
B1、浏览器捕获用户对注册方式选择组件的输入值。
B2、注册方式选择组件将输入值同步至根组件,同时触发校验。
B3、在用户对注册方式选择组件进行输入值的输入后,邮箱号输入组件根据与注册方式选择组件之间的依赖关系规则,触发依赖处理函数。
B4、邮箱号输入组件根据响应启动时的取值位置,获取注册方式选择组件对应值。
B5、邮箱号输入组件执行处理函数,并根据赋值目标,将处理函数的输出值覆盖至与赋值目标对应的位置处。
B6、邮箱号输入组件根据变更后的配置,更新文档对象模型(DocumentObjectModel,DOM)。
B7、邮箱号输入组件还可以同时捕获输入值。
B8、邮箱号输入组件将捕获的输入值同步至根组件,并触发校验。
B9、邮箱号输入组件准备发送请求,并将发送请求发送至接口组件,发送请求中可以包括输入值。
B10、接口组件将发送请求发送至服务端,以供服务端对发送请求中包括的输入值进行远端校验。
B11、接口组件接收服务端返回的校验结果。
B12、接口组件将校验结果翻译为校验状态后,返回至邮箱号输入组件。
B13、邮箱号输入组件将校验状态发送至浏览器进行展示。
步骤205、对所述目标网页表单进行展示。
该步骤具体可以参照上述步骤104,此处不再赘述。
步骤206,在完成对所述目标网页表单中所有组件的填写操作之后,提取所述目标网页表单中所有组件的当前值,并将所述当前值发送至服务器进行处理。
在本申请实施例中,具体的,在完成对目标网页表单中所有组件的填写操作之后,可以对目标网页表单中的整体数据进行一次校验,具体为按深度优先遍历一次表单描述树,对其中每个组件进行一次校验,若校验失败则在浏览器中显示校验失败信息;若校验通过,组件通过抛出事件形式将当前值传递给浏览器,开发者可以自行决定如何处理这些当前值,比如发送至后端服务器或者其他操作。
参照图8,图8示出了本申请实施例提供的一种账号注册场景下的提交过程的流程图,包括:
C1、用户在目标网页表单中点击提交之后,浏览器触发用户提交事件。
根组件响应该用户提交事件,并触发对C2注册方式选择组件的校验和C3邮箱号输入组件的校验。
C4、在上述校验都通过之后,根组件将用户输入的数据提取并发送至浏览器,以供浏览器将数据由其他模块处理或发送至服务端进行处理。
综上所述,本申请实施例提供的一种网页表单的处理方法,包括:获取包括多个组件各自的描述信息的描述配置文件,以及组件对应的初始值,描述信息包括:依赖关系规则,依赖关系规则包括第一目标组件与第二目标组件之间的对应关系;初始值为组件在网页表单中展示时的默认取值;对描述配置文件和初始值进行渲染,得到初始网页表单并展示;在接收到对初始网页表单填写的输入值时,根据输入值、以及依赖关系规则,对初始网页表单中与输入值对应的第一目标组件的描述信息,以及与第一目标组件对应的第二目标组件的描述信息进行更新,使得初始网页表单更新为目标网页表单;对目标网页表单进行展示。本申请中,可以在初始网页表单的基础上,根据对组件输入的输入值以及组件之间的依赖关系规则,对输入值对应的第一目标组件的描述信息,以及与第一目标组件对应的第二目标组件的描述信息进行了更新,即通过输入值,不单单影响了输入值对应的第一目标组件的渲染过程,还对与第一目标组件对应的第二目标组件的渲染过程产生了影响,实现了组件级别的动态表单逻辑,提高了网页表单的应用范围。
图9是本申请实施例提供的一种网页表单的处理装置的框图,如图9所示,包括:
获取模块301,被配置为获取包括多个组件各自的描述信息的描述配置文件,以及所述组件对应的初始值,所述描述信息包括:依赖关系规则,所述依赖关系规则包括第一目标组件与第二目标组件之间的对应关系;所述初始值为组件在网页表单中展示时的默认取值;
可选的,所述描述信息还包括数据路径;
所述获取模块301,包括:
第一确定子模块,被配置为若根据所述数据路径获取得到对应的数值,则将所述数值确定为所述初始值;
第二确定子模块,被配置为若根据所述数据路径未获取得到对应的数值,则将预设的默认值确定为所述初始值。
渲染模块302,被配置为对所述描述配置文件和所述初始值进行渲染,得到初始网页表单并展示;
可选的,所述描述信息还包括所述描述信息对应的组件的组件标识,所述渲染模块302包括:
注册子模块,被配置为通过所述组件的描述信息包括的组件标识,在预设的全局变量表中进行注册;
渲染子模块,被配置为遍历所述描述配置文件中的所有组件,并根据所述组件的描述信息以及所述组件的初始值,对所述组件进行渲染,直至所有组件完成所述渲染,得到所述初始网页表单并展示。
更新模块303,被配置为在接收到对所述初始网页表单填写的输入值时,根据所述输入值、以及所述依赖关系规则,对所述初始网页表单中与所述输入值对应的第一目标组件的描述信息,以及与所述第一目标组件对应的第二目标组件的描述信息进行更新,使得所述初始网页表单更新为目标网页表单;
可选的,所述描述信息还包括:针对预设类型值的数据发送接口以及数据接收接口;所述更新模块303,包括:
第一发送子模块,被配置为在所述输入值为所述预设类型值的情况下,通过所述数据发送接口将所述输入值发送至服务器;
接收子模块,被配置为通过所述数据接收接口,接收所述服务器在对所述输入值校验后返回的远程校验结果;
第一添加子模块,被配置为将所述远程校验结果添加至所述第一目标组件的描述信息中。
可选的,所述描述信息还包括:针对所述输入值的合法性校验规则;
所述更新模块303,包括:
第二添加子模块,被配置为在所述输入值不满足所述合法性校验规则的情况下,将预设的通知文本添加至所述第一目标组件的描述信息中。
可选的,所述合法性校验规则包括:所述输入值不为空、所述输入值符合正则表达式、所述输入值的最大长度小于第一预设阈值和/或所述输入值的最小长度大于第二预设阈值中的一种或多种。
所述依赖关系规则包括:与所述组件之间具有依赖关系的组件的组件标识、监听事件规则、响应启动时的取值位置、处理函数和赋值目标;
可选的,所述更新模块303,包括:
第三确定子模块,被配置为确定所述输入值对应的第一目标组件的描述信息;
生成子模块,被配置为将所述输入值替换所述第一目标组件对应的初始值,并生成对应的响应事件;
第四确定子模块,被配置为根据所述依赖关系规则,确定与所述第一目标组件对应的第二目标组件的组件标识,并根据所述第二目标组件的组件标识,确定所述第二目标组件的描述信息;
提取子模块,被配置为在所述响应事件符合所述监听事件规则的情况下,从所述第一目标组件的描述信息中与所述响应启动时的取值位置对应的位置处,提取得到目标值;
计算子模块,被配置为通过所述处理函数对所述目标值进行计算,得到输出值;
赋值子模块,被配置为将所述输出值覆盖至所述第二目标组件的描述信息中与所述赋值目标对应的位置处。
展示模块304,被配置为对所述目标网页表单进行展示。
可选的,所述装置还包括:
输出模块,被配置为在完成对所述目标网页表单中所有组件的填写操作之后,提取所述目标网页表单中所有组件的当前值,并将所述当前值发送至服务器进行处理。
综上所述,本申请实施例提供的一种网页表单的处理装置,包括:获取包括多个组件各自的描述信息的描述配置文件,以及组件对应的初始值,描述信息包括:依赖关系规则,依赖关系规则包括第一目标组件与第二目标组件之间的对应关系;初始值为组件在网页表单中展示时的默认取值;对描述配置文件和初始值进行渲染,得到初始网页表单并展示;在接收到对初始网页表单填写的输入值时,根据输入值、以及依赖关系规则,对初始网页表单中与输入值对应的第一目标组件的描述信息,以及与第一目标组件对应的第二目标组件的描述信息进行更新,使得初始网页表单更新为目标网页表单;对目标网页表单进行展示。本申请中,可以在初始网页表单的基础上,根据对组件输入的输入值以及组件之间的依赖关系规则,对输入值对应的第一目标组件的描述信息,以及与第一目标组件对应的第二目标组件的描述信息进行了更新,即通过输入值,不单单影响了输入值对应的第一目标组件的渲染过程,还对与第一目标组件对应的第二目标组件的渲染过程产生了影响,实现了组件级别的动态表单逻辑,提高了网页表单的应用范围。
图10是根据一示例性实施例示出的一种电子设备600的框图。例如,电子设备600可以是移动电话,计算机,数字广播终端,消息收发设备,游戏控制台,平板设备,医疗设备,健身设备,个人数字助理等。
参照图10,电子设备600可以包括以下一个或多个组件:处理组件602,存储器604,电力组件606,多媒体组件608,音频组件610,输入/输出(I/O)的接口612,传感器组件614,以及通信组件616。
处理组件602通常控制电子设备600的整体操作,诸如与显示,电话呼叫,数据通信,相机操作和记录操作相关联的操作。处理组件602可以包括一个或多个处理器620来执行指令,以完成上述的方法的全部或部分步骤。此外,处理组件602可以包括一个或多个模块,便于处理组件602和其他组件之间的交互。例如,处理组件602可以包括多媒体模块,以方便多媒体组件608和处理组件602之间的交互。
存储器604用于存储各种类型的数据以支持在电子设备600的操作。这些数据的示例包括用于在电子设备600上操作的任何应用程序或方法的指令,联系人数据,电话簿数据,消息,图片,视频等。存储器604可以由任何类型的易失性或非易失性存储设备或者它们的组合实现,如静态随机存取存储器(SRAM),电可擦除可编程只读存储器(EEPROM),可擦除可编程只读存储器(EPROM),可编程只读存储器(PROM),只读存储器(ROM),磁存储器,快闪存储器,磁盘或光盘。
电源组件606为电子设备600的各种组件提供电力。电源组件606可以包括电源管理***,一个或多个电源,及其他与为电子设备600生成、管理和分配电力相关联的组件。
多媒体组件608包括在所述电子设备600和用户之间的提供一个输出接口的屏幕。在一些实施例中,屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板,屏幕可以被实现为触摸屏,以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界,而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中,多媒体组件608包括一个前置摄像头和/或后置摄像头。当电子设备600处于操作模式,如拍摄模式或视频模式时,前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜***或具有焦距和光学变焦能力。
音频组件610用于输出和/或输入音频信号。例如,音频组件610包括一个麦克风(MIC),当电子设备600处于操作模式,如呼叫模式、记录模式和语音识别模式时,麦克风用于接收外部音频信号。所接收的音频信号可以被进一步存储在存储器604或经由通信组件616发送。在一些实施例中,音频组件610还包括一个扬声器,用于输出音频信号。
I/O接口612为处理组件602和***接口模块之间提供接口,上述***接口模块可以是键盘,点击轮,按钮等。这些按钮可包括但不限于:主页按钮、音量按钮、启动按钮和锁定按钮。
传感器组件614包括一个或多个传感器,用于为电子设备600提供各个方面的状态评估。例如,传感器组件614可以检测到电子设备600的打开/关闭状态,组件的相对定位,例如所述组件为电子设备600的显示器和小键盘,传感器组件614还可以检测电子设备600或电子设备600一个组件的位置改变,用户与电子设备600接触的存在或不存在,电子设备600方位或加速/减速和电子设备600的温度变化。传感器组件614可以包括接近传感器,被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件614还可以包括光传感器,如CMOS或CCD图像传感器,用于在成像应用中使用。在一些实施例中,该传感器组件614还可以包括加速度传感器,陀螺仪传感器,磁传感器,压力传感器或温度传感器。
通信组件616用于便于电子设备600和其他设备之间有线或无线方式的通信。电子设备600可以接入基于通信标准的无线网络,如WiFi,运营商网络(如2G、3G、4G或5G),或它们的组合。在一个示例性实施例中,通信组件616经由广播信道接收来自外部广播管理***的广播信号或广播相关信息。在一个示例性实施例中,所述通信组件616还包括近场通信(NFC)模块,以促进短程通信。例如,在NFC模块可基于射频识别(RFID)技术,红外数据协会(IrDA)技术,超宽带(UWB)技术,蓝牙(BT)技术和其他技术来实现。
在示例性实施例中,电子设备600可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现,用于获取包括多个组件各自的描述信息的描述配置文件,以及组件对应的初始值,描述信息包括:依赖关系规则,依赖关系规则包括第一目标组件与第二目标组件之间的对应关系;初始值为组件在网页表单中展示时的默认取值;对描述配置文件和初始值进行渲染,得到初始网页表单并展示;在接收到对初始网页表单填写的输入值时,根据输入值、以及依赖关系规则,对初始网页表单中与输入值对应的第一目标组件的描述信息,以及与第一目标组件对应的第二目标组件的描述信息进行更新,使得初始网页表单更新为目标网页表单;对目标网页表单进行展示。
在示例性实施例中,还提供了一种包括指令的非临时性存储介质,例如包括指令的存储器604,上述指令可由电子设备600的处理器620执行以完成上述方法。例如,所述非临时性存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。
图11是根据一示例性实施例示出的一种电子设备700的框图。例如,电子设备700可以被提供为一服务器。参照图11,电子设备700包括处理组件722,其进一步包括一个或多个处理器,以及由存储器732所代表的存储器资源,用于存储可由处理组件722的执行的指令,例如应用程序。存储器732中存储的应用程序可以包括一个或一个以上的每一个对应于一组指令的模块。此外,处理组件722被配置为执行指令,以执行获取包括多个组件各自的描述信息的描述配置文件,以及组件对应的初始值,描述信息包括:依赖关系规则,依赖关系规则包括第一目标组件与第二目标组件之间的对应关系;初始值为组件在网页表单中展示时的默认取值;对描述配置文件和初始值进行渲染,得到初始网页表单并展示;在接收到对初始网页表单填写的输入值时,根据输入值、以及依赖关系规则,对初始网页表单中与输入值对应的第一目标组件的描述信息,以及与第一目标组件对应的第二目标组件的描述信息进行更新,使得初始网页表单更新为目标网页表单;对目标网页表单进行展示。
电子设备700还可以包括一个电源组件726被配置为执行电子设备700的电源管理,一个有线或无线网络接口750被配置为将电子设备700连接到网络,和一个输入输出(I/O)接口758。电子设备700可以操作基于存储在存储器732的操作***,例如WindowsServerTM,Mac OS XTM,UnixTM,LinuxTM,FreeBSDTM或类似。
本申请实施例还提供一种应用程序,所述应用程序由电子设备的处理器执行时,实现如本申请提供的网页表单的处理方法。
本领域技术人员在考虑说明书及实践这里公开的申请后,将容易想到本申请的其它实施方案。本申请旨在涵盖本申请的任何变型、用途或者适应性变化,这些变型、用途或者适应性变化遵循本申请的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的,本申请的真正范围和精神由下面的权利要求指出。
应当理解的是,本申请并不局限于上面已经描述并在附图中示出的精确结构,并且可以在不脱离其范围进行各种修改和改变。本申请的范围仅由所附的权利要求来限制。
Claims (10)
1.一种网页表单的处理方法,其特征在于,所述方法包括:
获取包括多个组件各自的描述信息的描述配置文件,以及所述组件对应的初始值,所述描述信息包括:依赖关系规则,所述依赖关系规则包括第一目标组件与第二目标组件之间的对应关系;所述初始值为组件在网页表单中展示时的初始取值;
对所述描述配置文件和所述初始值进行渲染,得到初始网页表单并展示;
在接收到对所述初始网页表单填写的输入值时,根据所述输入值、以及所述依赖关系规则,对所述初始网页表单中与所述输入值对应的第一目标组件的描述信息,以及与所述第一目标组件对应的第二目标组件的描述信息进行更新,使得所述初始网页表单更新为目标网页表单;
对所述目标网页表单进行展示。
2.根据权利要求1所述的方法,其特征在于,所述描述信息还包括:针对预设类型值的数据发送接口以及数据接收接口;
在所述接收到对所述初始网页表单填写的输入值之后,所述对所述初始网页表单中与所述输入值对应的第一目标组件的描述信息,以及与所述第一目标组件对应的第二目标组件的描述信息进行更新之前,所述方法还包括:
在所述输入值为所述预设类型值的情况下,通过所述数据发送接口将所述输入值发送至服务器;
通过所述数据接收接口,接收所述服务器在对所述输入值校验后返回的远程校验结果;
将所述远程校验结果添加至所述第一目标组件的描述信息中。
3.根据权利要求1所述的方法,其特征在于,所述描述信息还包括:针对所述输入值的合法性校验规则;
在所述接收到对所述初始网页表单填写的输入值之后,所述对所述初始网页表单中与所述输入值对应的第一目标组件的描述信息,以及与所述第一目标组件对应的第二目标组件的描述信息进行更新之前,所述方法还包括:
在所述输入值不满足所述合法性校验规则的情况下,将预设的通知文本添加至所述第一目标组件的描述信息中。
4.根据权利要求3所述的方法,其特征在于,所述合法性校验规则包括:所述输入值不为空、所述输入值符合正则表达式、所述输入值的最大长度小于第一预设阈值和/或所述输入值的最小长度大于第二预设阈值中的一种或多种。
5.根据权利要求1所述的方法,其特征在于,所述描述信息还包括数据路径;
所述获取所述组件对应的初始值,包括:
若根据所述数据路径获取得到对应的数值,则将所述数值确定为所述初始值;
若根据所述数据路径未获取得到对应的数值,则将预设的默认值确定为所述初始值。
6.根据权利要求1所述的方法,其特征在于,所述描述信息还包括所述描述信息对应的组件的组件标识,所述对所述描述配置文件和所述初始值进行渲染,得到初始网页表单并展示,包括:
将每个组件,通过所述组件的描述信息包括的组件标识,在预设的全局变量表中进行注册;
遍历所述描述配置文件中的所有组件,并根据所述组件的描述信息以及所述组件的初始值,对所述组件进行渲染,直至所有组件完成所述渲染,得到所述初始网页表单并展示。
7.根据权利要求6所述的方法,其特征在于,所述依赖关系规则包括:与所述组件之间具有依赖关系的组件的组件标识、监听事件规则、响应启动时的取值位置、处理函数和赋值目标;
所述根据所述输入值、以及所述依赖关系规则,对所述初始网页表单中与所述输入值对应的第一目标组件的描述信息,以及与所述第一目标组件对应的第二目标组件的描述信息进行更新,包括:
确定所述输入值对应的第一目标组件的描述信息;
将所述输入值替换所述第一目标组件对应的初始值,并生成对应的响应事件;
根据所述依赖关系规则,确定与所述第一目标组件对应的第二目标组件的组件标识,并根据所述第二目标组件的组件标识,确定所述第二目标组件的描述信息;
在所述响应事件符合所述监听事件规则的情况下,从所述第一目标组件的描述信息中与所述响应启动时的取值位置对应的位置处,提取得到目标值;
通过所述处理函数对所述目标值进行计算,得到输出值;
将所述输出值覆盖至所述第二目标组件的描述信息中与所述赋值目标对应的位置处。
8.一种网页表单的处理装置,其特征在于,所述装置包括:
获取模块,被配置为获取包括多个组件各自的描述信息的描述配置文件,以及所述组件对应的初始值,所述描述信息包括:依赖关系规则,所述依赖关系规则包括第一目标组件与第二目标组件之间的对应关系;所述初始值为组件在网页表单中展示时的默认取值;
渲染模块,被配置为对所述描述配置文件和所述初始值进行渲染,得到初始网页表单并展示;
更新模块,被配置为在接收到对所述初始网页表单填写的输入值时,根据所述输入值、以及所述依赖关系规则,对所述初始网页表单中与所述输入值对应的第一目标组件的描述信息,以及与所述第一目标组件对应的第二目标组件的描述信息进行更新,使得所述初始网页表单更新为目标网页表单;
展示模块,被配置为对所述目标网页表单进行展示。
9.一种电子设备,其特征在于,包括处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序,所述计算机程序被所述处理器执行时实现如权利要求1至7中任一项所述的网页表单的处理方法的步骤。
10.一种存储介质,其特征在于,所述存储介质上存储有计算机程序,所述计算机程序被处理器执行时实现如权利要求1至7中任一项所述的网页表单的处理方法的步骤。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010443478.7A CN111782314A (zh) | 2020-05-22 | 2020-05-22 | 网页表单的处理方法、装置、电子设备及存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010443478.7A CN111782314A (zh) | 2020-05-22 | 2020-05-22 | 网页表单的处理方法、装置、电子设备及存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN111782314A true CN111782314A (zh) | 2020-10-16 |
Family
ID=72753640
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202010443478.7A Pending CN111782314A (zh) | 2020-05-22 | 2020-05-22 | 网页表单的处理方法、装置、电子设备及存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN111782314A (zh) |
Cited By (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN112540803A (zh) * | 2020-12-18 | 2021-03-23 | 深圳赛安特技术服务有限公司 | 一种表单设计适配方法、装置、设备及存储介质 |
CN112800370A (zh) * | 2021-01-28 | 2021-05-14 | 金蝶蝶金云计算有限公司 | 业务单据的处理方法、装置、计算机设备和存储介质 |
CN112800724A (zh) * | 2020-12-29 | 2021-05-14 | 杭州涂鸦信息技术有限公司 | 可视化配置模板的可读文件导出方法及相关装置 |
CN113326456A (zh) * | 2021-07-08 | 2021-08-31 | 北京达佳互联信息技术有限公司 | 网页资源获取方法、装置、设备、***及存储介质 |
CN113568693A (zh) * | 2021-07-13 | 2021-10-29 | 杭州每刻科技有限公司 | 表单渲染方法及表单渲染*** |
CN114090103A (zh) * | 2021-01-13 | 2022-02-25 | 北京沃东天骏信息技术有限公司 | 表单生成方法、装置、电子设备和计算机可读介质 |
CN114217795A (zh) * | 2021-12-03 | 2022-03-22 | 北京达佳互联信息技术有限公司 | 页面生成方法、装置、电子设备及可读存储介质 |
CN116501719A (zh) * | 2023-06-21 | 2023-07-28 | 北京长河数智科技有限责任公司 | 基于可视化视图实现的数据建模***及方法 |
Citations (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20080104025A1 (en) * | 2006-10-31 | 2008-05-01 | Gautam Dharamshi | Method and system for efficient execution and rendering of client/server interactive applications |
CN102789484A (zh) * | 2012-06-28 | 2012-11-21 | 奇智软件(北京)有限公司 | 一种网页信息处理方法和装置 |
US20170083482A1 (en) * | 2015-09-23 | 2017-03-23 | Alibaba Group Holding Limited | System, method, and apparatus for webpage processing |
CN108846087A (zh) * | 2018-06-12 | 2018-11-20 | 恒生电子股份有限公司 | 一种页面渲染方法、装置、终端及服务器 |
CN110083613A (zh) * | 2019-03-25 | 2019-08-02 | 东软集团股份有限公司 | 表单数据更新方法、装置、存储介质及电子设备 |
CN110489070A (zh) * | 2019-07-25 | 2019-11-22 | 贝壳技术有限公司 | 一种定制内容的显示处理方法及装置 |
CN110889270A (zh) * | 2018-08-16 | 2020-03-17 | 阿里巴巴集团控股有限公司 | 一种表单页面文档生成方法、表单页面渲染方法及装置 |
CN110990008A (zh) * | 2019-11-28 | 2020-04-10 | 北京三快在线科技有限公司 | 更新页面的方法、装置、存储介质以及电子设备 |
CN111104635A (zh) * | 2019-12-23 | 2020-05-05 | 上海众源网络有限公司 | 一种表格网页的生成方法和装置 |
-
2020
- 2020-05-22 CN CN202010443478.7A patent/CN111782314A/zh active Pending
Patent Citations (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20080104025A1 (en) * | 2006-10-31 | 2008-05-01 | Gautam Dharamshi | Method and system for efficient execution and rendering of client/server interactive applications |
CN102789484A (zh) * | 2012-06-28 | 2012-11-21 | 奇智软件(北京)有限公司 | 一种网页信息处理方法和装置 |
US20170083482A1 (en) * | 2015-09-23 | 2017-03-23 | Alibaba Group Holding Limited | System, method, and apparatus for webpage processing |
CN108846087A (zh) * | 2018-06-12 | 2018-11-20 | 恒生电子股份有限公司 | 一种页面渲染方法、装置、终端及服务器 |
CN110889270A (zh) * | 2018-08-16 | 2020-03-17 | 阿里巴巴集团控股有限公司 | 一种表单页面文档生成方法、表单页面渲染方法及装置 |
CN110083613A (zh) * | 2019-03-25 | 2019-08-02 | 东软集团股份有限公司 | 表单数据更新方法、装置、存储介质及电子设备 |
CN110489070A (zh) * | 2019-07-25 | 2019-11-22 | 贝壳技术有限公司 | 一种定制内容的显示处理方法及装置 |
CN110990008A (zh) * | 2019-11-28 | 2020-04-10 | 北京三快在线科技有限公司 | 更新页面的方法、装置、存储介质以及电子设备 |
CN111104635A (zh) * | 2019-12-23 | 2020-05-05 | 上海众源网络有限公司 | 一种表格网页的生成方法和装置 |
Non-Patent Citations (1)
Title |
---|
千彩-工作室: "微信的四种登陆方式,你是用哪种", pages 1 - 2, Retrieved from the Internet <URL:http://www.360doc.com/content/12/0121/07/51959279_755271899.shtml> * |
Cited By (12)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN112540803A (zh) * | 2020-12-18 | 2021-03-23 | 深圳赛安特技术服务有限公司 | 一种表单设计适配方法、装置、设备及存储介质 |
CN112540803B (zh) * | 2020-12-18 | 2023-08-11 | 深圳赛安特技术服务有限公司 | 一种表单设计适配方法、装置、设备及存储介质 |
CN112800724A (zh) * | 2020-12-29 | 2021-05-14 | 杭州涂鸦信息技术有限公司 | 可视化配置模板的可读文件导出方法及相关装置 |
CN114090103A (zh) * | 2021-01-13 | 2022-02-25 | 北京沃东天骏信息技术有限公司 | 表单生成方法、装置、电子设备和计算机可读介质 |
CN112800370A (zh) * | 2021-01-28 | 2021-05-14 | 金蝶蝶金云计算有限公司 | 业务单据的处理方法、装置、计算机设备和存储介质 |
CN112800370B (zh) * | 2021-01-28 | 2024-04-30 | 金蝶蝶金云计算有限公司 | 业务单据的处理方法、装置、计算机设备和存储介质 |
CN113326456A (zh) * | 2021-07-08 | 2021-08-31 | 北京达佳互联信息技术有限公司 | 网页资源获取方法、装置、设备、***及存储介质 |
CN113568693A (zh) * | 2021-07-13 | 2021-10-29 | 杭州每刻科技有限公司 | 表单渲染方法及表单渲染*** |
CN113568693B (zh) * | 2021-07-13 | 2023-12-08 | 杭州每刻科技有限公司 | 表单渲染方法及表单渲染*** |
CN114217795A (zh) * | 2021-12-03 | 2022-03-22 | 北京达佳互联信息技术有限公司 | 页面生成方法、装置、电子设备及可读存储介质 |
CN116501719A (zh) * | 2023-06-21 | 2023-07-28 | 北京长河数智科技有限责任公司 | 基于可视化视图实现的数据建模***及方法 |
CN116501719B (zh) * | 2023-06-21 | 2023-09-12 | 北京长河数智科技有限责任公司 | 基于可视化视图实现的数据建模***及方法 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN111782314A (zh) | 网页表单的处理方法、装置、电子设备及存储介质 | |
CN107329743B (zh) | 应用页面的展示方法、装置及存储介质 | |
US10909203B2 (en) | Method and device for improving page display effect via execution, conversion and native layers | |
CN106569800B (zh) | 前端界面生成方法及装置 | |
CN111026490B (zh) | 页面渲染方法、装置、电子设备及存储介质 | |
US11210119B2 (en) | Method and device for displaying interface, electronic equipment, server, and storage medium | |
CN105930536B (zh) | 索引建立方法、页面跳转方法及装置 | |
CN109710259B (zh) | 一种数据处理方法、装置及存储介质 | |
CN110516218A (zh) | 表格的生成方法、终端和计算机可读存储介质 | |
CN114064024A (zh) | 微应用的开发方法、装置、设备、存储介质及程序产品 | |
CN111752598A (zh) | 页面生成方法、装置、电子设备及存储介质 | |
CN110971974B (zh) | 配置参数创建方法、装置、终端及存储介质 | |
CN115729534A (zh) | 低代码页面的创建方法、展示方法、装置、设备及介质 | |
CN104951445B (zh) | 一种网页处理方法及装置 | |
US11210449B2 (en) | Page display method and device and storage medium | |
CN113419898A (zh) | 文件的回捞方法、装置、设备、存储介质及程序产品 | |
CN112256445A (zh) | 基于应用程序的数据处理方法、装置、设备及存储介质 | |
CN110928854A (zh) | 数据导入方法、装置及电子设备 | |
CN111079040A (zh) | 资源嗅探方法、装置、终端、服务器及存储介质 | |
CN111008050A (zh) | 页面任务执行方法、装置、终端及存储介质 | |
CN111046265A (zh) | 卡片数据显示方法、装置、设备及存储介质 | |
CN113467663B (zh) | 界面配置方法、装置、计算机设备及介质 | |
CN113282954B (zh) | 基于业务平台的业务执行方法及装置 | |
CN115329181A (zh) | 一种信息查询方法、查询服务端及客户端 | |
CN114428737A (zh) | 基于微服务体系的通信方法、装置、设备及存储介质 |
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 |