CN110647709A

CN110647709A - 一种表单构建方法、装置和存储介质

Info

Publication number: CN110647709A
Application number: CN201910867203.3A
Authority: CN
Inventors: 殷勇
Original assignee: Beijing Dajia Internet Information Technology Co Ltd
Current assignee: Beijing Dajia Internet Information Technology Co Ltd
Priority date: 2019-09-12
Filing date: 2019-09-12
Publication date: 2020-01-03
Anticipated expiration: 2039-09-12
Also published as: CN110647709B

Abstract

本公开提供一种表单构建方法、装置和存储介质，用以解决无法描述表单项内的用户交互行为响应动作的问题。该方法中，在接收到业务层发送的包括Vuex模块的路径的传入参数后，在监听到Vue组件发送的事件为指定事件后，获取指定事件对应的事件标识；根据预设的事件标识与Vuex事件的对应关系，将获取的事件标识对应的Vuex事件发送给路径对应的Vuex模块，在Vuex模块执行业务逻辑后，将Vuex模块的数据发送给视觉组件进行表单项重构。这样，能够监听对象在表单项中触发的事件，并将事件与Vuex事件相对应发送给Vuex模块，从而使得Vuex模块能够根据对象触发的事件执行业务逻辑，实现对对象针对表单项的操作的响应。

Description

一种表单构建方法、装置和存储介质

技术领域

本申请涉及计算机技术领域，尤其涉及一种表单构建方法、装置和存储介质。

背景技术

随着互联网技术的飞速演进以及桌面、手持硬件设备性能的持续提升，在B/S(Browser/Sever，浏览器/服务器)形式的业务模型中，业界对互联网web前端应用程序所能承载的业务体量和提供的用户交互体验有了越来越高的期望。VUE框架以及其低廉的入门成本、卓越的运行时效和丰富的周边工具，迅速提高市场占有率，成为了海量业务的首选技术方案。

在高度复杂的Web前端业务中，状态变量和数据量极速增长，具有多层次结构的Vuex被用来实现Web应用程序中的复杂海量数据的优化管理。其提供的模块(module)功能可以用来封装聚合关联的数据状态，将整个应用程序的数据划分为相对解耦的多个数据集合，也可以与视图组件相互映射，实现更丰富的业务模块化，优化代码的可复用性。

表单作为web领域最常见的用户信息录入方式，一般拥有较高的交互设计复用率，因此对代码的复用性要求更高，包括视图组件和逻辑功能，比如表单校验、表单联动等等。

而相关技术中，是通过纯对象数据来描述表单项。这样的表单项描述方法，无法描述表单项内的用户交互行为响应动作，以及无法动态切换校验行为集合。

发明内容

本公开提供一种表单构建方法、装置和存储介质，以至少解决相关技术中无法描述表单项内的用户交互行为响应动作，以及无法动态切换校验行为集合的问题。本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种表单构建方法，包括：

在接收到业务层发送的包括Vuex模块的路径的传入参数后，监听Vue组件发送的事件；

在监听到所述Vue组件发送的事件为指定事件后，获取所述指定事件对应的事件标识；

根据预设的事件标识与Vuex事件的对应关系，将获取的所述事件标识对应的Vuex事件发送给所述路径对应的Vuex模块，以触发所述Vuex模块执行业务逻辑；

在所述Vuex模块执行业务逻辑后，将所述Vuex模块的数据发送给视觉组件进行表单项重构。

上述方法，能够监听对象在表单项中触发的事件，并将事件与Vuex事件相对应发送给Vuex模块，从而使得Vuex模块能够根据对象触发的事件执行业务逻辑，实现对对象针对表单项的操作的响应。

可选的，通过下列方式判断监听到的所述Vue组件发送的事件是否是指定事件：

若监听到的所述Vue组件发送的事件包含预设标识，则确定所述事件是指定事件。

上述方法，使得能够监听Vue组件派发的任意事件，无需在开发时枚举需要监听的所有事件，即使是需要增加需要监听的新事件，也只需要在Vue组件中预设的感兴趣事件中添加即可，提高了开发效率，有利于代码的维护。

可选的，所述指定事件的事件标识为所述事件包含的原始事件名称。

上述方法，使得能够根据原始事件名称，获取对应的Vuex事件，并发送给Vuex模块，以使Vuex模块执行业务逻辑，实现响应用户在表单项触发的事件的目的。

可选的，将所述Vuex模块的数据发送给视觉组件进行表单项重构，包括：

获取所述Vuex模块的计算状态参数getters和状态参数state；

将所述getters和state合并后发送给所述Vuex模块对应的视觉组件。

上述方法，由于一个Vuex模块仅对应一个视觉组件实例，将同一Vuex模块的getters和state合并后，发送给视觉组件实例，能够实现视觉组件的复用，即一个Vuex模块对应于一个视觉组件。

可选的，获取所述Vuex模块的getters包括：

遍历全部Vuex模块的getters；

从遍历到的getters中，获取与所述路径匹配的getters。

上述方法，通过获取与传入参数的路径匹配的getters，能够将同一Vuex模块的getters和state合并，发送给视觉组件实例，从而实现视觉组件的复用。

根据本公开实施例的第二方面，提供另一种表单构建方法，包括：

监听对象在已构建的表单项触发的事件；

若监听到对象在已构建的表单项触发的事件为预设的感兴趣事件后在所述事件中加入预设标识，以使表单构建装置根据预设的事件标识与Vuex事件的对应关系，将获取到的指定事件的事件标识对应的Vuex事件发送给Vuex模块以触发所述Vuex模块执行业务逻辑，并将执行业务逻辑后的所述Vuex模块的数据发送给视觉组件进行表单项重构。

根据本公开实施例的第三方面，提供一种表单构建装置，包括：

监听单元，被配置为执行在接收到业务层发送的包括Vuex模块的路径的传入参数后，监听Vue组件发送的事件；

获取单元，被配置为执行在监听到所述Vue组件发送的事件为指定事件后，获取所述指定事件对应的事件标识；

发送单元，被配置为执行根据预设的事件标识与Vuex事件的对应关系，将获取的所述事件标识对应的Vuex事件发送给所述路径对应的Vuex模块，以触发所述Vuex模块执行业务逻辑；

所述发送单元还被配置为执行，在所述Vuex模块执行业务逻辑后，将所述Vuex模块的数据发送给视觉组件进行表单项重构。

可选的，所述装置还包括：

判断单元，被配置为执行通过下列方式判断监听到的所述Vue组件发送的事件是否是指定事件；

所述判断单元，被配置为执行若监听到的所述Vue组件发送的事件包含预设标识，则确定所述事件是指定事件。

可选的，所述获取单元还被配置为执行：获取所述Vuex模块的计算状态参数getters和状态参数state；

所述发送单元还被配置为执行，将所述getters和state合并后发送给所述Vuex模块对应的视觉组件。

可选的，所述获取单元还被配置为执行：

遍历全部Vuex模块的getters；

从遍历到的getters中，获取与所述路径匹配的getters。

根据本公开实施例的第四方面，提供另一种表单构建装置，包括：

第二监听单元，被配置为执行监听对象在已构建的表单项触发的事件；

添加单元，被配置为执行若监听到对象在已构建的表单项触发的事件为预设的感兴趣事件后在所述事件中加入预设标识，以使表单构建装置根据预设的事件标识与Vuex事件的对应关系，将获取到的指定事件的事件标识对应的Vuex事件发送给Vuex模块以触发所述Vuex模块执行业务逻辑，并将执行业务逻辑后的所述Vuex模块的数据发送给视觉组件进行表单项重构。

根据本公开实施例的第五方面，提供一种电子设备，包括至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行：

可选的，所述处理器通过下列方式判断监听到的所述Vue组件发送的事件是否是指定事件：

可选的，所述处理器还用于执行：

获取所述Vuex模块的计算状态参数getters和状态参数state；

可选的，所述处理器还用于执行：

遍历全部Vuex模块的getters；

从遍历到的getters中，获取与所述路径匹配的getters。

根据本公开实施例的第六方面，提供；另一种电子设备，包括至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行：

监听对象在已构建的表单项触发的事件；

根据本公开的第七方面，提供一种存储介质，其中，所述存储介质存储有计算机可执行指令，所述计算机可执行指令用于使计算机执行本申请实施例中的任一表单构建方法。

根据本公开实施例的第八方面，提供一种程序产品，其包括程序代码，当所述程序产品在计算机设备上运行时，所述程序代码用于使所述计算机设备执行本公开实施例中的任一表单构建方法。

另外，第二方面至第八方面中任一种实现方式所带来的技术效果可参见第一方面中不同实现方式所带来的技术效果，此处不再赘述。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

本申请的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本申请而了解。本申请的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例中所需要使用的附图作简单地介绍，显而易见地，下面所介绍的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本公开一示例性实施例中一种表单构建方法的应用场景示意图之一；

图2为本公开一示例性实施例中一种表单构建系统；

图3为本公开一示例性实施例中一种表单构建方法的应用场景示意图之一；

图4为本公开一示例性实施例中一种表单构建方法的应用场景示意图之一；

图5为本公开一示例性实施例中一种表单构建方法的应用场景示意图之一；

图6为本公开一示例性实施例中一种表单构建方法的流程图之一；

图7为本公开一示例性实施例中一种表单构建方法的流程图之一；

图8为本公开一示例性实施例中一种表单构建方法的流程图之一；

图9为本公开一示例性实施例中一种表单构建装置的示意图之一；

图10为本公开一示例性实施例中一种表单构建装置的示意图之一；

图11为本公开一示例性实施例中一种电子设备的结构图之一；

图12为本公开一示例性实施例中一种电子设备的结构图之一。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。

相关技术中，是通过纯对象数据来描述表单项。这样的表单项描述方法，无法描述表单项内的用户交互行为响应动作，导致无法动态切换校验行为集合，以及表单项的组件的复用性较低。

有鉴于此，本公开提供一种表单构建方法。该方法中，Vue组件监听到对象在已构建的表单项触发的事件，并为监听到的事件中预设的感兴趣事件中加入预设标识，之后Vue组件将具有预设标识的事件派发至上层组件。业务层在监听到对象在已构建的表单项触发的事件后，会向表单构建装置发送包括Vuex模块的路径的传入参数。此时，表单构建装置监听Vue组件发送的事件，并监听到所述Vue组件发送的事件为指定事件后，获取指定事件对应的事件标识。并在预设的事件标识与Vuex事件的对应关系中，查找事件标识对应的Vuex时间，并将该Vuex时间发送给传入参数中的Vuex模块的路径对应的Vuex模块。从而触发该Vuex模块执行业务逻辑。之后，表单构建装置将Vuex模块的数据发送给视觉组件进行表单重构。

参阅图1，为本公开一示例性实施例中一种表单构建方法的应用场景示意图。该场景包括：用户10的终端100、表单构建装置101、Vuex模块102、Vue组件103、视觉组件104。

具体的，用户10在终端100中已构建的表单项中触发事件。表单构建装置101在接收到业务层发送的包括Vuex模块的路径的传入参数后，监听Vue组件发送的事件；并在监听到所述Vue组件发送的事件为指定事件后，获取所述指定事件对应的事件标识。以及，根据预设的事件标识与Vuex事件的对应关系，将获取的所述事件标识对应的Vuex事件发送给所述路径对应的Vuex模块102。Vuex模块102执行业务逻辑。表单构建装置101在所述Vuex模块执行业务逻辑后，将所述Vuex模块的数据发送给视觉组件104，则视觉组件104在终端100进行表单项重构。

其中，终端，是一种具有无线通信功能的设备，可以部署在陆地上，包括室内或室外、手持或车载。所述终端可以是手机(Mobile Phone)、平板电脑(Pad)、带无线收发功能的电脑；还可以是各种形式的UE，移动台(Mobile Station，MS)，终端(Terminal Device)。

参阅图2，为本公开一示例性实施例中一种表单构建系统。该系统包括：表单构建装置200、Vuex模块201、视觉组件202、Vue组件203(图中Vue组件在表单构建装置200内部，并不代表Vue组件是表单构建装置的一个单元)；其中，表单构建装置200包括表单项组件映射单元2001，通用事件捕获补丁2002以及module数据提供器2003。

在用户访问浏览器时，需要构建初始表单项。此时，module数据提供器2003获取构建初始表单项所需的全部Vuex模块的数据，其中，每个Vuex模块的数据对应多个视觉组件202。实施时，数据与视觉组件202的对应关系是预先设置的。module数据提供器2003将获取到的数据发送给各数据分别对应的视觉组件202，以使视觉组件202构建初始的表单项。

Vue组件203监听用户在已构建的表单项中触发的事件，并在监听到的事件为预设的感兴趣事件时，在该事件中加入预设标识。

例如，用户在国家的表单项中输入参数，假设输入的参数为+86，则浏览器的HTML(Hyper Text Markup Language，超文本标记语言)层监听到该输入事件，并将该输入发送给Vue组件203。Vue组件203确定该事件为预设的感兴趣事件后，在该事件中加入预设标识，并进行事件派发。

用户在表单项中输入参数后，业务层会向表单项组件映射单元2001发送包括Vuex模块的路径的传入参数，则表单项组件映射单元2001调用通用事件捕获补丁2002监听Vue组件派发的事件中指定事件。通用事件捕获补丁2002获取该指定事件的事件标识，并在预设的事件标识与Vuex事件(Vuex actions)的对应关系中确定该事件标识对应的Vuexactions。通用事件捕获补丁2002将确定的Vuex actions发送给传入参数中的路径对应的Vuex模块，以使该Vuex模块执行业务逻辑。

实施时，可以在通用事件捕获补丁2002中，枚举所有需要监听的事件，例如“click事件，input事件”等。则事件标识可以是事件名称，例如可以是点击click，预设的事件标识与Vuex事件的对应关系，则可以是click:On click等，或者是click:click等。需要说明的是，Vuex事件即能够驱动Vuex模块的Vuex actions，可以自行设置，本公开不做具体限定。

例如，业务层发送的传入参数包括路径a/b/c，此时通用事件捕获补丁2002监听指定事件，根据指定事件的事件标识获取对应的Vuex actions，将获取到的Vuex actions发送给a/b/c/对应的Vuex模块。

Vuex模块在接收到Vuex actions后，可以从业务层获取用户触发的事件的参数，例如用户触发的事件为点击时，从业务层获取用户点击的位置等参数。并根据事件的参数执行业务逻辑。

module数据提供器2003在Vuex模块执行业务逻辑后，获取该Vuex模块的数据，并将数据分别发送给对应的视觉组件202，以使视觉组件202重新构建表单。

例如，用户输入的参数为+86(或中国)时，对表单中手机号对应的表单项的校验规则为11位。所以，Vuex模块需要根据用户输入的参数+86(或中国)执行业务逻辑，例如执行的业务逻辑可以是，在手机号对应的表单项中显示“请输入11位手机号”，则视觉组件202根据module数据提供器发送的数据，在表单项中显示“请输入11位手机号”。

又例如，在用户输入的参数为+001(或美国)时，Vuex模块需要根据用户输入的参数+86(或中国)执行业务逻辑，例如执行的业务逻辑可以是，在手机号对应的表单项中显示“请输入10位手机号”，则视觉组件202根据module数据提供器发送的数据，在表单项中显示“请输入10位手机号”。

上述系统，能够根据用户在表单项中触发的事件与Vuex模块的事件相对应，使得Vuex模块执行业务逻辑，并触发重构表单项，响应于用户在表单项触发的事件。另外，也能够根据用户在表单项触发的事件，动态的调整校验规则，对表单项进行校验。所以，实现了根据用户触发的事件动态调整表单项校验规则的目的。

相关技术中，通用事件捕获补丁2002在监听事件时，仅能监听指定名称的事件名称。故此，在开发时，需要枚举需要监听的所有事件。若添加需要监听的事件时，需要重新开发，也即需要重写代码，浪费人力资源且不利于代码的维护。

在一个可能的实施例中，Vue组件在派发事件时，可以基于原型对象中的$emit方法，并额外派发一个名称为指定名称的事件。具体的运作原理如下：

如上述原理所示，需要保留原始的$emit事件派发方法，之后用新的函数替代。在这个新的$emit函数中，除了需要调用原始$emit保证正常事件派发之外，还额外派发了一个名称为预设标识(*)的事件，并携带了真正的事件名称和事件对象。

故此，通用事件捕获补丁2002可以只监听名称为预设标识的指定事件。实施时，预设标识可以自行设置，例如可以设置为上述实施例中的‘*’，或者还可以设置为‘#’等，本公开不做具体限定。

则通用事件捕获补丁2002在监听到指定事件后，需要获取该指定事件的事件标识，例如可以是该事件的原始事件名称。

例如，Vue组件被定义为进行事件派发时额外派发名称为“*”的事件，通用事件捕获补丁被定义为能够监听名称为“*”的事件。假设，Vue组件监听到用户触发的事件为“click”，则在进行事件派发时，Vue组件在“click”事件中添加预设标识“*”。通用事件捕获补丁能够监听到Vue组件派发的任意事件。并且能够在监听到的事件中获取原始事件名称为“click”，以及根据事件标识与Vuex actions的对应关系，获取“click”对应的Vuexactions。

相关技术中，Vuex模块的数据可以包括state数据，以及基于state定义的getters。state和getters都可以无差别地用于视觉组件构建表单项。而相关技术中，将Vuex模块的state和getters都分别定义了对应的视觉组件。例如，一Vuex模块的state对应于视觉组件1，getters对应于视觉组件2，然而同一Vuex模块仅对应于一个视觉组件实例，例如下拉框或输入框等，也即视觉组件1和视觉组件2是相同的视觉组件实例。所以，相关技术中视觉组件构建表单项的方法，存在着视觉组件无法复用，浪费资源的问题。

在一个可能的实施方式中，Vuex模块的数据中，会有特定字段，称之为“componentID”用于唯一标识该Vuex模块对应的预定义的视觉组件。则，本公开一示例性实施例中，在构建表单项时，module数据提供器获取Vuex模块的getters和state后，并将属于相同的Vuex模块的getters和state合并后，发送给该Vuex模块对应的视觉组件。

实施时，Vue组件中，有一个特殊的内置组件，称之为“component”，通过指定该内置组件的“is”属性，能够将该内置组件转化为对应的组件。则，将Vuex模块中的“componentID”设置为“is”属性，则能够调用“component”内置组件进行表单项的渲染。

实施时，需要预先设置视觉组件标识与视觉组件实例的对应关系，例如下表所示：

表一：

视觉组件标识	视觉组件实例
		1	下拉框
2	输入框
		3	按键

同样的，可以维护componentID与视觉组件标识的对应关系，如表二所示：

表二：

module数据提供器在获取一个Vuex模块的getters和state，并将getters和state合并后，可以根据表二的对应关系，将合并后的getters和state发送给视觉组件标识所对应的视觉组件。视觉组件则可以根据表一的对应关系，渲染表单项。

例如，在用户访问浏览器时需要构建原始的表单项，module数据提供器获取构建表单项所需要的全部Vuex模块的getters和state，并将属于同一Vuex模块的getters和state合并后，发送给各Vuex模块对应的视觉组件，以使视觉组件构建原始的表单项。

又例如，在Vuex模块根据Vuex actions执行相应的业务逻辑后，module数据提供器获取该Vuex模块的getters和state，并将获取到的getters和state合并后，发送给该Vuex模块对应的视觉组件，以使视觉组件重构表单项。

module数据提供器在获取Vuex模块的getters和state时，由表单项组件映射单元将传入参数中的Vuex模块的路径发送给module数据提供器。module数据提供器则可以根据该路径，获取该路径对应的state。而getters在存储时，是将表单项中全部Vuex模块的getters存储在同一位置。所以，在获取指定路径下的getters时，需要遍历全部Vuex模块的getters，并在遍历到的getters中，获取与传入参数中的路径匹配的getters。

例如，全部Vuex模块的getters如下表所示：

表三：

a/b/c/d
	a/b/c/e/f
a/b/g
	a/b/c/h

若传入参数中的路径为[a/b/c/computed]，则上表中该路径对应的getters为d和h。

本公开提供的一种表单构建方法中，通过“表单项组件映射单元”使得表单项的视觉组件和对应的Vuex模块具备了高度的内聚性，数据的流动和行为的流动都被封装在表单项组件映射单元内部，在具有众多表单项的表单业务中，这种内聚性有益于各个单元的独立维护。同时，由于Vuex模块具备嵌套能力，只要在表单向中，递归调用“表单项组件映射单元”，即可实现表单项视觉组件的嵌套，满足多种场景的表单项的构建。

参阅图3，为本公开一示例性实施例中一种表单项构建方法的应用场景示意图。该表单中体现了三层的嵌套关系，该表单的原理如下：

如图3中的a图所示的表单中，最外层module包括了动态的子module，即sub1和sub2，并可以通过“onAdd”action允许新增子module。每一个子module成员，都包含了两个元素，一个是下拉框(select)，一个是文本输入(input)。

即，用户可以通过点击“+”，实现新增子module。例如，用户点击“+”，则能够重构表单项如图3中的b图所示。

下面通过实施例对本公开提供的技术方案做进一步解释：

实施例一：

参阅图4，为本公开一示例性实施例中一种表单构建方法的应用场景示意图。

module数据提供器获取构建原始的表单项的全部Vuex模块的数据，并发送给各Vuex模块对应的视觉组件。视觉组件构建原始的表单项，如图4中的a图所示。

用户在证件类型的表单项中下拉选择证件类型为“居民身份证”，则HTML层将用户触发的该事件发送给Vue组件，并且业务层将包含表单项“证件类型”的Vuex模块的路径的传入参数发送给表单项组件映射单元。Vue组件确定该事件为预设的感兴趣事件，并在该事件中加入预设标识后进行事件派发。

表单项组件映射单元调用通用事件捕获补丁监听Vue组件派发的事件，并获取监听到的事件的事件标识。通用事件捕获补丁根据获取的事件标识确定对应的Vuexactions，并发送给“证件类型”对应的Vuex模块。Vuex模块执行相应的业务逻辑，例如，在“证件号码”对应的表单项中显示“身份证号码”，并且确定应输入身份证号码对应的表单项的校验规则为18位。

Module数据提供器获取该Vuex模块的getters和state，并将getters和state进行合并发送给该Vuex模块对应的视觉组件，重构表单项如图4中的b图所示。

实施例二：

结合上述实施例一，用户在应输入身份证号码的表单项中输入如图5中的a图所示的数字。同样的，业务层将该表单项对应的Vuex模块的路径发送给表单项组件映射单元，HTML层将用户输入的数字发送给Vue组件。Vue组件在派发事件时，添加预设标识“*”，通用事件捕获补丁则能够监听到Vue组件派发的事件。

通用事件捕获补丁确定该事件对应的Vuex actions，并将确定的Vuex actions发送给该表单项对应的Vuex模块。Vuex模块执行业务逻辑，根据该表单项的校验规则对用户触发的事件进行校验，由于用户输入的数字小于18位，则校验结果为输入错误。module数据提供器获取该Vuex模块的数据，并发送给对应的视图组件，重构表单项如图5中的b图所示。

实施例三：

参阅图6，为本公开一示例性实施例中一种表单构建方法的流程图，可以包括以下步骤：

步骤601：表单构建装置将构建原始的表单项的全部Vuex模块的数据，发送给视觉组件。

步骤602：视觉组件构建原始的表单项。

步骤603：Vue组件若监听到对象在已构建的表单项触发的事件，且所述事件为预设的感兴趣事件后在所述事件中加入预设标识。

步骤604：表单构建装置接收到业务层发送的包括Vuex模块的路径的传入参数。

实施时，步骤603和步骤604的执行顺序不限定于此，还可以先执行步骤603再执行步骤604，或者还可以同时执行步骤603和步骤604。

步骤605：表单构建装置监听Vue组件发送的事件。

步骤606：表单构建装置在监听到所述Vue组件发送的事件为指定事件后，获取所述指定事件对应的事件标识。

步骤607：表单构建装置根据预设的事件标识与Vuex事件的对应关系，将获取的所述事件标识对应的Vuex事件发送给所述路径对应的Vuex模块。

步骤608：Vuex模块执行业务逻辑。

步骤609：表单构建装置将所述Vuex模块的数据发送给视觉组件。

步骤610：视觉组件进行表单项重构。

基于相同的发明构思，本公开提供一种表单构建方法。参阅图7，为本公开一示例性实施例中一种表单构建方法的流程图，可以包括以下步骤：

步骤701：在接收到业务层发送的包括Vuex模块的路径的传入参数后，监听Vue组件发送的事件。

步骤702：在监听到所述Vue组件发送的事件为指定事件后，获取所述指定事件对应的事件标识。

步骤703：根据预设的事件标识与Vuex事件的对应关系，将获取的所述事件标识对应的Vuex事件发送给所述路径对应的Vuex模块，以触发所述Vuex模块执行业务逻辑。

步骤704：在所述Vuex模块执行业务逻辑后，将所述Vuex模块的数据发送给视觉组件进行表单项重构。

获取所述Vuex模块的计算状态参数getters和状态参数state；

可选的，获取所述Vuex模块的getters包括：

遍历全部Vuex模块的getters；

从遍历到的getters中，获取与所述路径匹配的getters。

基于相同的发明构思，本公开一示例性实施例中提供另一种表单构建方法。如图8所示，为本公开一示例性实施例中一种表单构建方法的流程图，可以包括以下步骤：

步骤801：监听对象在已构建的表单项触发的事件。

步骤802：若监听到对象在已构建的表单项触发的事件为预设的感兴趣事件后在所述事件中加入预设标识，以使表单构建装置根据预设的事件标识与Vuex事件的对应关系，将获取到的指定事件的事件标识对应的Vuex事件发送给Vuex模块以触发所述Vuex模块执行业务逻辑，并将执行业务逻辑后的所述Vuex模块的数据发送给视觉组件进行表单项重构。

基于相同的发明构思，本公开提供一种表单构建装置。参阅图9，为本公开一示例性实施例中一种表单构建装置的示意图，包括：

监听单元901，被配置为执行在接收到业务层发送的包括Vuex模块的路径的传入参数后，监听Vue组件发送的事件；

获取单元902，被配置为执行在监听到所述Vue组件发送的事件为指定事件后，获取所述指定事件对应的事件标识；

发送单元903，被配置为执行根据预设的事件标识与Vuex事件的对应关系，将获取的所述事件标识对应的Vuex事件发送给所述路径对应的Vuex模块，以触发所述Vuex模块执行业务逻辑；

所述发送单元903还被配置为执行，在所述Vuex模块执行业务逻辑后，将所述Vuex模块的数据发送给视觉组件进行表单项重构。

可选的，所述装置还包括：

可选的，所述获取单元902还被配置为执行：获取所述Vuex模块的计算状态参数getters和状态参数state；

所述发送单元903还被配置为执行，将所述getters和state合并后发送给所述Vuex模块对应的视觉组件。

可选的，所述获取单元902还被配置为执行：

遍历全部Vuex模块的getters；

从遍历到的getters中，获取与所述路径匹配的getters。

基于相同的发明构思，本公开还提供另一种表单构建装置。参阅图10，为本公开一示例性实施例中一种表单构建装置的示意图，包括：

第二监听单元1001，被配置为执行监听对象在已构建的表单项触发的时间；

添加单元1002，被配置为执行若监听到对象在已构建的表单项触发的事件，且所述事件为预设的感兴趣事件后在所述事件中加入预设标识，以使表单构建装置根据预设的事件标识与Vuex事件的对应关系，将获取到的指定事件的事件标识对应的Vuex事件发送给Vuex模块以触发所述Vuex模块执行业务逻辑，并将执行业务逻辑后的所述Vuex模块的数据发送给视觉组件进行表单项重构。

基于相同的发明构思，本公开还提供一种电子设备110。如图11所示，该电子设备可以包括存储器1101和处理器1102。

所述存储器1101，用于存储处理器1102执行的计算机程序。存储器1101可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据终端设备信息处理装置的使用所创建的数据等。处理器1102，可以是一个中央处理单元(central processing unit，CPU)，或者为数字处理单元等等。本公开实施例中不限定上述存储器1101和处理器1102之间的具体连接介质。本公开实施例在图11中以存储器1101和处理器1102之间通过总线1103连接，总线1103在图11中以粗线表示，其它部件之间的连接方式，仅是进行示意性说明，并不引以为限。所述总线1103可以分为地址总线、数据总线、控制总线等。为便于表示，图11中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

存储器1101可以是易失性存储器(volatile memory)，例如随机存取存储器(random-access memory，RAM)；存储器1101也可以是非易失性存储器(non-volatilememory)，例如只读存储器，快闪存储器(flash memory)，硬盘(hard disk drive，HDD)或固态硬盘(solid-state drive，SSD)、或者存储器1101是能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。存储器1101可以是上述存储器的组合。

处理器1102，用于调用所述存储器1101中存储的计算机程序时执行：

可选的，所述处理器1102通过下列方式判断监听到的所述Vue组件发送的事件是否是指定事件：

可选的，所述处理器1102具体用于执行：

获取所述Vuex模块的计算状态参数getters和状态参数state；

可选的，所述处理器1102具体用于执行：

遍历全部Vuex模块的getters；

从遍历到的getters中，获取与所述路径匹配的getters。

基于相同的发明构思，本公开还提供另一种电子设备。如图12所示，该电子设备包括：存储器1201和处理器1202。

所述存储器1201，用于存储处理器1202执行的计算机程序。存储器1201可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据终端设备信息处理装置的使用所创建的数据等。处理器1202，可以是一个中央处理单元(central processing unit，CPU)，或者为数字处理单元等等。本公开实施例中不限定上述存储器1201和处理器1202之间的具体连接介质。本公开实施例在图12中以存储器1201和处理器1202之间通过总线1203连接，总线1203在图12中以粗线表示，其它部件之间的连接方式，仅是进行示意性说明，并不引以为限。所述总线1203可以分为地址总线、数据总线、控制总线等。为便于表示，图12中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

存储器1201可以是易失性存储器(volatile memory)，例如随机存取存储器(random-access memory，RAM)；存储器1201也可以是非易失性存储器(non-volatilememory)，例如只读存储器，快闪存储器(flash memory)，硬盘(hard disk drive，HDD)或固态硬盘(solid-state drive，SSD)、或者存储器1201是能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。存储器1201可以是上述存储器的组合。

处理器1202，用于调用所述存储器1201中存储的计算机程序时执行：

监听对象在已构建的表单项触发的事件；

在一些可能的实施方式中，本公开提供的方法的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在计算机设备上运行时，所述程序代码用于使所述计算机设备执行本说明书上述描述的根据本公开各种示例性实施方式的方法中的步骤，例如，所述计算机设备可以执行如图6中所示的实施例中设备所执行的方法或者如图7中所示的实施例中设备所执行的方法或者如图8中所示的实施例中设备所执行的方法。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims

1.一种表单构建方法，其特征在于，所述方法包括：

2.根据权利要求1所述的方法，其特征在于，通过下列方式判断监听到的所述Vue组件发送的事件是否是指定事件：

3.根据权利要求2所述的方法，其特征在于，所述指定事件的事件标识为所述事件包含的原始事件名称。

4.根据权利要求1所述的方法，其特征在于，将所述Vuex模块的数据发送给视觉组件进行表单项重构，包括：

获取所述Vuex模块的计算状态参数getters和状态参数state；

5.根据权利要求4所述的方法，其特征在于，获取所述Vuex模块的getters包括：

遍历全部Vuex模块的getters；

从遍历到的getters中，获取与所述路径匹配的getters。

6.一种表单构建方法，其特征在于，所述方法包括：

监听对象在已构建的表单项触发的事件；

7.一种表单构建装置，其特征在于，包括：

8.一种表单构建装置，其特征在于，所述装置包括：

9.一种电子设备，其特征在于，包括：

处理器；

用于存储所述处理器可执行指令的存储器；其中，所述处理器被配置为执行所述指令，以实现如权利要求1-5中任一所述的表单构建方法或者如权利要求6所述的表单构建方法。

10.一种存储介质，其特征在于，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如权利要求1-5中任一所述的表单构建方法或者如权利要求6所述的表单构建方法。