CN114185523A - 一种基于组件的页面树状结构处理方法及装置 - Google Patents

Abstract

本发明公开了一种基于组件的页面树状结构处理方法及装置，包括：获取当前输入或移入的组件的目标位置信息和类型属性信息；基于目标位置信息，确定当前输入或移入的组件在页面树状结构中的第一节点位置；响应于检测到当前输入或移入的组件的第一节点位置与页面树状结构中的目标组件的第二节点位置之间属于嵌套位置关系，基于预先设定的至少一个嵌套规则判断函数以及当前输入或移入的组件的类型属性信息和目标组件的类型属性信息，确定目标组件是否支持嵌套当前输入或移入的组件；以及响应于确定目标组件支持嵌套当前输入或移入的组件，在页面树状结构的第二节点位置处显示当前输入或移入的组件。

Description

一种基于组件的页面树状结构处理方法及装置

技术领域

本发明涉及信息处理技术领域，并且具体而言，涉及一种基于组件的页面树状结构处理方法及装置、计算机可读存储介质、电子设备以及计算机程序产品。

背景技术

基于项目开发的角度，为满足运营和市场的各种活动需求，系统前端开发诸多页面组件，例如海报分享组件、轮播图组件、大图组件、列表展示组件、计时组件、视频组件等组件。系统前端所开发的组件可以让产品、运营或者UI（用户接口）通过在页面上以诸如拖拽组件的类似积木或拼图的方式，实现想要的页面效果。页面中的部分组件支持嵌套方式，例如，在单图组件上支持放置一个或多个按钮组件，在tab栏组件下，支持嵌套各种组件。然而，页面中的另一部分组件只能被放置在页面page下，这些组件不支持任何组件嵌套在下面成为其子组件。例如，按钮组件只能嵌套于页面page、单图组件、定位容器组件等组件下，这是因为按钮组件是最小的组件。在按钮组件下嵌套一个轮播图组件或者视频组件，不管是视觉还是逻辑上，都不符合规则和使用习惯。所以，功能设定不支持按钮组件下嵌套任何组件。

一般情况下，在对页面进行处理后进行提交时，不管是系统前端验证，还是系统后端验证，均会对页面的数据格式和类型进行判断，以确定是否满足网页保存成功的条件。如果网页保存不成功的话，则提供相应的提示信息，以使得用户能够进行页面的修改。如果用户不熟悉或不了解组件嵌套规则，对不能进行嵌套的组件进行了嵌套拼接，那么在系统前端或系统后端验证后，可能存在多处不满足保存成功的条件。这种情况下，多个提示信息会一并提供给用户，使用户无法分清哪些组件出现嵌套错误，因此给用户体验带来了极大的困扰。

发明内容

鉴于此，本发明提出了一种基于组件的页面树状结构处理方法及装置、计算机可读存储介质、电子设备以及计算机程序产品，旨在解决复杂的页面组件嵌套结构中，如何有效地向用户提示组件嵌套规则，降低用户的上手难度且提高用户体验，从而使得用户能够更快更好地生成效果页面。

根据本公开实施例的一个方面，提供了一种基于组件的页面树状结构处理方法，包括：

响应于检测到用于表示页面中组件层级关系的页面树状结构中存在组件输入或组件位置移动，获取当前输入或移入的组件的目标位置信息和类型属性信息；

基于所述目标位置信息，确定当前输入或移入的组件在所述页面树状结构中的第一节点位置；

响应于检测到当前输入或移入的组件的第一节点位置与所述页面树状结构中的至少一个组件中的目标组件的第二节点位置之间属于嵌套位置关系，基于预先设定的至少一个嵌套规则判断函数以及当前输入或移入的组件的类型属性信息和所述目标组件的类型属性信息，确定所述目标组件是否支持嵌套当前输入或移入的组件；以及

响应于确定所述目标组件支持嵌套当前输入或移入的组件，在所述页面树状结构的第二节点位置处显示所述当前输入或移入的组件。

优选地，还包括：响应于确定所述目标组件不支持嵌套当前输入或移入的组件，保持所述页面树状结构中的组件位置关系不变并输出用于指示组件嵌套错误的提示信息。

优选地，其中，所述目标位置信息包括当前输入或移入的组件在所述页面树状结构中的节点位置。

优选地，还包括：在所述页面树状结构的第二节点位置处显示所述当前输入或移入的组件之后，

基于当前输入或移入的组件的类型属性信息，确定当前输入或移入的组件是否支持嵌套其他组件；

响应于确定当前输入或移入的组件不支持嵌套其他组件，在所述页面树状结构中使用特定标记对当前输入或移入的组件对应的节点进行标注，以提示当前输入或移入的组件不支持嵌套其他组件。

优选地，其中，获取当前输入的组件的目标位置信息和类型属性信息，包括：

针对组件库中的每个组件，实时检测是否存在与组件输入相关的用户操作；

响应于检测到存在与组件输入相关的用户操作，且该用户操作为将组件输入到所述页面树状结构中，基于该用户操作确定当前输入的组件的选定节点位置；

基于所述选定节点位置，获取当前输入的组件的目标位置信息；

和/或，

基于所述组件库的配置文件确定当前输入的组件的类型属性信息。

优选地，其中，获取当前移入的组件的目标位置信息和类型属性信息，包括：

针对所述页面树状结构中的每个组件，实时检测是否存在与组件移动相关的用户操作；

响应于检测到存在与组件移动相关的用户操作，且该用户操作为将组件从所述页面树状结构中的一个位置移动到所述页面树状结构中的另一个位置，基于该用户操作确定当前移入的组件的选定节点位置；

基于所述选定节点位置，获取当前移入的组件的目标位置信息；

和/或，

基于所述组件库的配置文件确定当前移入的组件的类型属性信息。

优选地，其中，基于预先设定的至少一个嵌套规则判断函数以及当前输入或移入的组件的类型属性信息和所述目标组件的类型属性信息，确定所述目标组件是否支持嵌套当前输入或移入的组件，包括：

利用所述至少一个嵌套规则判断函数中的每个嵌套规则判断函数，并基于当前输入或移入的组件的类型属性信息和所述目标组件的类型属性信息，确定当前输入或移入的组件与所述目标组件之间的嵌套判断结果；

响应于每个嵌套规则判断函数的嵌套判断结果均表示支持嵌套，确定所述目标组件支持嵌套当前输入或移入的组件。

优选地，其中，基于预先设定的至少一个嵌套规则判断函数以及当前输入或移入的组件的类型属性信息和所述目标组件的类型属性信息，确定所述目标组件是否支持嵌套当前输入或移入的组件，包括：

基于嵌套数目判断函数，确定所述目标组件嵌套的组件数目是否超出指定的阈值；

响应于确定所述目标组件嵌套的组件数目未超出指定的阈值，基于嵌套逻辑判断函数，确定所述目标组件本身是否支持嵌套其他组件；

响应于确定所述目标组件本身支持嵌套其他组件，基于嵌套关系判断函数以及当前输入或移入的组件的类型属性信息和所述目标组件的类型属性信息，确定当前输入或移入的组件是否是所述目标组件支持的嵌套类型；

响应于确定当前输入或移入的组件是所述目标组件支持的嵌套类型，确定所述目标组件支持嵌套当前输入或移入的组件。

优选地，在所述页面树状结构的第二节点位置处显示所述当前输入或移入的组件之后，还包括：

基于所述页面树状结构，生成用于呈现组件的页面；

其中所述当前输入或移入的组件在所述页面上的显示位置，是所述页面上与所述页面树状结构的第一节点位置相对应的显示位置。

根据本公开实施例的一个方面，提供了一种基于组件的页面树状结构处理装置，包括：

获取单元，用于响应于检测到用于表示页面中组件层级关系的页面树状结构中存在组件输入或组件位置移动，获取当前输入或移入的组件的目标位置信息和类型属性信息；

第一确定单元，用于基于所述目标位置信息，确定当前输入或移入的组件在所述页面树状结构中的第一节点位置；

第二确定单元，用于响应于检测到当前输入或移入的组件的第一节点位置与所述页面树状结构中的至少一个组件中的目标组件的第二节点位置之间属于嵌套位置关系，基于预先设定的至少一个嵌套规则判断函数以及当前输入或移入的组件的类型属性信息和所述目标组件的类型属性信息，确定所述目标组件是否支持嵌套当前输入或移入的组件；以及

显示单元，用于响应于确定所述目标组件支持嵌套当前输入或移入的组件，在所述页面树状结构的第二节点位置处显示所述当前输入或移入的组件。

优选地，还包括：输出单元，用于响应于确定所述目标组件不支持嵌套当前输入或移入的组件，保持所述页面树状结构中的组件位置关系不变并输出用于指示组件嵌套错误的提示信息。

优选地，其中，所述目标位置信息包括当前输入或移入的组件在所述页面树状结构中的节点位置。

优选地，还包括：标注单元，用于在所述页面树状结构的第二节点位置处显示所述当前输入或移入的组件之后，基于当前输入或移入的组件的类型属性信息，确定当前输入或移入的组件是否支持嵌套其他组件；

响应于确定当前输入或移入的组件不支持嵌套其他组件，在所述页面树状结构中使用特定标记对当前输入或移入的组件对应的节点进行标注，以提示当前输入或移入的组件不支持嵌套其他组件。

优选地，获取单元，具体用于针对组件库中的每个组件，实时检测是否存在与组件输入相关的用户操作；

响应于检测到存在与组件输入相关的用户操作，且该用户操作为将组件输入到所述页面树状结构中，基于该用户操作确定当前输入的组件的选定节点位置；

基于所述选定节点位置，获取当前输入的组件的目标位置信息；

和/或，获取单元，具体用于基于所述组件库的配置文件确定当前输入的组件的类型属性信息。

优选地，获取单元，具体用于针对所述页面树状结构中的每个组件，实时检测是否存在与组件移动相关的用户操作；

响应于检测到存在与组件移动相关的用户操作，且该用户操作为将组件从所述页面树状结构中的一个位置移动到所述页面树状结构中的另一个位置，基于该用户操作确定当前移入的组件的选定节点位置；

基于所述选定节点位置，获取当前移入的组件的目标位置信息；

和/或，获取单元，具体用于基于所述组件库的配置文件确定当前移入的组件的类型属性信息。

优选地，第二确定单元，包括：

第一确定子单元，用于利用所述至少一个嵌套规则判断函数中的每个嵌套规则判断函数，并基于当前输入或移入的组件的类型属性信息和所述目标组件的类型属性信息，确定当前输入或移入的组件与所述目标组件之间的嵌套判断结果；

第二确定子单元，用于响应于每个嵌套规则判断函数的嵌套判断结果均表示支持嵌套，确定所述目标组件支持嵌套当前输入或移入的组件。

优选地，第二确定单元，包括：

第三确定子单元，用于基于嵌套数目判断函数，确定所述目标组件嵌套的组件数目是否超出指定的阈值；

第四确定子单元，用于响应于确定所述目标组件嵌套的组件数目未超出指定的阈值，基于嵌套逻辑判断函数，确定所述目标组件本身是否支持嵌套其他组件；

第五确定子单元，用于响应于确定所述目标组件本身支持嵌套其他组件，基于嵌套关系判断函数以及当前输入或移入的组件的类型属性信息和所述目标组件的类型属性信息，确定当前输入或移入的组件是否是所述目标组件支持的嵌套类型；

第六确定子单元，用于响应于确定当前输入或移入的组件是所述目标组件支持的嵌套类型，确定所述目标组件支持嵌套当前输入或移入的组件。

优选地，还包括：生成单元，用于基于所述页面树状结构，生成用于呈现组件的页面；其中所述当前输入或移入的组件在所述页面上的显示位置，是所述页面上与所述页面树状结构的第一节点位置相对应的显示位置。

基于本公开实施例的又一方面，提供了一种计算机可读存储介质，所述存储介质存储有计算机程序，所述计算机程序用于执行上述任一实施例所述的方法。

基于本公开实施例的再一方面，提供了一种电子设备，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述指令以实现上述任一实施例所述的方法。

基于本公开实施例的再一方面，提供了一种计算机程序产品，包括计算机可读代码，其特征在于，当所述计算机可读代码在设备上运行时，所述设备中的处理器执行用于实现上述任一实施例所述的方法。

基于本公开上述实施例提供的一种基于组件的页面树状结构处理方法及装置、计算机可读存储介质、电子设备以及计算机程序产品，一方面可以让用户清晰地看出当前页面树状结构中的各个组件是否支持拖拽，另一方面使得用户在拖拽的过程中，如果当前操作是向不支持嵌套的组件添加组件节点时，会舍弃或拒绝当前操作，并提供toast提示信息，从而避免了最后对网页进行保存时，由于多个组件存在嵌套错误而出现多个提示同时出现的问题。本申请的技术方案通过css样式的改变，让用户在进行组件操作前就了解当前组件嵌套属性，增强了辨识度。此外，通过将提示嵌套错误的toast提示信息前置，使得只要当前操作不满足嵌套规则，便会舍弃当前操作并及时提供错误原因的toast提示信息，避免最后保存页面树状结构或网页时可能同时出现多次toast，导致用户需要重新地大量修改页面组件的问题。

附图说明

通过结合附图对本发明实施例进行更详细的描述，本发明的上述以及其他目的、特征和优势将变得更加明显。附图用来提供对本发明实施例的进一步理解，并且构成说明书的一部分，与本发明实施例一起用于解释本发明，并不构成对本发明的限制。在附图中，相同的参考标号通常代表相同部件或步骤。

图1是本公开一示例性实施例提供的基于组件的页面树状结构处理方法的流程图；

图2是本公开另一示例性实施例提供的基于组件的页面树状结构处理方法的流程图；

图3是本公开一示例性实施例提供的页面树状结构处理实例的示意图；

图4是本公开一示例性实施例提供的基于组件的页面树状结构处理装置的结构示意图；

图5是本公开一示例性实施例提供的电子设备的示意图。

具体实施方式

下面，将参考附图详细地描述根据本公开的示例实施例。显然，所描述的实施例仅仅是本公开的一部分实施例，而不是本公开的全部实施例，应理解，本公开不受这里描述的示例实施例的限制。

应注意到：除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本公开的范围。

本领域技术人员可以理解，本公开实施例中的“第一”、“第二”等术语仅用于区别不同步骤、设备或模块等，既不代表任何特定技术含义，也不表示它们之间的必然逻辑顺序。

还应理解，在本公开实施例中，“多个”可以指两个或两个以上，“至少一个”可以指一个、两个或两个以上。

还应理解，对于本公开实施例中提及的任一部件、数据或结构，在没有明确限定或者在前后文给出相反启示的情况下，一般可以理解为一个或多个。

另外，本公开中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本公开中字符“/”，一般表示前后关联对象是一种“或”的关系。

还应理解，本公开对各个实施例的描述着重强调各个实施例之间的不同之处，其相同或相似之处可以相互参考，为了简洁，不再一一赘述。

同时，应当明白，为了便于描述，附图中所示出的各个部分的尺寸并不是按照实际的比例关系绘制的。

以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本公开及其应用或使用的任何限制。

对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论，但在适当情况下，技术、方法和设备应当被视为说明书的一部分。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步讨论。

本公开实施例可以应用于终端设备、计算机系统、服务器等电子设备，其可与众多其它通用或专用计算系统环境或配置一起操作。适于与终端设备、计算机系统、服务器等电子设备一起使用的众所周知的终端设备、计算系统、环境和/或配置的例子包括但不限于：个人计算机系统、服务器计算机系统、瘦客户机、厚客户机、手持或膝上设备、基于微处理器的系统、机顶盒、可编程消费电子产品、网络个人电脑、小型计算机系统、大型计算机系统和包括上述任何系统的分布式云计算技术环境，等等。

终端设备、计算机系统、服务器等电子设备可以在由计算机系统执行的计算机系统可执行指令（诸如程序模块）的一般语境下描述。通常，程序模块可以包括例程、程序、目标程序、组件、逻辑、数据结构等等，它们执行特定的任务或者实现特定的抽象数据类型。计算机系统/服务器可以在分布式云计算环境中实施，分布式云计算环境中，任务是由通过通信网络链接的远程处理设备执行的。在分布式云计算环境中，程序模块可以位于包括存储设备的本地或远程计算系统存储介质上。

本公开实施例提供了一种基于组件的页面树状结构处理方法，通过检测并获取用于表示页面中组件层级关系的页面树状结构中输入或移入的当前组件的位置信息和类型属性信息，确定当前组件在页面树状结构中的节点位置。在当前组件的节点位置与页面树状结构中现有组件的节点位置属于嵌套位置关系时，基于嵌套规则判断函数以及当前组件的类型属性信息和现有组件的类型属性信息，确定现有组件是否支持嵌套当前组件。响应于确定现有组件支持嵌套当前组件，在现有组件的节点位置处显示当前输入或移入的组件。

图1是本公开一示例性实施例提供的基于组件的页面树状结构处理方法的流程图。如图1所示，基于组件的页面处理方法包括：

步骤101，响应于检测到用于表示页面中组件层级关系的页面树状结构中存在组件输入或组件位置移动，获取当前输入或移入的组件的目标位置信息和类型属性信息。应当了解的是，根据一个实施例，实时检测表示页面中组件层级关系的页面树状结构中是否存在组件输入或组件位置移动，其中页面树状结构是一种描述页面的数据结构或树状结构并且在页面树状结构中检测是否存在组件输入或组件位置移动可以确定用户对页面树状结构的操作。通常，用户可以根据需求在页面树状结构上输入或移动一个或多个组件。为此，需要对用户的输入动作或移入动作（即，与组件移动相关的移动动作）进行检测。在这种情况下，响应于检测到页面树状结构中存在组件输入或组件位置移动，可以表明存在对于组件的输入动作或移入动作。然而，根据一个实施例，由于部分组件不支持嵌套或两个组件之间不存在嵌套关系，导致无法确定组件的输入动作或移入动作的结果是成功还是失败。

根据一个实施例，目标位置信息包括当前输入或移入的组件在页面树状结构中的节点位置，即组件输入或移入的位置。用于表示页面中组件层级关系的页面树状结构中可以容纳多个组件，并且多个组件中任意组件之间可以存在嵌套关系，或者部分组件不支持嵌套或两个组件之间不存在嵌套关系。通常，当用户希望将当前输入或移入的第二组件嵌套在页面树状结构中已经存在的第一组件下时，通过诸如将第二组件拖拽到第一组件的节点位置等输入动作或移入动作，可以完成将第二组件嵌套在第一组件下的动作。为此，为了确定用户的输入动作或移入动作是否需要进行组件嵌套或嵌套在哪个组件下时，需要确定用户将诸如第二组件的当前组件输入或移入在哪个节点位置。因此，利用位置信息来确定当前输入或移入的组件在页面树状结构中的位置。位置信息可以是当前输入或移入的组件在页面树状结构中的节点位置、或与其他组件的节点位置关系等等。

根据一个实施例，获取当前输入的组件的目标位置信息和类型属性信息，包括：针对组件库中的每个组件，实时检测是否存在与组件输入相关的用户操作；响应于检测到存在与组件输入相关的用户操作，且该用户操作为将组件输入到页面树状结构中，基于该用户操作确定当前输入的组件的选定节点位置；基于选定节点位置，获取当前输入的组件的目标位置信息。

可替换地，根据一个实施例，获取当前移入的组件的目标位置信息和类型属性信息，包括：针对页面树状结构中的每个组件，实时检测是否存在与组件移动相关的用户操作；响应于检测到存在与组件移动相关的用户操作，且该用户操作为将组件从页面树状结构中的一个位置移动到页面树状结构中的另一个位置，基于该用户操作确定当前移入的组件的选定节点位置；基于选定节点位置，获取当前移入的组件的目标位置信息。

组件库的实例如图3所示，图3是本公开一示例性实施例提供的页面树状结构处理实例的示意图。在图3中，以列表的形式显示了组件库，并且组件库中包括：单图、轮播图、按钮、回到顶部、富文本、海报弹窗、视频组件、倒计时组件、导航组件、轮播信息组件、城市选择等组件。组件库中的每个组件均可以为用户提供特定的功能。例如，倒计时组件能够提供倒计时功能，并且用户可以对倒计时组件进行相应的设置。根据一个实施例，针对组件库中的每个组件，实时检测是否存在与任意组件相关的用户操作。通过实时检测可以确定与组件相关的用户操作，并且在检测到存在与组件相关的用户操作，且该用户操作为将组件输入或移入到页面树状结构中，或者在页面树状结构中移动组件时，基于该用户操作确定当前输入或移入的组件的选定节点位置。

应当了解的是，因为本申请采用了树状图结构来展示组件层级关系的结构和各个组件所在的位置，选定节点位置可以是用户操作的当前输入或移入的组件在页面树状结构（如图3的页面设置所示的树状图）中的节点位置，可以理解为用户在树状图中选择的选定节点位置。然而，用户选择的选定节点位置并不一定能够成为最终的节点位置，这是因为当用户选择的选定节点位置处的目标组件不支持嵌套时，无法将选定节点位置确定为最终的节点位置。为此，需要确定目标组件是否支持当前输入或移入的组件嵌套在这个节点位置。如果目标组件不支持当前输入或移入的组件嵌套在这个节点位置，那么用户选择的选定节点位置无法成为最终的节点位置，而是需要再选择其他的选定节点位置。

根据一个实施例，可替换地，获取当前输入的组件的目标位置信息和类型属性信息，包括：基于组件库的配置文件确定当前输入的组件的类型属性信息。根据一个实施例，可替换地，获取当前移入的组件的目标位置信息和类型属性信息，包括：基于组件库的配置文件确定当前移入的组件的类型属性信息。

类型属性信息用于描述组件的多个属性。例如，组件的类型属性信息包括：name（组件名称）、id（组件ID）、param（组件携带参数）等属性（或字段），即组件的数据结构包括：name（组件名称）、id（组件ID）、param（组件携带参数）等。此外，为了解决现有技术中的问题，可以在定义组件的数据结构时进行改进。例如，每个组件在定义数据结构时，在上述属性之外，再增加两个属性：allowNest（是否支持嵌套）以及nodeRule（是数组，用于存储嵌套规则的函数判断），从而为组件添加嵌套标识与规则。基于allowNest和nodeRule这两个属性或字段，去处理当前组件的嵌套问题并给用户进行提示。

如图3所示，在用户对组件库中组件，例如单图、轮播图、按钮、回到顶部、富文本、海报弹窗、视频组件、倒计时组件、导航组件、轮播信息组件、城市选择等进行操作时，用户可以选中并拖拽特定组件，例如，富文本组件。在向页面page拖拽组件并确定组件的显示位置无错误或冲突时，根据组件的allowNest属性确定其是否支持嵌套。根据组件的allowNest属性实时地在连接点处标记当前组件是否支持嵌套，例如，如果当前组件支持嵌套，则连接线显示实线，如果当前组件不支持嵌套，则连接线显示虚线。如图3所示，单图和Tabs容器支持嵌套，因此连接线显示实线，用于表示单图和Tabs容器下能够嵌套组件。轮播图、富文本和倒计时组件不支持嵌套，因此连接线显示虚线，用于表示轮播图、富文本和倒计时组件下不能嵌套组件。

步骤102，基于目标位置信息，确定当前输入或移入的组件在页面树状结构中的第一节点位置。如上所述，选定节点位置可以是用户操作的当前输入或移入的组件在网页数据结构（如图3的页面设置所示的树状图）中的节点位置。例如，轮播图组件在树状图中的节点位置是在单图之下并且在三个导航组件之上，那么在与页面树状结构对应的所显示的页面中，轮播图组件的第一显示位置也位于单图之下并且在三个导航组件之上。

组件操作的具体实例包括：当用户希望向页面输入组件或进行组件移动时，可以从组件库向树状图（图3的页面设置栏）中的某个组件节点处拖拽组件，或者在树状图上拖拽组件节点进行位置变化和组件嵌套的组件移动操作。如果用户忽略了上面介绍的是否支持嵌套的连接线（实线或虚线）提示，仍向不支持嵌套的目标组件的节点位置拖拽当前输入或移入的组件，希望使其成为目标组件节点的子组件节点时，可以利用nodeRule（嵌套规则函数数组）进行嵌套判断。嵌套规则函数数组里具有一个或多个函数。例如，用户当前拖拽的是单图组件，并且向按钮组件上拖拽，当拖拽到按钮组件节点松开鼠标的时候，可以获取到目标组件节点（按钮组件）的类型属性数据。确定目标组件节点的类型属性数据中的nodeRule是否存在函数值。如果nodeRule存在函数值，利用组合函数或者普通循环依次获取嵌套规则函数数组中的每个函数并执行。例如，嵌套规则函数数组中的每个函数均判断按钮组件是否支持嵌套单图组件，如果支持嵌套，则返回true（真）；如果不支持嵌套，则返回false（假）。如果返回false，则说明基于这个函数来说目标组件节点不支持嵌套正在拖拽的组件，如果返回true，则说明基于这个函数来说目标组件节点支持嵌套正在拖拽的组件。继续执行下一个函数，直至所有函数都执行完毕。如果所有函数均返回true，则说明目标组件节点支持嵌套正在拖拽的组件。如果任意一个函数返回false，则说明目标组件节点不支持嵌套正在拖拽的组件，利用toast提示操作执行失败的原因，随之当前判断过程结束，并且用户的当前操作被丢弃，不会引起网页数据结构的变化。

步骤103，响应于检测到当前输入或移入的组件的第一节点位置与页面树状结构中的至少一个组件中的目标组件的第二节点位置之间属于嵌套位置关系，基于预先设定的至少一个嵌套规则判断函数以及当前输入或移入的组件的类型属性信息和目标组件的类型属性信息，确定目标组件是否支持嵌套当前输入或移入的组件。

在一个实例中，基于预先设定的至少一个嵌套规则判断函数以及当前输入或移入的组件的类型属性信息和目标组件的类型属性信息，确定目标组件是否支持嵌套当前输入或移入的组件，包括：利用至少一个嵌套规则判断函数中的每个嵌套规则判断函数，并基于当前输入或移入的组件的类型属性信息和目标组件的类型属性信息，确定当前输入或移入的组件与目标组件之间的嵌套判断结果；响应于每个嵌套规则判断函数的嵌套判断结果均表示支持嵌套，确定目标组件支持嵌套当前输入或移入的组件。如上所述的，如果所有函数均返回true，则说明目标组件节点支持嵌套正在拖拽的组件。如果任意一个函数返回false，则说明目标组件节点不支持嵌套正在拖拽的组件。

在一个实例中，基于预先设定的至少一个嵌套规则判断函数以及当前输入或移入的组件的类型属性信息和目标组件的类型属性信息，确定目标组件是否支持嵌套当前输入或移入的组件，包括：基于嵌套数目判断函数，确定目标组件嵌套的组件数目是否超出指定的阈值；响应于确定目标组件嵌套的组件数目未超出指定的阈值，基于嵌套逻辑判断函数，确定目标组件本身是否支持嵌套其他组件；响应于确定目标组件本身支持嵌套其他组件，基于嵌套关系判断函数以及当前输入或移入的组件的类型属性信息和目标组件的类型属性信息，确定当前输入或移入的组件是否是目标组件支持的嵌套类型；响应于确定当前输入或移入的组件是目标组件支持的嵌套类型，确定目标组件支持嵌套当前输入或移入的组件。

应当了解的是，在对组件进行嵌套时，由于一些约束条件，导致每种类型的组件下能够嵌套的组件具有相应的数目阈值。通过这种方式，可以避免在某个组件下嵌套过多的组件，从而使得页面显示混乱。为此，在确定组件是否支持嵌套时，还需要基于嵌套数目判断函数，确定目标组件嵌套的组件数目是否超出指定的阈值。当确定目标组件嵌套的组件数目超出指定的阈值时，则不允许增加新的嵌套组件。

当确定目标组件嵌套的组件数目未超出指定的阈值，进一步基于嵌套逻辑判断函数，确定目标组件本身是否支持嵌套其他组件。例如，利用类型属性信息中的allowNest（是否支持嵌套），即嵌套逻辑判断函数，确定目标组件本身是否支持嵌套其他组件。当目标组件本身不支持嵌套其他组件，则不允许嵌套组件。而当确定目标组件本身支持嵌套其他组件时，进一步基于嵌套关系判断函数以及当前输入或当前移入的组件的类型属性信息和目标组件的类型属性信息，确定当前输入或当前移入的组件是否是目标组件支持的嵌套类型。响应于确定当前输入或当前移入的组件是目标组件支持的嵌套类型，确定目标组件支持嵌套当前输入或当前移入的组件。

在一个实施例中，响应于检测到当前输入或当前移入的组件的第一节点位置与页面树状结构中的至少一个组件中的每个组件的节点位置均不存在位置重叠，在页面树状结构的第一节点位置处显示当前输入或移入的组件。

步骤104，响应于确定目标组件支持嵌套当前输入或移入的组件，在页面树状结构的第二节点位置处显示当前输入或移入的组件。其中，第一节点位置是基于位置信息所确定的当前输入或当前移入的组件在页面树状结构中的节点位置。此外，响应于确定目标组件不支持嵌套当前输入或移入的组件，保持页面树状结构中的组件位置关系不变并输出用于指示组件嵌套错误的提示信息。根据一个实施例，组件嵌套错误的原因包括：目标组件不支持（其下）嵌套任何组件，例如，目标组件的allowNest的值表示目标组件不支持嵌套；或者，目标组件支持嵌套组件，例如，目标组件的allowNest的值表示目标组件支持嵌套，但是目标组件不支持嵌套当前输入或当前移入的组件。即，目标组件与当前输入或当前移入的组件存在嵌套逻辑上的不支持，例如，目标组件的nodeRule中任意一个函数确定目标组件不支持嵌套当前输入或当前移入的组件，则确定目标组件不支持嵌套当前输入或当前移入的组件。应当了解的是，目标组件可能支持嵌套其它组件。

在一个实施例中，还包括：在页面树状结构的第二节点位置处显示当前输入或移入的组件之后，基于当前输入或移入的组件的类型属性信息，确定当前输入或移入的组件是否支持嵌套其他组件；响应于确定当前输入或移入的组件不支持嵌套其他组件，在页面树状结构中使用特定标记对当前输入或移入的组件对应的节点进行标注，以提示当前输入或移入的组件不支持嵌套其他组件。例如，如果当前组件支持嵌套，则连接线显示实线，如果当前组件不支持嵌套，则连接线显示虚线。

在一个实施例中，在页面树状结构的第二节点位置处显示当前输入或移入的组件之后，还包括：基于页面树状结构，生成用于呈现组件的页面。其中当前输入或移入的组件在页面上的显示位置，是页面上与页面树状结构的第一节点位置相对应的显示位置。

图2是本公开另一示例性实施例提供的基于组件的页面处理方法的流程图。基于组件的页面处理方法使用户根据allowNest和nodeRule提示，搭建组件页面并且请求保存页面。具体地，方法包括：

步骤201，在组件的数据结构中，为作为标签的组件增加两个属性（或字段）：allowNest（是否支持嵌套）以及nodeRule（嵌套规则函数数组）。

步骤202，从组件区拖拽组件标签，以实现组件添加。

步骤204，确定组件是否支持嵌套，当组件支持嵌套时，在步骤206，将连接线设置为实线；当组件不支持嵌套时，在步骤207，将连接线设置为虚线。

步骤203，在树状图中拖拽组件标签，以进行组件的换位或嵌套。

步骤205，确定嵌套规则函数数组中每个函数的返回值，如果所有函数的返回值均为T（Ture），则步骤209，确定支持嵌套；如果任意函数的返回值为F（False），则步骤208，确定不支持嵌套，利用toast提示原因。

图4是本公开一示例性实施例提供的基于组件的页面树状结构处理装置的结构示意图。页面树状结构处理装置包括：获取单元401、第一确定单元402、第二确定单元403、显示单元404、输出单元405、标注单元406以及生成单元407。

获取单元401，用于响应于检测到用于表示页面中组件层级关系的页面树状结构中存在组件输入或组件位置移动，获取当前输入或移入的组件的目标位置信息和类型属性信息。目标位置信息包括当前输入或移入的组件在页面树状结构中的节点位置。

在一个实施例中，获取单元401，具体用于针对组件库中的每个组件，实时检测是否存在与组件输入相关的用户操作；响应于检测到存在与组件输入相关的用户操作，且该用户操作为将组件输入到页面树状结构中，基于该用户操作确定当前输入的组件的选定节点位置；基于选定节点位置，获取当前输入的组件的目标位置信息。可替换地，获取单元401，具体用于基于组件库的配置文件确定当前输入的组件的类型属性信息。

在一个实施例中，获取单元401，具体用于针对页面树状结构中的每个组件，实时检测是否存在与组件移动相关的用户操作；响应于检测到存在与组件移动相关的用户操作，且该用户操作为将组件从页面树状结构中的一个位置移动到页面树状结构中的另一个位置，基于该用户操作确定当前移入的组件的选定节点位置；基于选定节点位置，获取当前移入的组件的目标位置信息。可替换地，获取单元401，具体用于基于组件库的配置文件确定当前移入的组件的类型属性信息。

第一确定单元402，用于基于目标位置信息，确定当前输入或移入的组件在页面树状结构中的第一节点位置。

第二确定单元403，用于响应于检测到当前输入或移入的组件的第一节点位置与页面树状结构中的至少一个组件中的目标组件的第二节点位置之间属于嵌套位置关系，基于预先设定的至少一个嵌套规则判断函数以及当前输入或移入的组件的类型属性信息和目标组件的类型属性信息，确定目标组件是否支持嵌套当前输入或移入的组件。

在一个实施例中，第二确定单元403，包括：

第一确定子单元，用于利用至少一个嵌套规则判断函数中的每个嵌套规则判断函数，并基于当前输入或移入的组件的类型属性信息和目标组件的类型属性信息，确定当前输入或移入的组件与目标组件之间的嵌套判断结果；

第二确定子单元，用于响应于每个嵌套规则判断函数的嵌套判断结果均表示支持嵌套，确定目标组件支持嵌套当前输入或移入的组件。

在一个实施例中，第二确定单元403，包括：

第三确定子单元，用于基于嵌套数目判断函数，确定目标组件嵌套的组件数目是否超出指定的阈值；

第四确定子单元，用于响应于确定目标组件嵌套的组件数目未超出指定的阈值，基于嵌套逻辑判断函数，确定目标组件本身是否支持嵌套其他组件；

第五确定子单元，用于响应于确定目标组件本身支持嵌套其他组件，基于嵌套关系判断函数以及当前输入或移入的组件的类型属性信息和目标组件的类型属性信息，确定当前输入或移入的组件是否是目标组件支持的嵌套类型；

第六确定子单元，用于响应于确定当前输入或移入的组件是目标组件支持的嵌套类型，确定目标组件支持嵌套当前输入或移入的组件。

显示单元404，用于响应于确定目标组件支持嵌套当前输入或移入的组件，在页面树状结构的第二节点位置处显示当前输入或移入的组件。

输出单元405，用于响应于确定目标组件不支持嵌套当前输入或移入的组件，保持页面树状结构中的组件位置关系不变并输出用于指示组件嵌套错误的提示信息。

标注单元406，用于在页面树状结构的第二节点位置处显示当前输入或移入的组件之后，基于当前输入或移入的组件的类型属性信息，确定当前输入或移入的组件是否支持嵌套其他组件。响应于确定当前输入或移入的组件不支持嵌套其他组件，标注单元406在页面树状结构中使用特定标记对当前输入或移入的组件对应的节点进行标注，以提示当前输入或移入的组件不支持嵌套其他组件。

生成单元407，用于基于页面树状结构，生成用于呈现组件的页面；其中当前输入或移入的组件在页面上的显示位置，是页面上与页面树状结构的第一节点位置相对应的显示位置。

图5是本公开一示例性实施例提供的电子设备的结构。该电子设备可以是第一设备和第二设备中的任一个或两者、或与它们独立的单机设备，该单机设备可以与第一设备和第二设备进行通信，以从它们接收所采集到的输入信号。图5示出了根据本公开实施例的电子设备的框图。如图5所示，电子设备包括一个或多个处理器510和存储器520。

处理器510可以是中央处理单元（CPU）或者具有数据处理能力和/或指令执行能力的其他形式的处理单元，并且可以控制电子设备中的其他组件以执行期望的功能。

存储器520可以包括一个或多个计算机程序产品，计算机程序产品可以包括各种形式的计算机可读存储介质，例如易失性存储器和/或非易失性存储器。所述易失性存储器例如可以包括随机存取存储器（RAM）和/或高速缓冲存储器（cache）等。所述非易失性存储器例如可以包括只读存储器（ROM）、硬盘、闪存等。在所述计算机可读存储介质上可以存储一个或多个计算机程序指令，处理器510可以运行所述程序指令，以实现上文所述的本公开的各个实施例的软件程序的基于组件的页面树状结构处理方法以及/或者其他期望的功能。在一个示例中，电子设备还可以包括：输入装置530和输出装置540，这些组件通过总线系统和/或其他形式的连接机构（未示出）互连。

此外，该输入装置530还可以包括例如键盘、鼠标等等。

该输出装置540可以向外部输出各种信息。该输出设备540可以包括例如显示器、扬声器、打印机、以及通信网络及其所连接的远程输出设备等等。

当然，为了简化，图5中仅示出了该电子设备中与本公开有关的组件中的一些，省略了诸如总线、输入/输出接口等等的组件。除此之外，根据具体应用情况，电子设备还可以包括任何其他适当的组件。

示例性计算机程序产品和计算机可读存储介质除了上述方法和设备以外，本公开的实施例还可以是计算机程序产品，其包括计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本说明书上述“示例性方法”部分中描述的根据本公开各种实施例的基于组件的页面树状结构处理方法中的步骤。

所述计算机程序产品可以以一种或多种程序设计语言的任意组合来编写用于执行本公开实施例操作的程序代码，所述程序设计语言包括面向对象的程序设计语言，诸如Java、C++等，还包括常规的过程式程序设计语言，诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。

此外，本公开的实施例还可以是计算机可读存储介质，其上存储有计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本说明书上述“示例性方法”部分中描述的根据本公开各种实施例的基于组件的页面树状结构处理方法中的步骤。

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

以上结合具体实施例描述了本公开的基本原理，但是，需要指出的是，在本公开中提及的优点、优势、效果等仅是示例而非限制，不能认为这些优点、优势、效果等是本公开的各个实施例必须具备的。另外，上述公开的具体细节仅是为了示例的作用和便于理解的作用，而非限制，上述细节并不限制本公开为必须采用上述具体的细节来实现。

本说明书中各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似的部分相互参见即可。对于系统实施例而言，由于其与方法实施例基本对应，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本公开中涉及的器件、装置、设备、系统的方框图仅作为例示性的例子并且不意图要求或暗示必须按照方框图示出的方式进行连接、布置、配置。如本领域技术人员将认识到的，可以按任意方式连接、布置、配置这些器件、装置、设备、系统。诸如“包括”、“包含”、“具有”等等的词语是开放性词汇，指“包括但不限于”，且可与其互换使用。这里所使用的词汇“或”和“和”指词汇“和/或”，且可与其互换使用，除非上下文明确指示不是如此。这里所使用的词汇“诸如”指词组“诸如但不限于”，且可与其互换使用。

可能以许多方式来实现本公开的方法和装置。例如，可通过软件、硬件、固件或者软件、硬件、固件的任何组合来实现本公开的方法和装置。用于所述方法的步骤的上述顺序仅是为了进行说明，本公开的方法的步骤不限于以上具体描述的顺序，除非以其它方式特别说明。此外，在一些实施例中，还可将本公开实施为记录在记录介质中的程序，这些程序包括用于实现根据本公开的方法的机器可读指令。因而，本公开还覆盖存储用于执行根据本公开的方法的程序的记录介质。

还需要指出的是，在本公开的装置、设备和方法中，各部件或各步骤是可以分解和/或重新组合的。这些分解和/或重新组合应视为本公开的等效方案。提供所公开的方面的以上描述以使本领域的任何技术人员能够做出或者使用本公开。对这些方面的各种修改对于本领域技术人员而言是非常显而易见的，并且在此定义的一般原理可以应用于其他方面而不脱离本公开的范围。因此，本公开不意图被限制到在此示出的方面，而是按照与在此公开的原理和新颖的特征一致的最宽范围。

为了例示和描述的目的已经给出了以上描述。此外，此描述不意图将本公开的实施例限制到在此公开的形式。尽管以上已经讨论了多个示例方面和实施例，但是本领域技术人员将认识到其某些变型、修改、改变、添加和子组合。

Claims (12)

1.一种基于组件的页面树状结构处理方法，包括：

响应于检测到用于表示页面中组件层级关系的页面树状结构中存在组件输入或组件位置移动，获取当前输入或移入的组件的目标位置信息和类型属性信息；

基于所述目标位置信息，确定当前输入或移入的组件在所述页面树状结构中的第一节点位置；

响应于检测到当前输入或移入的组件的第一节点位置与所述页面树状结构中的至少一个组件中的目标组件的第二节点位置之间属于嵌套位置关系，基于预先设定的至少一个嵌套规则判断函数以及当前输入或移入的组件的类型属性信息和所述目标组件的类型属性信息，确定所述目标组件是否支持嵌套当前输入或移入的组件；以及

响应于确定所述目标组件支持嵌套当前输入或移入的组件，在所述页面树状结构的第二节点位置处显示所述当前输入或移入的组件。

2.根据权利要求1所述的方法，还包括：

响应于确定所述目标组件不支持嵌套当前输入或移入的组件，保持所述页面树状结构中的组件位置关系不变并输出用于指示组件嵌套错误的提示信息。

3.根据权利要求1所述的方法，其中，所述目标位置信息包括当前输入或移入的组件在所述页面树状结构中的节点位置。

4.根据权利要求1所述的方法，还包括：在所述页面树状结构的第二节点位置处显示所述当前输入或移入的组件之后，

基于当前输入或移入的组件的类型属性信息，确定当前输入或移入的组件是否支持嵌套其他组件；

响应于确定当前输入或移入的组件不支持嵌套其他组件，在所述页面树状结构中使用特定标记对当前输入或移入的组件对应的节点进行标注，以提示当前输入或移入的组件不支持嵌套其他组件。

5.根据权利要求1所述的方法，其中，获取当前输入的组件的目标位置信息和类型属性信息，包括：

针对组件库中的每个组件，实时检测是否存在与组件输入相关的用户操作；

响应于检测到存在与组件输入相关的用户操作，且该用户操作为将组件输入到所述页面树状结构中，基于该用户操作确定当前输入的组件的选定节点位置；

基于所述选定节点位置，获取当前输入的组件的目标位置信息；

和/或，

基于所述组件库的配置文件确定当前输入的组件的类型属性信息。

6.根据权利要求1所述的方法，其中，获取当前移入的组件的目标位置信息和类型属性信息，包括：

针对所述页面树状结构中的每个组件，实时检测是否存在与组件移动相关的用户操作；

响应于检测到存在与组件移动相关的用户操作，且该用户操作为将组件从所述页面树状结构中的一个位置移动到所述页面树状结构中的另一个位置，基于该用户操作确定当前移入的组件的选定节点位置；

基于所述选定节点位置，获取当前移入的组件的目标位置信息；

和/或，

基于所述组件库的配置文件确定当前移入的组件的类型属性信息。

7.根据权利要求1所述的方法，其中，基于预先设定的至少一个嵌套规则判断函数以及当前输入或移入的组件的类型属性信息和所述目标组件的类型属性信息，确定所述目标组件是否支持嵌套当前输入或移入的组件，包括：

利用所述至少一个嵌套规则判断函数中的每个嵌套规则判断函数，并基于当前输入或移入的组件的类型属性信息和所述目标组件的类型属性信息，确定当前输入或移入的组件与所述目标组件之间的嵌套判断结果；

响应于每个嵌套规则判断函数的嵌套判断结果均表示支持嵌套，确定所述目标组件支持嵌套当前输入或移入的组件。

8.根据权利要求1所述的方法，其中，基于预先设定的至少一个嵌套规则判断函数以及当前输入或移入的组件的类型属性信息和所述目标组件的类型属性信息，确定所述目标组件是否支持嵌套当前输入或移入的组件，包括：

基于嵌套数目判断函数，确定所述目标组件嵌套的组件数目是否超出指定的阈值；

响应于确定所述目标组件嵌套的组件数目未超出指定的阈值，基于嵌套逻辑判断函数，确定所述目标组件本身是否支持嵌套其他组件；

响应于确定所述目标组件本身支持嵌套其他组件，基于嵌套关系判断函数以及当前输入或移入的组件的类型属性信息和所述目标组件的类型属性信息，确定当前输入或移入的组件是否是所述目标组件支持的嵌套类型；

响应于确定当前输入或移入的组件是所述目标组件支持的嵌套类型，确定所述目标组件支持嵌套当前输入或移入的组件。

9.根据权利要求1所述的方法，在所述页面树状结构的第二节点位置处显示所述当前输入或移入的组件之后，还包括：

基于所述页面树状结构，生成用于呈现组件的页面；

其中所述当前输入或移入的组件在所述页面上的显示位置，是所述页面上与所述页面树状结构的第一节点位置相对应的显示位置。

10.一种基于组件的页面树状结构处理装置，包括：

获取单元，用于响应于检测到用于表示页面中组件层级关系的页面树状结构中存在组件输入或组件位置移动，获取当前输入或移入的组件的目标位置信息和类型属性信息；

第一确定单元，用于基于所述目标位置信息，确定当前输入或移入的组件在所述页面树状结构中的第一节点位置；

第二确定单元，用于响应于检测到当前输入或移入的组件的第一节点位置与所述页面树状结构中的至少一个组件中的目标组件的第二节点位置之间属于嵌套位置关系，基于预先设定的至少一个嵌套规则判断函数以及当前输入或移入的组件的类型属性信息和所述目标组件的类型属性信息，确定所述目标组件是否支持嵌套当前输入或移入的组件；以及

显示单元，用于响应于确定所述目标组件支持嵌套当前输入或移入的组件，在所述页面树状结构的第二节点位置处显示所述当前输入或移入的组件。

11.一种计算机可读存储介质，其特征在于，所述存储介质存储有计算机程序，所述计算机程序用于执行权利要求1-9中任一项所述的方法。

12.一种电子设备，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述指令以实现权利要求1-9中任一项所述的方法。

Images