CN112579084A - 一种页面的拼装方法及装置 - Google Patents

Abstract

本发明公开了一种页面的拼装方法及装置，预先构建元素组件库，该方法包括：接收页面拼接请求，获取所述页面拼接请求中的各个目标元素组件和对应的组件数量；判断是否存在与所述各个目标元素组件和对应的组件数量对应目标预设组件模板；若否，在所述元素组件库中选取所述各个目标元素组件，基于对应的组件数量将所述各个目标元素组件在预设容器中进行拼装，得到初始页面；将所述初始页面发送给对应的前端设备。上述过程，基于页面拼接请求，在元素组件库中选取目标元素组件，基于对应的组件数量将所述各个目标元素组件在预设容器中进行拼装，得到初始页面，可以实现页面依据需求进行灵活配置。

Description

一种页面的拼装方法及装置

技术领域

本发明涉及数据处理技术领域，尤其涉及一种页面的拼装方法及装置。

背景技术

随着技术的发展，页面拼装的复杂度也越来越高，现有的页面拼装是基于需求的，基于具体的需求生成对应的页面，每一种需求对应一个页面，即使针对需求进行一个小小的改动或者一个小功能的增加可能会引起页面拼装整体修改的情况。

发明人对现有的页面拼装过程进行研究发现，页面展示单一化，不能实现依据需求灵活配置。

发明内容

有鉴于此，本发明提供了一种页面的拼装方法及装置，用以解决现有的页面拼装过程进行研究发现，页面展示单一化，不能实现依据需求灵活配置的问题。具体方案如下：

一种页面的拼装方法，预先构建元素组件库，包括：

接收页面拼接请求，获取所述页面拼接请求中的各个目标元素组件和对应的组件数量；

判断是否存在与所述各个目标元素组件和对应的组件数量对应目标预设组件模板；

若否，在所述元素组件库中选取所述各个目标元素组件，基于对应的组件数量将所述各个目标元素组件在预设容器中进行拼装，得到初始页面；

将所述初始页面发送给对应的前端设备。

上述的方法，可选的，还包括：

若是，在所述元素组件库中选取所述各个目标元素组件，基于对应的组件数量将所述各个目标元素组件添加到所述目标预设组件模板中，得到初始页面。

上述的方法，可选的，基于对应的组件数量将所述各个目标元素组件添加到所述目标预设组件模板中之前还包括：

获取所述目标预设组件模板中各个待添加元素组件和对应的待添加组件数量；

将所述各个待添加元素组件和对应的待添加组件数量与所述各个目标元素组件和对应的组件数量进行对比；

基于对比结果，对所述目标预设组件模板中的对应待添加元素组件进行删除和/或添加操作。

上述的方法，可选的，还包括：

获取所述初始页面中各个目标元素组件的目标位置信息和初始位置信息；

采用拖拽或者文件命名调整的方式，将所述初始位置位置信息中的横向距离调整为所述目标位置信息的横向距离，将所述初始位置信息的纵向距离调整为所述目标位置信息的纵向距离，和/或，所述各个目标元素组件是否居中，和/或，所述初始页面中的导航栏是否满足预设的对齐方式。

上述的方法，可选的，还包括：

判断所述预设容器是否可以覆盖所述各个目标元素组件；

若否，对所述预设容器的尺寸进行调整。

一种页面的拼装装置，预先构建元素组件库，包括：

第一获取模块，用于接收页面拼接请求，获取所述页面拼接请求中的各个目标元素组件和对应的组件数量；

第一判断模块，用于判断是否存在与所述各个目标元素组件和对应的组件数量对应目标预设组件模板；

拼装模块，用于若否，在所述元素组件库中选取所述各个目标元素组件，基于对应的组件数量将所述各个目标元素组件在预设容器中进行拼装，得到初始页面；

发送模块，用于将所述初始页面发送给对应的前端设备。

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

添加模块，用于若是，在所述元素组件库中选取所述各个目标元素组件，基于对应的组件数量将所述各个目标元素组件添加到所述目标预设组件模板中，得到初始页面。

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

第二获取模块，用于获取所述目标预设组件模板中各个待添加元素组件和对应的待添加组件数量；

对比模块，用于将所述各个待添加元素组件和对应的待添加组件数量与所述各个目标元素组件和对应的组件数量进行对比；

处理模块，用于基于对比结果，对所述目标预设组件模板中的对应待添加元素组件进行删除和/或添加操作。

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

第三获取模块，用于获取所述初始页面中各个目标元素组件的目标位置信息和初始位置信息；

调整模块，用于采用拖拽或者文件命名调整的方式，将所述初始位置位置信息中的横向距离调整为所述目标位置信息的横向距离，将所述初始位置信息的纵向距离调整为所述目标位置信息的纵向距离，和/或，所述各个目标元素组件是否居中，和/或，所述初始页面中的导航栏是否满足预设的对齐方式。

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

第二判断模块，用于判断所述预设容器是否可以覆盖所述各个目标元素组件；

调整模块，用于若否，对所述预设容器的尺寸进行调整。

与现有技术相比，本发明包括以下优点：

本发明公开了一种页面的拼装方法及装置，预先构建元素组件库，该方法包括：接收页面拼接请求，获取所述页面拼接请求中的各个目标元素组件和对应的组件数量；判断是否存在与所述各个目标元素组件和对应的组件数量对应目标预设组件模板；若否，在所述元素组件库中选取所述各个目标元素组件，基于对应的组件数量将所述各个目标元素组件在预设容器中进行拼装，得到初始页面；将所述初始页面发送给对应的前端设备。上述过程，基于页面拼接请求，在元素组件库中选取目标元素组件，基于对应的组件数量将所述各个目标元素组件在预设容器中进行拼装，得到初始页面，可以实现页面依据需求进行灵活配置。

附图说明

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

图1为本申请实施例公开的预设组件模板示意图；

图2为本申请实施例公开的一种页面的拼装方法流程图；

图3为本申请实施例公开的一种智能拼接可视化页面的拼接方法示意图；

图4为本申请实施例公开的一种智能拼接可视化页面的拼接方法又一示意图；

图5为本申请实施例公开的一种动态开发页面的示意图图；

图6为本申请实施例公开的一种智能拼接可视化页面的拼接装置结构框图。

具体实施方式

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

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

本发明公开了一种页面的拼装方法及装置，应用于对页面拼装的过程中，现有技术中，针对需求进行一个小小的改动或者一个小功能的增加可能会引起页面拼装整体修改的情况，本发明提供了一种页面的拼装方法用于解决上述方法，所述拼装方法的执行主体可以为处理器或者控制器，本发明实施例中对执行主体的具体存在形式不进行限定，针对所述拼装方法，预先构建元素组件库，其中，所述元素组件库的包括：各个元素组件和预设数量的预设组件模板，所述各个元素组件将设计元素基于功能进行模块化划分，所述各个元素组件包括：ICON类组件、按钮类组件、列表类组件和卡片类组件。将所述各个元素组件进行分组划分并打包处理后存储到所述元素组件库中。进一步的，针对历史页面进行类型提炼，将典型的元素组件进行拼接得到预设组件模板，或者基于经验设置预设组件模板，其中，所述预设数量可以基于经验或者具体情况进行设定，本发明实施例中，对所述预设数量的具体取值不进行限定，优选的，每间隔预设时长或者其它更新条件，对所述元素组件库进行更新，所述预设组件模板的示意图如图1所示，模板1、模板2、模板3、模板4、模板5、模板6、模板7、模板8和模板9中的各个模板有容器和对应的元素组件组成。基于所述元素组件库，所述页面拼装方法的执行流程如图2所示，包括步骤：

S101、接收页面拼接请求，获取所述页面拼接请求中的各个目标元素组件和对应的组件数量；

本发明实施例中，在接收到页面拼接请求的情况下，解析所述拼接请求，在所述拼接请求的指定位置处或者预设标识处获取所述拼接请求中的各个目标元素组件和每一个目标元素组件的数量。优选的，所述拼接请求中还包括每一个目标元素组件的位置信息。

S102、判断是否存在与所述各个目标元素组件和对应的组件数量对应目标预设组件模板；

本发明实施例中，获取所述预设数量的预设组件模板中各个待添加元素组件和每一个待添加元素组件待添加组件数量，针对所述各个待添加元素组件和对应的待添加组件数量判断是否存在与所述各个目标元素组件和对应的组件数量对应目标预设组件模板，判断的原则可以基于经验或者具体情况进行设定，例如，所述判断规则可以为预设组件模板中模板待添加元素组件与所述目标元素组件的匹配，则判定存对应的目标预设组件模板，或者为所述判断规则可以为预设组件模板中模板待添加元素组件与所述目标元素组件的匹配且对应的待添加元素组件数量满足对应的数量阈值，则判定存对应的目标预设组件模板，本发明实施例中，对具体的判定规则不进行限定。

进一步的，将所述各个待添加元素组件和对应的待添加元素组件数量与所述各个目标元素组件和对应的组件数量进行对比，针对每一个待添加元素组件和其对应的待添加元素组件数量，判断是否满足与其对应的目标元素组件的组件数量，若待添加元素组件数量与对应组件数量相等，则不进行调整，若待添加元素组件数量小于对应组件数量，则向所述目标预设组件模板中添加对应数量的对应目标元素组件，若待添加元素组件数量大于对应组件数量，泽删除对应数量的对应目标元素组件，其中，所述对应数量为待添加元素组件数量与对应组件数量差值的绝对值。

S103、在所述元素组件库中选取所述各个目标元素组件，基于对应的组件数量将所述各个目标元素组件在预设容器中进行拼装，得到初始页面；

本发明实施例中，在不存在与所述各个目标元素组件和对应的组件数量对应目标预设组件模板的情况下，获取所述预设容器，其中，所述预设容器的尺寸已经确定，基于所述各个目标元素组件的标识，在所述元素组件库中选取所述各个目标元素组件，其中，所述标识可以为目标元素组件的名称、编号或者其它优选标识，针对每一个目标元素组件和其对应的组件数量，在所述预设容器中，基于对应的组件数量，将所述各个目标元素组件添加到所述预设容器中进行拼接，得到初始页面。

进一步的，所述预设容器的尺寸是预先设定的，具体的尺寸可以基于经验或者具体情况进行设定，本发明实施例中不进行限定，在将所述各个目标元素组件基于所述预设容器拼接过程中，优选的，判断所述预设容器是否可以完整覆盖所述各个目标元素组件，若所述预设容器不可以完整覆盖所述各个目标元素组件，对所述预设容器的尺寸进行调整，调整的原则为保证所述预设容器可以完整覆盖所述各个目标元素组件。

S104、将所述初始页面发送给对应的前端设备。

本发明实施例中，将拼接完成的初始页面发送给对应的前端设备，进行前端开发。

本发明公开了一种页面的拼装方法，预先构建元素组件库，该方法包括：接收页面拼接请求，获取所述页面拼接请求中的各个目标元素组件和对应的组件数量；判断是否存在与所述各个目标元素组件和对应的组件数量对应目标预设组件模板；若否，在所述元素组件库中选取所述各个目标元素组件，基于对应的组件数量将所述各个目标元素组件在预设容器中进行拼装，得到初始页面；将所述初始页面发送给对应的前端设备。上述过程，基于页面拼接请求，在元素组件库中选取目标元素组件，基于对应的组件数量将所述各个目标元素组件在预设容器中进行拼装，得到初始页面，可以实现页面依据需求进行灵活配置。

本发明实施例中，上述的拼接方法中，针对初始页面中容器和元素组件的位置关系，会设置一个目标位置关系，其中，所述目标位置关系可以是在所述拼接请求中设定的也可以是预先设定的。在得到初始页面以后，获取所述初始页面中各个目标元素组件的目标位置信息和初始位置信息；采用拖拽或者文件命名调整的方式，将所述初始位置位置信息中的横向距离调整为所述目标位置信息的横向距离，将所述初始位置信息的纵向距离调整为所述目标位置信息的纵向距离，和/或，所述各个目标元素组件是否居中，和/或，所述初始页面中的导航栏是否满足预设的对齐方式。进一步的，上述调整如果仍不满足需求，提示进行手动调整。例如，业务需要一个信息列表需要整体通栏并且左对齐，但自动适配的页面为卡片瀑布流形式则不符合业务需求，需要进行手动调整完成页面设计。

本发明实施例中，针对上述的拼接方法进行举例，拼接过程可以包括智能拼接可视化页面和动态开发页面，其中，针对智能拼接可视化页面的拼接过程，自由拼接形式1如图3所示，设容器内组件为a1，a2，a3，a4，a5，应需求添加a1+a2+a3+n*a4+a3+n*a5即可生成产品设计页面，自由拼接形式2如图4所示，设容器内组建为a1，a2，a3，b1，b2，a4，a5应需求添加a1+a2+a3+b1+b2+a4+n*a5即可生成产品设计页面，动态开发页面的示意图如图5所示，通过点击的方式勾选2.0+3.0-0821冲刺12、2.0+3.0-0903冲刺13、2.0+3.0-0915冲刺14、2.0+3.0-1012冲刺15/2.0-0422冲刺2、2.0-0427冲刺3、2.0-0510冲刺5、2.0-0602冲刺6、2.0-0605冲刺6和2.0-0609冲刺6中的至少一项，生成可视化页面，动态开发相较于智能拼接更加自动化，智能拼接可一边预览一边进行页面调整，动态开发需整体完成页面拼接后才可进行预览。

本发明实施例中，上述的拼接方法中，将设计元素模块化分，以乐高组件形式拼装展现。灵活高效的进行组件装配。可对新业务，新场景进行快速需求对接和标准化平台产出。改变人力分配方式及新的工作模式，动态化解决设计需求，对业务实现价值最大化。

基于上述的一种页面拼装方法，本发明实施例中还提供了一种页面拼装装置，所述拼装装置中，预先构建元素组件库，其结构框图如图6所示，包括：

第一获取模块201、第一判断模块202、拼装模块203和发送模块204。

其中，

所述第一获取模块201，用于接收页面拼接请求，获取所述页面拼接请求中的各个目标元素组件和对应的组件数量；

所述第一判断模块202，用于判断是否存在与所述各个目标元素组件和对应的组件数量对应目标预设组件模板；

所述拼装模块203，用于若否，在所述元素组件库中选取所述各个目标元素组件，基于对应的组件数量将所述各个目标元素组件在预设容器中进行拼装，得到初始页面；

所述发送模块204，用于将所述初始页面发送给对应的前端设备。

本发明公开了一种页面的拼装装置，预先构建元素组件库，该方法包括：接收页面拼接请求，获取所述页面拼接请求中的各个目标元素组件和对应的组件数量；判断是否存在与所述各个目标元素组件和对应的组件数量对应目标预设组件模板；若否，在所述元素组件库中选取所述各个目标元素组件，基于对应的组件数量将所述各个目标元素组件在预设容器中进行拼装，得到初始页面；将所述初始页面发送给对应的前端设备。上述过程，基于页面拼接请求，在元素组件库中选取目标元素组件，基于对应的组件数量将所述各个目标元素组件在预设容器中进行拼装，得到初始页面，可以实现页面依据需求进行灵活配置。

本发明实施例中，所述拼装装置还包括：添加模块205。

其中，

所述添加模块205，用于若是，在所述元素组件库中选取所述各个目标元素组件，基于对应的组件数量将所述各个目标元素组件添加到所述目标预设组件模板中，得到初始页面。

本发明实施例中，所述拼装装置还包括：

第二获取模块206、对比模块207和处理模块208。

其中，

所述第二获取模块206，用于获取所述目标预设组件模板中各个待添加元素组件和对应的待添加组件数量；

所述对比模块207，用于将所述各个待添加元素组件和对应的待添加组件数量与所述各个目标元素组件和对应的组件数量进行对比；

所述处理模块208，用于基于对比结果，对所述目标预设组件模板中的对应待添加元素组件进行删除和/或添加操作。

本发明实施例中，所述拼装装置还包括：

第三获取模块209和调整模块210。

其中，

所述第三获取模块209，用于获取所述初始页面中各个目标元素组件的目标位置信息和初始位置信息；

所述调整模块210，用于采用拖拽或者文件命名调整的方式，将所述初始位置位置信息中的横向距离调整为所述目标位置信息的横向距离，将所述初始位置信息的纵向距离调整为所述目标位置信息的纵向距离，和/或，所述各个目标元素组件是否居中，和/或，所述初始页面中的导航栏是否满足预设的对齐方式。

本发明实施例中，所述拼装装置还包括：

第二判断模块211和调整模块212。

其中，

所述第二判断模块211，用于判断所述预设容器是否可以覆盖所述各个目标元素组件；

所述调整模块212，用于若否，对所述预设容器的尺寸进行调整。

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

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本发明时可以把各单元的功能在同一个或多个软件和/或硬件中实现。

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

以上对本发明所提供的一种页面的拼装方法及装置进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (10)

1.一种页面的拼装方法，其特征在于，预先构建元素组件库，包括：

接收页面拼接请求，获取所述页面拼接请求中的各个目标元素组件和对应的组件数量；

判断是否存在与所述各个目标元素组件和对应的组件数量对应目标预设组件模板；

若否，在所述元素组件库中选取所述各个目标元素组件，基于对应的组件数量将所述各个目标元素组件在预设容器中进行拼装，得到初始页面；

将所述初始页面发送给对应的前端设备。

2.根据权利要求1所述的方法，其特征在于，还包括：

若是，在所述元素组件库中选取所述各个目标元素组件，基于对应的组件数量将所述各个目标元素组件添加到所述目标预设组件模板中，得到初始页面。

3.根据权利要求2所述的方法，其特征在于，基于对应的组件数量将所述各个目标元素组件添加到所述目标预设组件模板中之前还包括：

获取所述目标预设组件模板中各个待添加元素组件和对应的待添加组件数量；

将所述各个待添加元素组件和对应的待添加组件数量与所述各个目标元素组件和对应的组件数量进行对比；

基于对比结果，对所述目标预设组件模板中的对应待添加元素组件进行删除和/或添加操作。

4.根据权利要求2所述的方法，其特征在于，还包括：

获取所述初始页面中各个目标元素组件的目标位置信息和初始位置信息；

采用拖拽或者文件命名调整的方式，将所述初始位置位置信息中的横向距离调整为所述目标位置信息的横向距离，将所述初始位置信息的纵向距离调整为所述目标位置信息的纵向距离，和/或，所述各个目标元素组件是否居中，和/或，所述初始页面中的导航栏是否满足预设的对齐方式。

5.根据权利要求1所述的方法，其特征在于，还包括：

判断所述预设容器是否可以覆盖所述各个目标元素组件；

若否，对所述预设容器的尺寸进行调整。

6.一种页面的拼装装置，其特征在于，预先构建元素组件库，包括：

第一获取模块，用于接收页面拼接请求，获取所述页面拼接请求中的各个目标元素组件和对应的组件数量；

第一判断模块，用于判断是否存在与所述各个目标元素组件和对应的组件数量对应目标预设组件模板；

拼装模块，用于若否，在所述元素组件库中选取所述各个目标元素组件，基于对应的组件数量将所述各个目标元素组件在预设容器中进行拼装，得到初始页面；

发送模块，用于将所述初始页面发送给对应的前端设备。

7.根据权利要求6所述的装置，其特征在于，还包括：

添加模块，用于若是，在所述元素组件库中选取所述各个目标元素组件，基于对应的组件数量将所述各个目标元素组件添加到所述目标预设组件模板中，得到初始页面。

8.根据权利要求7所述的装置，其特征在于，所述拼装装置还包括：

第二获取模块，用于获取所述目标预设组件模板中各个待添加元素组件和对应的待添加组件数量；

对比模块，用于将所述各个待添加元素组件和对应的待添加组件数量与所述各个目标元素组件和对应的组件数量进行对比；

处理模块，用于基于对比结果，对所述目标预设组件模板中的对应待添加元素组件进行删除和/或添加操作。

9.根据权利要求7所述的装置，其特征在于，还包括：

第三获取模块，用于获取所述初始页面中各个目标元素组件的目标位置信息和初始位置信息；

调整模块，用于采用拖拽或者文件命名调整的方式，将所述初始位置位置信息中的横向距离调整为所述目标位置信息的横向距离，将所述初始位置信息的纵向距离调整为所述目标位置信息的纵向距离，和/或，所述各个目标元素组件是否居中，和/或，所述初始页面中的导航栏是否满足预设的对齐方式。

10.根据权利要求6所述的装置，其特征在于，还包括：

第二判断模块，用于判断所述预设容器是否可以覆盖所述各个目标元素组件；

调整模块，用于若否，对所述预设容器的尺寸进行调整。

Images