表单项处理方法、装置、电子设备及存储介质

技术领域

本申请涉及计算机应用技术领域，尤其涉及一种表单项处理方法、装置、电子设备及存储介质。

背景技术

在网页的数据采集等应用场景中，会使用表单，表单可以包括一个或多个表单项，如文本框(text)、密码输入框(password)、提交按钮(submit)等。通过解析表单渲染协议文件可以渲染表单，用户可以在渲染后的表单项中输入相应信息。

目前，对于已经渲染完成的表单，只能通过修改表单渲染协议文件才能达到修改表单项的目的。即需要重复进行修改、渲染等操作，需要耗费较多人力成本和时间成本。

发明内容

本申请实施例提供一种表单项处理方法、装置、电子设备及存储介质，以快速对表单项进行处理，节省人力成本和时间成本。

为解决上述技术问题，本申请提供如下技术方案：

第一方面，提供一种表单项处理方法，包括：

响应于针对表单渲染协议文件的渲染请求，基于所述表单渲染协议文件，在用户界面渲染表单，所述表单包括一个或多个表单项，每个表单项分别置于一个表单容器中；

响应于针对所述用户界面的第一表单项的操作请求，通过操作所述第一表单项所在的第一表单容器操作相应的表单项。

可选地，在所述通过操作所述第一表单项所在的第一表单容器操作相应的表单项之后，还包括：

确定所述用户界面中各表单项之间的层级关系；

根据所述层级关系，更新所述表单渲染协议文件。

可选地，在所述更新所述表单渲染协议文件之后，还包括：

将更新后的表单渲染协议文件保存在数据库中；

在接收到新的渲染请求时，基于所述数据库中所述更新后的表单渲染协议文件，在所述用户界面渲染表单。

可选地，所述表单渲染协议文件中每个表单项所在表单容器为节点树上的一个节点，确定所述用户界面中各表单项之间的层级关系，包括：

根据所述节点树，确定所述用户界面中各表单项之间的层级关系。

可选地，所述响应于针对所述用户界面的第一表单项的操作请求，通过操作所述第一表单项所在的第一表单容器操作相应的表单项，包括：

在接收到针对所述用户界面的第一表单项的操作请求的情况下，基于所述节点树，确定所述第一表单项对应的容器组合，所述容器组合包括所述第一表单项所在的第一表单容器以及所述第一表单容器的子节点对应的表单容器；

响应于所述操作请求，通过操作所述第一表单容器操作所述容器组合对应的表单项。

可选地，在所述基于所述表单渲染协议文件，在用户界面渲染表单之后，还包括：

基于针对所述用户界面的第二表单项的输入信息，获得表单结果；

将所述表单结果保存在数据库中。

可选地，所述操作请求包括拖拽请求、删除请求、添加请求中的一种。

第二方面，提供一种表单项处理装置，包括：

渲染单元，用于响应于针对表单渲染协议文件的渲染请求，基于所述表单渲染协议文件，在用户界面渲染表单，所述表单包括一个或多个表单项，每个表单项分别置于一个表单容器中；

操作单元，用于响应于针对所述用户界面的第一表单项的操作请求，通过操作所述第一表单项所在的第一表单容器操作相应的表单项。

第三方面，提供一种电子设备，包括：处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如第一方面所述的表单项处理方法的步骤。

第四方面，提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如第一方面所述的表单项处理方法的步骤。

第五方面，提供一种计算机程序产品，所述计算机程序产品包括计算机指令，所述计算机指令存储在计算机可读存储介质中，且适于由处理器读取并执行，以使得具有所述处理器的电子设备执行如第一方面所述的表单项处理方法的步骤。

应用本申请实施例所提供的技术方案，响应于针对表单渲染协议文件的渲染请求，基于该表单渲染协议文件，在用户界面渲染表单，该表单包括一个或多个表单项，每个表单项分别置于一个表单容器中，响应于针对用户界面的第一表单项的操作请求，通过操作第一表单项所在的第一表单容器操作相应的表单项，通过表单容器可以实现在用户界面对表单项的快速处理，不需要先去修改表单渲染协议文件，可以节省人力成本和时间成本。

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

附图说明

图1为本申请实施例中表单项处理方法的一种实施流程图；

图2为本申请实施例中表单容器的一种结构示意图；

图3为本申请实施例中表单项处理方法的另一种实施流程图；

图4为本申请实施例中一种表单项处理装置的结构示意图；

图5为本申请实施例中一种电子设备的结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

本申请的核心是提供一种表单项处理方法，该方法可以应用于数据采集等场景中。比如，要进行数据采集，可以先编写一个表单渲染协议文件，然后基于该表单渲染协议文件在用户界面渲染表单，表单包括的每个表单项分别置于一个表单容器中，在用户界面可以通过操作表单容器对相应的表单项进行操作，之后用户可以在表单项中输入相应信息，完成数据采集。通过表单容器可以实现在用户界面对表单项的快速处理，不需要先去修改表单渲染协议文件，可以节省人力成本和时间成本。

参见图1所示，为本申请实施例所提供的一种表单项处理方法的实施流程图，该方法可以包括以下步骤：

S110：响应于针对表单渲染协议文件的渲染请求，基于表单渲染协议文件，在用户界面渲染表单，表单包括一个或多个表单项，每个表单项分别置于一个表单容器中。

表单渲染协议文件可以是json-scheme文件，是满足编写规范的一份表单字段描述协议。这份规范是一份纯字段的表述，在真实的业务场景中往往需要用户界面(UserInterface，UI)布局、校验、联动等额外的表达。

表单渲染协议文件可以是预先编写得到的，用户可以针对表单渲染协议文件发出渲染请求，响应于该渲染请求，可以基于表单渲染协议文件，在用户界面渲染表单，即根据表单渲染协议文件将表单渲染到用户界面上。该表单可以包括一个或多个表单项。

表单项可以是文本框(text)、密码输入框(password)、提交按钮(submit)、单选框(radio)、多选框(checkbox)、下拉列表(select和option)、文本域(textarea)、重置按钮(reset)、单纯的按钮(button)等。

表单包括的每个表单项分别置于一个表单容器中，比如，表单包括三个表单项，则第一个表单项置于表单容器A中，第二个表单项置于表单容器B中，第三个表单项置于表单容器C中。表单容器具有新增、删除、拖拽功能。如图2所示，为表单容器的一种结构示意图，表单容器中包括渲染得到的表单项。

S120：响应于针对用户界面的第一表单项的操作请求，通过操作第一表单项所在的第一表单容器操作相应的表单项。

在本申请实施例中，基于表单渲染协议文件，在用户界面渲染表单，表单包括一个或多个表单项，每个表单项分别置于一个表单容器中，渲染得到的表单展示为表单容器组合。

用户可以根据实际需要发出相应的操作请求。操作请求可以包括拖拽请求、删除请求、添加请求中的一种。

比如，在渲染得到的表单中需要移动第一表单项的位置，则可以对该第一表单项所在的第一表单容器进行拖拽操作，相当于发出针对该第一表单项的拖拽请求。这里可以应用html5中的拖拽属性，在目标元素开始被拖动时触发dragstart事件，在目标元素正在被拖动时触发drag事件，在目标元素被拖动结束后触发dragend事件，在被拖动的目标元素进入目标区域内时触发dragenter事件，在被拖动的目标元素在目标区域内被拖动时触发dragover事件，在被拖动的目标元素离开目标区域时触发dragleave事件，在被拖动的目标元素在目标区域被放下时触发drop事件。

响应于针对用户界面的第一表单项的操作请求，可以通过操作第一表单项所在的第一表单容器操作相应的表单项，实现在用户界面对表单项的可视化操作。通过操作第一表单项所在的第一表单容器操作的相应的表单项可以包括第一表单项，还可以包括与第一表单项相关的其他表单项。

第一表单项为表单包括的一个或多个表单项中的任意一个表单项，即针对于表单包括的每个表单项，如果有对该表单项的操作请求，均可通过操作该表单项所在的表单容器操作相应的表单项。

应用本申请实施例所提供的方法，响应于针对表单渲染协议文件的渲染请求，基于该表单渲染协议文件，在用户界面渲染表单，该表单包括一个或多个表单项，每个表单项分别置于一个表单容器中，响应于针对用户界面的第一表单项的操作请求，通过操作第一表单项所在的第一表单容器操作相应的表单项，通过表单容器可以实现在用户界面对表单项的快速处理，不需要先去修改表单渲染协议文件，可以节省人力成本和时间成本。

在本申请的一些实施例中，在通过操作第一表单项所在的第一表单容器操作相应的表单项之后，该方法还可以包括以下步骤：

步骤一：确定用户界面中各表单项之间的层级关系；

步骤二：根据层级关系，更新表单渲染协议文件。

为方便描述，将上述两个步骤结合起来进行说明。

在本申请实施例中，响应于针对用户界面的第一表单项的操作请求，通过操作第一表单项所在的第一表单容器操作相应的表单项，在操作结束后，可以确定用户界面中各表单项之间的层级关系。可选地，可以根据表单包括的各表单项所在的表单容器的位置确定各表单项之间的层级关系。比如，表单容器A在表单容器B之上，可以认为表单容器A中的表单项为表单容器B中的表单项的下一层级表单项。

根据各表单项之间的层级关系，可以更新表单渲染协议文件。逆向进行表单渲染协议文件的更新，减少了表单渲染协议文件的二次开发，可以有效避免因不熟悉表单渲染协议文件嵌套规范而导致表单绘制错误的问题。

在本申请的一些实施例中，在更新表单渲染协议文件之后，该方法还可以包括以下步骤：

第一个步骤：将更新后的表单渲染协议文件保存在数据库中；

第二个步骤：在接收到的新的渲染请求时，基于数据库中更新后的表单渲染协议文件，在用户界面渲染表单。

为方便描述，将上述两个步骤结合起来进行说明。

在本申请实施例中，对表单项进行操作后，根据用户界面中各表单项的层级关系，逆向更新表单渲染协议文件之后，可以将更新后的表单渲染协议文件保存在数据库中。可选地，可以使用更新后的表单渲染协议文件替换原有的表单渲染协议文件，还可以通过不同版本标记不同的表单渲染协议文件。

在接收到新的渲染请求时，可以基于数据库中更新后的表单渲染协议文件，在用户界面渲染表单，这样渲染得到的表单即可包括根据用户的操作请求，操作后的表单项。方便用户使用。

在本申请的一些实施例中，表单渲染协议文件中每个表单项所在的表单容器为节点树上的一个节点，确定用户界面中各表单项之间的层级关系，可以包括以下步骤：

根据节点树，确定用户界面中各表单项之间的层级关系。

在本申请实施例中，表单渲染协议文件中每个表单项所在的表单容器为节点树上的一个节点，节点树可以为DOM树。

根据节点树，可以确定用户界面中各表单项之间的层级关系。如，节点树上的父节点对应的表单项为子节点对应的表单项的上一层级表单项，子节点对应的表单项为父节点对应的表单项的下一层级表单项，同一父节点下的各子节点对应的表单项为同一层级表单项。

通过节点树表征表单渲染协议文件中的表单项，方便准确地确定各表单项之间的层级关系，以进一步根据各表单项之间的层级关系，准确更新表单渲染协议文件。

在本申请的一些实施例中，响应于针对用户界面的第一表单项的操作请求，通过操作第一表单项所在的第一表单容器操作相应的表单项，可以包括以下步骤：

步骤一：在接收到针对用户界面的第一表单项的操作请求的情况下，基于节点树，确定第一表单项对应的容器组合，容器组合包括第一表单项所在的第一表单容器以及第一表单容器的子节点对应的表单容器；

步骤二：响应于操作请求，通过操作第一表单容器操作容器组合对应的表单项。

为方便描述，将上述两个步骤结合起来进行说明。

在本申请实施例中，基于表单渲染协议文件，在用户界面渲染表单后，如果接收到针对用户界面的第一表单项的操作请求，则可以基于节点树，确定第一表单项对应的容器组合。表单渲染协议文件中每个表单项所在表单容器为节点树上的一个节点，根据第一表单项所在的第一表单容器在节点树中的位置，可以确定第一表单项对应的容器组合。该容器组合可以包括第一表单容器以及第一表单容器的子节点对应的表单容器。

举例而言，在节点树中，表单容器A的子节点包括表单容器B和表单容器C，表单容器B的子节点包括表单容器D，如果表单容器A为第一表单项所在的表单容器，则确定的第一表单项对应的容器组合包括表单容器A、表单容器B、表单容器C和表单容器D，如果表单容器B为第一表单项所在的表单容器，则确定的第一表单项对应的容器组合包括表单容器B和表单容器D，如果表单容器C为第一表单项所在的表单容器，则确定的第一表单项对应的容器组合包括表单容器C。

响应于操作请求，可以通过操作第一表单容器操作容器组合对应的表单项。将表单容器组合起来进行操作，可以实现对表单项的批量操作，如批量新增、拖拽、删除表单项，节省操作时间，提高操作效率。

在本申请的一些实施例中，在基于表单渲染协议文件，在用户界面渲染表单项之后，该方法还可以包括以下步骤：

第一个步骤：基于针对用户界面的第二表单项的输入信息，获得表单结果；

第二个步骤：将表单结果保存在数据库中。

为方便描述，将上述两个步骤结合起来进行说明。

在本申请实施例中，基于表单渲染协议文件，在用户界面渲染表单，表单包括一个或多个表单项，用户可以根据实际需要在表单项中输入相应信息。基于针对用户界面的第二表单项的输入信息，可以获得表单结果。第二表单项为在用户界面渲染得到的表单包括的一个或多个表单项中的任意一个表单项。

可以将表单结果保存在数据库中，以方便后续调用。

为方便理解，再以图3所示实施流程对本申请实施例进行说明，过程如下：

获得json-sheme文件；

对json-scheme文件进行解析；

渲染表单，展示表单容器组合；

一方面，可以通过可视化操作，拖拽、添加、删除表单容器，确定表单项之间的层级关系，逆向修改json-scheme文件，得到新的json-scheme文件，将新的json-scheme文件存入数据库中；

另一方面，可以获得用户在表单项中填写的信息，提交表单结果，将表单结果存入数据库中。

本申请实施例将节点树与表单项相结合，将每个表单项放入一个自定义的表单容器中，表单容器作为节点树的节点，具有拖拽、新增、删除等操作属性，通过操作事件可以动态修改表单项的位置，并可逆向更新表单渲染协议文件的数据结构。

相应于上面的方法实施例，本申请实施例还提供了一种表单项处理装置，下文描述的表单项处理装置与上文描述的表单项处理方法可相互对应参照。

参见图4所示，表单项处理装置400可以包括以下单元：

渲染单元410，用于响应于针对表单渲染协议文件的渲染请求，基于表单渲染协议文件，在用户界面渲染表单，表单包括一个或多个表单项，每个表单项分别置于一个表单容器中；

操作单元420，用于响应于针对用户界面的第一表单项的操作请求，通过操作第一表单项所在的第一表单容器操作相应的表单项。

应用本申请实施例所提供的装置，响应于针对表单渲染协议文件的渲染请求，基于该表单渲染协议文件，在用户界面渲染表单，该表单包括一个或多个表单项，每个表单项分别置于一个表单容器中，响应于针对用户界面的第一表单项的操作请求，通过操作第一表单项所在的第一表单容器操作相应的表单项，通过表单容器可以实现在用户界面对表单项的快速处理，不需要先去修改表单渲染协议文件，可以节省人力成本和时间成本。

在本申请的一些实施例中，表单项处理装置400还包括更新单元，用于：

在通过操作第一表单项所在的第一表单容器操作相应的表单项之后，确定用户界面中各表单项之间的层级关系；

根据层级关系，更新表单渲染协议文件。

在本申请的一些实施例中，表单项处理装置400还包括第一存储单元，用于：

在更新表单渲染协议文件之后，将更新后的表单渲染协议文件保存在数据库中；

渲染单元410，还用于在接收到新的渲染请求时，基于数据库中更新后的表单渲染协议文件，在用户界面渲染表单。

在本申请的一些实施例中，表单渲染协议文件中每个表单项所在表单容器为节点树上的一个节点，更新单元，用于：

根据节点树，确定用户界面中各表单项之间的层级关系。

在本申请的一些实施例中，操作单元420，用于：

在接收到针对用户界面的第一表单项的操作请求的情况下，基于节点树，确定第一表单项对应的容器组合，容器组合包括第一表单项所在的第一表单容器以及第一表单容器的子节点对应的表单容器；

响应于操作请求，通过操作第一表单容器操作容器组合对应的表单项。

在本申请的一些实施例中，表单项处理装置400还包括第二存储单元，用于：

基于针对用户界面的第二表单项的输入信息，获得表单结果；

将表单结果保存在数据库中。

在本申请的一些实施例中，操作请求包括拖拽请求、删除请求、添加请求中的一种。

关于上述实施例中的装置，其中各个单元执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

相应于上面的方法实施例，本申请实施例还提供了一种电子设备，包括：处理器，存储器，存储在存储器上并可在处理器上运行的计算机程序，该计算机程序被处理器执行时实现上述表单项处理方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。

如图5所示，为电子设备的一种结构示意图，电子设备可以包括：处理器510、存储器511、通信接口512和通信总线513。处理器510、存储器511、通信接口512均通过通信总线513完成相互间的通信。

在本申请实施例中，处理器510可以为中央处理器(Central Processing Unit，CPU)、特定应用集成电路、数字信号处理器、现场可编程门阵列或者其他可编程逻辑器件等。

处理器510可以调用存储器511中存储的计算机程序，具体的，处理器510可以执行表单项处理方法的实施例中的操作。

存储器511中用于存放一个或者一个以上程序，程序可以包括程序代码，程序代码包括计算机操作指令，在本申请实施例中，存储器511中至少存储有用于实现以下功能的程序：

响应于针对表单渲染协议文件的渲染请求，基于表单渲染协议文件，在用户界面渲染表单，表单包括一个或多个表单项，每个表单项分别置于一个表单容器中；

响应于针对用户界面的第一表单项的操作请求，通过操作第一表单项所在的第一表单容器操作相应的表单项。

在一种可能的实现方式中，存储器511可包括存储程序区和存储数据区，其中，存储程序区可存储操作系统，以及至少一个功能(比如渲染功能、操作功能)所需的应用程序等；存储数据区可存储使用过程中所创建的数据，如表单数据、文件数据等。

此外，存储器511可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件或其他易失性固态存储器件。

通信接口512可以为通信模块的接口，用于与其他设备或者系统连接。

当然，需要说明的是，图5所示的结构并不构成对本申请实施例中电子设备的限定，在实际应用中电子设备可以包括比图5所示的更多或更少的部件，或者组合某些部件。

本申请实施例还提供了一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，计算机程序被处理器执行时实现上述表单项处理方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。其中，计算机可读存储介质，如只读存储器(Read-Only Memory，简称ROM)、随机存取存储器(Random Access Memory，简称RAM)、磁碟或者光盘等。

此外，本申请实施例还提供了一种计算机程序产品或计算机程序，该计算机程序产品或者计算机程序可以包括计算机指令，该计算机指令可以存储在计算机可读存储介质中。电子设备的处理器从计算机可读存储介质读取该计算机指令，处理器可以执行该计算机指令，使得该电子设备执行前文所对应实施例中表单项处理方法的描述，因此，这里将不再进行赘述。另外，对采用相同方法的有益效果描述，也不再进行赘述。对于本申请所涉及的计算机程序产品或者计算机程序实施例中未披露的技术细节，请参照本申请方法实施例的描述。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本申请各个实施例的方法。

上面结合附图对本申请的实施例进行了描述，但是本申请并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本申请的启示下，在不脱离本申请宗旨和权利要求所保护的范围情况下，还可做出很多形式，均属于本申请的保护之内。

本领域普通技术人员可以意识到，结合本申请实施例中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以权利要求的保护范围为准。