CN115202541B - 页面生成方法、装置、设备、存储介质及程序产品 - Google Patents

Abstract

本申请提供一种页面生成方法、装置、设备、存储介质及程序产品，该页面生成方法包括：响应于用户的组件添加指令，将至少一个预设组件添加至所述组件添加指令对应的页面区域；响应于用户关于所述预设组件的组件切割指令，将所述预设组件切割为至少两个分组件；根据所述分组件的组件属性，生成前端页面，实现了可视化、低代码页面设计，且通过支持组件切割操作，提高了页面设计的灵活性，使得用户可以快速得到尺寸多样化的组件，提高了页面设计的效率。

Description

页面生成方法、装置、设备、存储介质及程序产品

技术领域

本申请涉及页面设计技术领域，尤其涉及一种页面生成方法、装置、设备、存储介质及程序产品。

背景技术

为了降低页面设计的复杂程度以及提高页面设计的可视化程度，低代码环境下的页面可视化设计方式得到了广泛地应用。

在低代码环境下，进行页面设计时，通过在页面区域内添加页面设计平台提供的组件或模板，进行页面在线布局，从而生成所需的页面。

页面设计平台，往往仅允许用户添加、删除组件以及设置组件的属性，如尺寸、背景颜色、标题等，页面设计灵活性较差，为了设计复杂结构的页面，用户往往需要编写部分组件的CSS(Cascading Style Sheets，层叠样式表)代码，导致页面设计耗时、效率低下。

发明内容

本申请提供一种页面生成方法、装置、设备、存储介质及程序产品，通过提供灵活的组件布局方式，提高了可视化页面设计的灵活性和效率。

第一方面，本申请提供一种页面生成方法，该方法包括：

响应于用户的组件添加指令，将至少一个预设组件添加至所述组件添加指令对应的页面区域；

响应于用户关于所述预设组件的组件切割指令，将所述预设组件切割为至少两个分组件；

根据所述分组件的组件属性，生成页面。

第二方面，本申请提供一种页面生成装置，该装置包括：

组件添加模块，用于响应于用户的组件添加指令，将至少一个预设组件添加至所述组件添加指令对应的页面区域；

组件切割模块，用于响应于用户关于所述预设组件的组件切割指令，将所述预设组件切割为至少两个分组件；

页面生成模块，用于根据用户配置的所述分组件的组件属性，生成页面。

第三方面，本申请提供一种页面生成设备，包括：

处理器，以及与所述处理器通信连接的存储器；所述存储器存储计算机执行指令；所述处理器执行所述存储器存储的计算机执行指令，以实现本申请第一方面提供的方法。

第四方面，本申请提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，所述计算机执行指令被处理器执行时用于实现本申请第一方面提供的方法。

第五方面，本申请提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现本申请第一方面提供的方法。

本申请提供的页面生成方法、装置、设备、存储介质及程序产品，当用户基于可视化页面设计平台进行页面设计时，用户可以通过组件添加指令，在页面设定区域添加组件库中的原始组件，用户还可以通过组件切割指令对页面当前布局的组件，如已添加的组件、切割后得到的组件等，进行切割，从而将一个组件，即预设组件，切割为多个分组件，使得用户无需通过重复添加组件的方式，快速得到多个组件，从而提高了组件的布局的效率和灵活性，在组件布局完成之后或组件布局过程中，可以基于所配置的组件属性，生成用于展示或使用的前端页面。通过组件切割指令，提供了一种通过切割快速布局页面组件的方式，提高了页面设计的效率。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。

图1为本申请实施例提供的一种页面设计器操作界面的示意图；

图2为本申请实施例提供的一种页面生成方法的流程示意图；

图3为本申请一个示实施例提供的添加组件过程的示意图；

图4为本申请一个实施例中提供的组件切割过程的示意图；

图5为本申请图2所示实施例中步骤S202的流程示意图；

图6为本申请实施例提供一种行内组件的切割方式的示意图；

图7为本申请实施例提供的另一种页面生成方法的流程示意图；

图8为本申请图7所示实施例中包裹组件及其内分组件的排布示意图；

图9为本申请图7所示实施例中提供的新增组件添加过程的示意图；

图10为本申请实施例提供的一种页面生成设备的结构示意图。

通过上述附图，已示出本申请明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本申请构思的范围，而是通过参考特定实施例为本领域技术人员说明本申请的概念。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

首先，对本申请涉及的名词术语进行解释：

组件：页面中的元素，一个页面由多个元素组成。

块级元素：Block，又称为块元素，通常在页面中独占一行或，其display属性值为block。不同的块级元素布局在页面的不同行。如标题、段落、导航栏等元素

行内块级元素：在页面中不会独占一行的元素，其display属性值为inline-block，如变量var、锚a、按钮button、输入框input等元素。一个行内块级元素可以跟在其他行内块级元素后面，在尺寸允许的情况下，页面的一行可以存放多个行内块级元素。

为了简化页面设计以及提高页面设计的可视化程度，基于页面设计器的页面设计方式受到了广泛地应用。用户可以基于页面设计器提供的组件或模板，进行页面设计，从而大大减少了页面设计时所需编辑的代码量，设置实现无代码页面设计。

图1为本申请实施例提供的一种页面设计器操作界面的示意图，如图1所示，页面设计器的操作界面通常包括三大部分，组件列表、画布和属性配置三大区域，用户可以通过将组件列表中的组件拖动至画布的方式，实现页面组件布局，如图1中的标题、输入框、列表、按钮和通用组件等组件。

在添加组件之后，可以通过属性配置，配置组件的相关属性，以输入框组件为例，其可配置的属性可以包括输入内容、宽度和高度。在所添加的各个组件的属性配置完毕之后，便得到用户设计的页面，通过发布所设计的页面，可以将该页面投入使用。在页面设计过程中，用户还可以进行页面预览，从而基于预览结果进行组件的调整。

现有的页面设计器，往往仅支持用户添加、删除、拖动组件，当页面包括组件较多时，用户需要通过不断添加组件的方式，在画布布局新的组件，以及为新的组件设置高度、宽度等属性，步骤繁琐、任务量大，导致页面设计效率低下。

为了提高页面设计的效率，本申请提供了一种组件布局灵活的页面生成方法，使得用户在添加预设组件之后，可通过预设组件切割指令将所添加的组件切割为多个分组件，从而无需重复添加多个组件，提高了组件布局的效率和便捷性，从而在为所添加的组件配置相应的组件属性之后，便得到一个设计好的前端页面。

下面以具体地实施例对本申请的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本申请的实施例进行描述。

图2为本申请实施例提供的一种页面生成方法的流程示意图，该方法应用于页面生成设备，该页面生成设备可以为任意一种终端设备，如页面生成终端，其形式可以为手机、平板电脑、笔记本等，该终端设备可以通过页面设计器或页面设计平台执行本实施例提供的页面生成方法。该页面设计器可以为在线页面设计器，或者可以为一个页面设计应用程序，本申请对页面设计器的实现形式不进行限定。

如图2所示，该页面生成方法包括以下步骤：

步骤S201，响应于用户的组件添加指令，将至少一个预设组件添加至所述组件添加指令对应的页面区域。

其中，预设组件为组件库中的任意一个可以进行切割的组件。页面区域为所设计的页面的部分或全部区域。

用户还可以通过下发相应的组件添加指令，将不可切割的组件添加至画布对应的区域。其中，画布为在页面设计时，可以用于进行组件布局的区域。

组件库中可以包括多种组件，该组件可以涵盖页面设计所需的各种类型的元素，如标题h1～h6、段落p、通用块div、列表ol或ul、输入框input、按钮button等。

在一个实施例中，组件库中的组件按照层级由高到低可以依次分为：页面组件、章组件、节组件、段组件、句组件和词组件，n+1级组件可以作为n级组件的父组件，n级组件则可以作为n+1级组件的子组件，父组件内可以嵌套多个子组件。按照display属性，组件可以分为块级组件和行内组件，块级组件可以包括各个块级元素对应的组件，行内组件可以包括各个行内元素对应的组件以及各个行内块级元素对应的组件。块级组件在同一行仅可以存放一个，行内组件在同一行可以并列存放多个。

组件库中还可以包括预先设计的多种模板，用户可以直接选择其中一个模板作为初始页面，在初始页面的基础上，通过组件添加、删除、切割、属性配置等操作，得到最终的前端页面。

示例性的，组件库可以展示于页面设计界面的一侧，用户还可以通过界面设置隐藏该组件库。

用户可以通过点击页面设计界面中画布上的组件添加标识，如“add”、“+”等，下发组件添加指令。组件添加指令对应的页面区域即为该组件添加标识对应的区域。

示例性的，图3为本申请一个示实施例提供的添加组件过程的示意图，如图3所示，用户可以通过点击画布上的“+”，在相应的区域(如图3中虚线方框对应的区域)添加一个组件，如块级组件Block或者一个行内组件Cell。图3中以一个通用页面为例，包括页头(header)、页尾(footer)、左侧区域(通常为导航栏，nav或navigator)、右侧区域(右侧栏，aside)和内容(main)为例。

用户可以通过从组件库中拖动一个组件至画布的方式，下发组件添加指令，组件添加指令对应的页面区域可以为用户拖动操作对应的画布区域，还可以为用户拖动操作对应的画布区域中可添加该组件的区域。

用户可以通过选中组件库中多个组件，并按下相应的快捷键的方式，从而生成选中的多个预设组件的组件添加指令，以将选中的多个预设组件按照选中顺序添加至画布。在此场景下，组件添加指令对应的页面区域可以为画布中足以放置该选中的多个预设组件的任意一个区域。

用户可以通过鼠标、键盘、麦克风、触摸屏等输入设备输入本申请实施例提及的各个指令，本身对指令的输入方式不进行限定。

在一个实施例中，组件布局方式可以采用流式布局、自适应布局、静态布局等中任意一种进行，可以由用户自行设置，如在进入页面设计界面之前，选择组件布局方式。用户还可以在页面设计的过程中改变组件布局方式。可以默认采用流式布局，进行组件布局。

步骤S202，响应于用户关于所述预设组件的组件切割指令，将所述预设组件切割为至少两个分组件。

其中，组件切割指令用于将一个可切割的组件，如预设组件，切割为多个分组件，如2个、3个、6个或者其他数量，可以切割为一维的多个分组件，也可以切割为二维的多个分组件，即网格状的多个分组件。

通常通过组件切割指令，得到的多个分组件的尺寸以及间距均相同。

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

当检测到用户鼠标悬停于所述预设组件的切割控制区域时，生成所述预设组件的组件切割指令。

其中，切割控制区域为触发切割指令的有效区域，其形状可以为圆形、半圆、方形等，还可以为不规则图像。

在一个实施例中，切割控制区域位于预设组件内部。

示例性的，切割控制区域内的点为满足与预设组件边的中点的距离小于预设距离、且位于预设组件内部。切割控制区域还可以为一个方形区域，其中心为预设组件边的中点。

示例性的，一个预设组件的每条边可以对应一个切割控制区域，或者仅预设组件的上边缘和左边缘分别对应一个切割控制区域。

用户还可以通过在预设组件的切割控制区域内右击、双击、长按等操作，下发预设组件的组件切割指令。

通过鼠标悬停至有效区域的方式，进行组件切割，操作便捷，符合用户操作习惯。

用户还可以通过将鼠标悬停在对应的预设组件的切割控制区域并沿切割方向拖动鼠标的方式，下发对应的组件切割指令，从而按照切割方向对预设组件进行切割，将预设组件切分为两个分组件。

在一个实施例中，切割方向可以为任意一种方向。

在一个实施例中，切割方向仅包括水平方向和竖直方向，用户可以拖动鼠标沿近似切割方向移动，从而下发对应的组件切割指令。

示例性的，图4为本申请一个实施例中提供的组件切割过程的示意图，如图4所示，预设组件Block_01包括两个切割控制区域，如图4中的r1和r2，当用户将鼠标悬停于区域r1，并沿近似方向D1的方向拖动鼠标，如在按下左键的同时拖动鼠标，则在生成对应的组件切割指令，执行该组件切割指令，从而沿方向D1将预设组件A01切割为两个分组件，通常默认为两个等尺寸的分组件，如图4中的Cell_01和Cell_02。

用户可以通过将鼠标悬停在对应的预设组件上并按下切割快捷键的方式，下发对应的组件切割指令，从而基于组件切割指令对预设组件进行切割，从而将预设组件切分为多个分组件。

当用户将鼠标悬停在对应的预设组件的边缘、中心等可以触发切割操作的预设位置上时，在鼠标悬停位置的一侧显示切割菜单栏，用户可以通过选中切割菜单栏中的任意一个按钮，生成对应的组件切割指令。其中，切割菜单栏中包括多个按钮，每个按钮对应一种切割方式。

用户还可以通过选中一个所布局的预设组件，并按下切割快捷键的方式，下发对应的组件切割指令。

在一个实施例中，用户还可以通过在预设组件内右击的方式，从弹出的菜单栏中选择与切割相关的按钮，从而下发对应的组件切割指令。

当然，用户还可以通过其他方式，下发组件切割指令，本申请对指令的下发的具体形式不进行限定。

在一个实施例中，预设组件对应的分组件的数量可以由对应的组件切割指令确定，如组件切割指令中可以包括切割后得到的分组件的数量，如2、3、4、5、6或者其他数值。

具体的，当检测到组件切割指令时，可以根据组件切割指令对应的预设组件，确定第一数量的范围，进而获取用户设定的第一数量，基于用户设备的第一数量更新该组件切割指令，其中，第一数量为预设组件子在执行对应的切割指令后切割而成的分组件的数量。

步骤S203，根据所述分组件的组件属性，生成页面。

其中，组件属性为描述组件，分组件或预设组件，样式的属性，可以包括间距、背景、尺寸、标题等属性。

具体的，可以根据画布上布局的各组件(包括分组件和预设组件中的至少一项)的组件类型、布局位置以及组件属性，生成所需的页面。

进一步地，可以根据画布上布局的各组件的组件类型、组件的布局位置以及组件属性，生成用于生成页面的布局文件，通过解析该布局文件，生成所需的页面。

在切割操作完成之后，用户可以配置切割得到的各分组件的组件属性。若画布内存在其他未配置属性的组件，用户还可以对其他组件进行组件属性配置。

在画布上布局的各组件的组件属性配置完成后，用户可以通过页面生成按键，如“完成”按键，则基于各组件(包括上述分组件)的组件属性，生成前端页面。

在切割操作完成之后，用户还可以继续添加其他组件，对所添加的新的预设组件进行切割等操作，还可以删除部分组件，以完成组件布局，以及所布局的各组件的组件属性配置，以完成页面设计。

当检测到用户按下页面生成按键，则根据画布上布局的各组件的组件属性，生成前端页面。

在一个实施例中，用户在页面设计的过程中，可以进行页面预览，如点击“预览”按键，从而基于画布上当前布局的各组件以及组件属性(若有)，生成预览页面，以便于用户掌握所设计的页面的具体形式。

本申请提供的页面生成方法，当用户基于可视化页面设计平台进行页面设计时，用户可以通过组件添加指令，在页面设定区域添加组件库中的原始组件，用户还可以通过组件切割指令对页面当前布局的组件，如已添加的组件、切割后得到的组件等，进行切割，从而将一个组件，即预设组件，切割为多个分组件，使得用户无需通过重复添加组件的方式，快速得到多个组件，从而提高了组件的布局的效率和灵活性，在组件布局完成之后或组件布局过程中，可以基于所配置的组件属性，生成用于展示或使用的前端页面。通过组件切割指令，提供了一种通过切割快速布局页面组件的方式，提高了页面设计的效率。

可选的，图5为本申请图2所示实施例中步骤S202的流程示意图，如图5所示，上述步骤S202具体可以包括以下步骤：

步骤S501，当检测到关于所述预设组件的组件切割指令时，根据所述预设组件的类型和/或所述组件切割指令对应的交互区域，确定所述预设组件的切割方式。

其中，交互区域为在下发组件切割指令时用于与画布交互的区域。

针对不同类型的预设组件，其可进行的切割方式不尽相同。

预设组件的类型由预设组件在行内可存放的数量确定。当预设组件在行内仅可存放1个时，其类型为块级类型，该预设组件为一块级组件Block；当预设组件在行内可存放多个时，其类型的行内类型，该预设组件为一行内组件Cell。

在一个实施例中，预设组件的类型还可以根据预设组件对应的元素进行分类。如分为标题组件、通用组件、按钮组件等。

切割方式的可配置参数包括切割方向和切割份数。切割方向包括水平方向和竖直方向，切割份数可以为大于等于2的任意正整数，如2～6之间的正整数。

切割方式的可配置参数还可以包括切割维度，一维和多维，一维切割方式下，沿一个切割方向进行切割，多维切割方式下，沿至少两个切割方向进行切割，如沿水平方向和竖直方向将预设组件切割为网格状。

切割方式按照切割维度可以分为一维切割方式和二维切割方式，一维切割方式又可以分为横切方式和纵切方式。横切方式和纵切方式，又均可以细分为：等分切割方式和不等分切割方式。

在一个实施例中，可以预先建立各种类型的预设组件与可进行的切割方式的对应关系，当检测到用户欲切割预设组件时，通过该对应关系，向用户展示该预设组件可选的切割方式，从而由用户从中选择一种进行预设组件的切割。

在一个实施例中，预设组件可以设置有多个切割控制区域，每个切割控制区域对应预设组件的一条边。可以根据交互区域所属的切割控制区域，确定预设组件的切割方式，如确定为横切方式还是纵切方式。

可选的，若所述预设组件的类型为块级类型，则确定所述预设组件的切割方式为预设切割方式；若所述预设组件的类型为行内类型，则根据所述组件切割指令对应的交互区域，确定所述预设组件的切割方式。

其中，行内类型的预设组件在行内可存放的数量为多个，块级类型的预设组件在行内可存放的数量为1个。行内类型的组件可以在同一行内并列布局多个，块级类型的组件仅可以通过换行的方式布局多个。

行内类型的组件对应的元素包括行内元素和行内块级元素，块级类型的组件对应的元素为块级元素，如div。

可选的，所述预设切割方式为：将所述预设组件等分为位于同一行的多个分组件。

其中，分组件的类型为行内类型。

对于块级类型的组件，如标题，在不设置宽度的情况下，默认占据一行，该组件的宽度设置为100％，即自动填满父组件宽度。由于块级组件的属性，导致通过添加组件的方式较通过横向(宽度对应的方向，或水平方向)切割的方式可以更快得到多个块级组件，即用户可以通过添加组件的方式，快速在多行添加多个块级组件。故而，在块级类型的预设组件切割时，其切割方式可以仅对应一个切割方向，即竖直方向(高度对应的方向)，从而将块级组件沿竖直方向切割为多个行内组件。

块级组件通常为一个通栏容器，采用12栅格布局方式进行布局，即将块级组件的宽度等分为12栏，以便于快速将块级组件切割为2、3、4、6或12个尺寸相同的子组件。

在一个实施例中，可以限制块级组件最多可沿竖直方向切割为6个尺寸相同的子组件。

示例性的，预设切割方式可以具体为将块级类型的预设组件沿竖直方向等分位两个行内类型的分组件。

针对行内类型的预设组件，由于行内组件的布局较为灵活，且为页面设计中使用频率较高的组件，其对应的切割方式可以为多种，以提高组件布局的灵活性。

行内类型的预设组件，如span，可以结合组件切割指令对应的交互区域，确定切割方向，进而沿所确定的切割方向将行内类型的预设组件切分为多个分组件。

具体的，可以确定切割方向为垂直于交互区域的中心距离最近的预设组件的边的方向。

在一个实施例中，切割控制区域可以为与预设组件的边距离小于预设距离的方形区域，用户可以通过在切割控制区域内设置多个切割点的方式，下发切割指令，从而切割方式可以由切割点确定。即可以根据用户设置的多个切割点确定切割维度、切割方向、切割位置以及切割份数。

示例性的，切割点可以位于预设组件的边上。

示例性的，图6为本申请实施例提供一种行内组件的切割方式的示意图，如图6所示，行内组件601的切割控制区域Cr为虚线方框与行内组件601的轮廓之间的区域，用户通过在预设组件601内设置3个切割点分别为点A、点B和点C，则执行相应的切割指令后，将预设组件601切割为6个分组件。

可选的，所述方法还包括：根据所述切割方式，在所述预设组件上添加切割指示。

其中，所述切割指示用于展示所述切割方式对应的切割路径。

示例性的，切割指示可以展示一条或多条虚线，每条虚线对应一条切割路径。还可以在每条虚线起点对应的位置处增加切割标识，如剪刀。

通过设置切割指示，提高了组件切割的可视化程度，以便于用户快速确定所需的切割方式。

步骤S502，根据所述切割方式，将所述预设组件切割为多个分组件。

执行预设组件切割指令，按照对应的切割方式，对所布局的预设组件进行切割，得到多个分组件。

通过基于组件类型以及指令的交互区域，确定切割方式，提高了组件切割的多样化，使得用户可以通过调整交互区域的方式，灵活选择组件的切割方式，进而快速完成多个组件的布局，提高了组件布局的效率。

图7为本申请实施例提供的另一种页面生成方法的流程示意图，本实施例针对预设组件为行内组件的情况，即预设组件的类型为行内类型的情况，如图7所示，当预设组件为行内组件时，页面生成方法具体包括以下步骤：

步骤S701，响应于用户的组件添加指令，将至少一个预设组件添加至所述组件添加指令对应的页面区域。

其中，预设组件为一行内组件，即其类型的行内类型。

步骤S702，当检测到关于所述预设组件的组件切割指令时，根据所述组件切割指令对应的交互区域，确定所述行内组件的切割方式。

步骤S703，根据所述预设组件的属性，生成包裹组件。

其中，包裹组件的类型为行内类型，包裹组件对应的预设组件的子组件。包裹组件用于包裹切分得到的预设组件的分组件，即预设组件对应的分组件为该包裹组件的子组件，预设组件对应的分组件均设置在该包裹组件内。

在一个实施例中，所生成的包裹组件的属性，如宽度、高度、背景色、间距等，可以继承自对应的预设组件。

进一步地，可以根据预设组件的属性以及切割方式，生成包裹组件。

具体的，可以根据切割方式，确定包裹组件的类型，根据预设组件的属性，确定包裹组件的属性，从而得到切割预设组件时的包裹组件。

切割方式为横向切割方式时，所生成的包裹组件可以为一列容器，即列包裹组件；切割方式为纵向切割方式时，所生成的包裹组件则可以为一行容器，即行包裹组件。列包裹组件中的分组件呈一列排布，行包裹组件中的分组件则呈一行排布。

其中，包裹组件通常为透明的。包裹组件可以与对应的预设组件等尺寸，或存在一定的间距，如2px。

步骤S704，根据所述切割方式，将所述预设组件切割为位于所述包裹组件内的多个分组件。

在生成包裹组件之后，基于切割方式对应的参数，如切割份数、切割方向等，在该包裹组件内按照切割方式对应的布局，布置切割份数对应数量的分组件，从而完成预设组件的切割操作。

在一个实施例中，可以默认切割份数为2。即在每次切割时，将预设组件切割为两个分组件。

当包裹组件为列包裹组件或行包裹组件时，可以通过直接在列包裹组件或行包裹组件内按照默认的布局方式在期内布局切割份数个子组件的方式，实现对预设组件的切割。列包裹组件默认的布局方式可以为子组件呈一列排布，行包裹组件默认的布局方式则可以为子组件呈一行排布。包裹组件还可以限制其子组件居中排布，还可以限制子组件的宽度等参数。

进一步地，在将预设组件切割为多个分组件之后，用户还可以通过页面设计界面上的属性配置栏，设置该多个分组件的布局方式，该布局方式可以包括水平对齐方式、垂直对齐方式，如靠左对齐、靠右对齐、居中对齐等。

示例性的，图8为本申请图7所示实施例中包裹组件及其内分组件的排布示意图，如图8所示，当沿水平方向x对预设组件801进行切割时(横向切割)，生成一列包裹组件802，列包裹组件802包裹两个子组件，即分组件804和分组件805，呈一列分布；当沿竖直方向y对预设组件801进行切割时(纵向切割)，则生成一行包裹组件803，行包裹组件803包裹两个子组件，即分组件806和分组件807，呈一行分布。

基于包裹组件，进行预设组件的切割，使得切割得到的分组件均布局在包裹组件内，便于分组件的统一管理，为分组件的属性配置提供了便利。

步骤S705，当所述预设组件被切割为两个分组件，响应于用户关于任一分组件的组件删除指令，删除所述分组件对应的包裹组件，并将所述分组件的关联分组件还原为对应的预设组件。

其中，由同一个预设组件切割而成的两个分组件互为关联分组件。

当用户在切割一个预设组件之后，可以通过删除切割对应的一个分组件的方式，撤销该切割操作，从而将两个分组件还原为切割之前的预设组件。

示例性的，用户可以通过按下键盘上的删除键或退格键的方式，下发删除组件删除指令，以删除对应的分组件，从而撤销预设组件的切割操作。用户还可以通过选中分组件之后，通过所展示的控制菜单栏下发删除组件删除指令，以删除所选中的分组件。

在删除分组件时，需要同时删除包裹分组件的包裹组件，并将与分组件包裹在同一包裹组件的关联组件还原为对应的预设组件，从而撤销该预设组件的切割操作。

通过所提供的切割操作撤销方式，使得用户可以通过简单的删除操作撤销切割操作，进一步提高了组件布局的灵活性，避免了用户由于误切割或修改页面设计，而需要删除多个组件以及重新布局组件，简化了切割撤销的步骤，提高了页面设计的效率。

当预设组件被切割为3个甚至更多个分组件时，用户可以通过删除其中一个或多个分组件的方式，调整切割方式，如将预设组件由切割为3个分组件的方式，调整为切割为2个分组件。删除其中一个或多个分组件之后，若包裹组件内剩余的分组件的数量为多个，则不删除该包裹组件，并调整剩余的分组件的尺寸、位置等参数，以使剩余的分组件占满对应的包裹组件，通常同一包裹组件内的分组件的尺寸相同。当包裹组件内仅剩余一个分组件时，则删除该包裹组件，并将该剩余的分组件还原为对应的预设组件。通过删除分组件之后，动态调整其余组件，以使剩余的分组件自动占满对应的包裹组件，减少了用户操作，提高了组件布局的效率。

在将预设组件切割为多个分组件之后，用户需要基于需求进行分组件间距的调整时，为了提高分组件间距调整的效率，可以通过步骤S706和步骤S707提供的间距调整方式进行分组件整体间距的统一调整。

步骤S706，获取用户输入的包裹组件对应的目标间距。

其中，目标间距可以为包裹组件的外边距，外边距可以包括包裹组件上下左右四个边的外边距。

当用户需要调整切割得到的分组件的间距时，可以通过分组件对应的包裹组件的目标间距进行。

在一些实施例中，可以默认包裹组件上下左右四个边的外边距均相同。

用户可以通过页面设计界面上的属性配置栏，调整包裹组件的目标间距。如通过一输入框输出包裹组件的目标间距。

步骤S707，根据所述目标间距，调整所述包裹组件内各分组件的间距。

在接收到用户输入的包裹组件的目标间距后，基于包裹组件内分组件的数量、布局方式等中的一项或多项，确定各分组件的间距。

具体的，可以预先设计各种布局方式下，包裹组件内分组件的间距、目标间距、包裹组件内分组件的数量三者之间的换算关系，通过该换算关系，进行各分组件的间距的确定。

步骤S708，当位于同一行或列的多个相邻的行内类型的组件被选中，且检测到组件添加指令时，在被选中的多个组件的预设方向添加新增组件。

其中，预设方向可以为被选中的分组件的右方或下方。

新增组件的尺寸可以由被选中的组件的尺寸确定，还可以根据被选中的组件所在的区域的尺寸确定。

进一步地，所述新增组件沿垂直所述预设方向的长度由被选中的多个组件沿垂直所述预设方向的长度确定。

在添加新的组件时，用户还可以通过选中多个已添加的行内类型的组件的方式进行。具体的，用户可以选中同一行或同一列的多个行内类型的且相邻的组件，同时下发组件添加指令，则在所选中的组件的一侧添加一个尺寸与所选中的所有分组件的尺寸之和相当的新增组件。

当用户选中位于同一行的多个行内类型的分组件时，预设方向可以为下方；当用户选中位于同一列的多个行内类型的分组件时，预设方向可以为右方。

示例性的，用户可以通过键盘上的方向键，确定上述预设方向。

当用户选中位于同一行的多个分组件，且预设方向为下方时，则新增组件的宽度可以根据被选中的各个分组件的宽度之和以及分组件沿宽度方向的间距确定，新增组件的高度等于分组件的高度。

在一个实施例中，若还存在与被选中的分组件位于同一行的组件，则缩小被选中组件，以使缩小后的被选中的组件以及新增组件布局于缩小之前被选中的组件所在的空间。

具体的，可以缩小被选中的组件预设方向的长度，以使新增组件在预设方向的长度、新增组件与被选中的组件在预设方向的间距以及缩小后的被选中的组件在预设方向的长度三者之和为缩小之前被选中的组件在预设方向的长度。

当用户选中位于同一列的多个分组件，且预设方向为右方时，则新增组件的高度可以根据被选中的各个分组件的高度之和以及分组件沿高度方向的间距确定，新增组件的宽度等于分组件的宽度。

图9为本申请图7所示实施例中提供的新增组件添加过程的示意图，如图9所示，用户所设计的页面存在两个分页，即页面1和页面2，页面1的第N行布局有3个行内组件，即组件901至903，页面2的第M行和第M+1行分别布局一个行内组件，即组件904和组件905。则用户可以在设计页面1时，同时选中组件902和组件903，并按下键盘中的“s”、“↓”或者其他键的方式，在组件902和组件903的下方添加一个新增组件，即组件906，由于第N行还存在组件901，则缩小组件902和903，以使缩小后的组件902、缩小后的组件903以及组件906，布局于组件902和组件903原本所在的空间。用户可以在设计页面2时，同时选中组件904和组件905，并按下键盘中的“d”、“→”或者其他键的方式，在组件904和组件905的右方添加一个新增组件，即组件907。

进一步，用户还可以通过选中位于多行多列的相邻或连续的多个组件，并下发组件添加指令，从而实现在预设方向添加一个与所选中的组件对应的区域尺寸相当的新增组件。

步骤S709，响应于页面生成指令，根据当前布局的组件及其组件属性，生成前端页面。

当页面所需的组件布局、组件属性配置完成之后，或者在页面设计的任意时间节点，用户可以下发页面生成指令，从而在检测到页面生成指令之后，基于当前布局的组件及其组件属性，生成并显示对应的前端页面。

在本实施例中，提供了丰富的切割方式，实现了针对不同类型的组件进行不同方式的切割。针对行内组件，通过切割指令对应的交互区域，可以进行不同切割方向的切割，提高了切割的灵活性和多样性，进而提高了组件布局的效率。同时，通过包裹组件支持多个分组件间距的统一调整，提高了间距调整效率；通过删除分组件的操作，撤销所进行的切割操作，提高了切割操作撤销的效率。通过选中多个已布局、相邻行内组件的方式，实现快速添加一个与选中组件对应的区域尺寸相当的大组件，提高了布局各种尺寸的组件的效率。

进一步地，还可以响应于组件拖动指令，以调整组件的位置和/或尺寸。

当页面存在位于同一行的多个按钮时，若用户选中非第一个按钮，且按下换行键，则被选中的按钮以及位于被选中的按钮之后的按钮被换行至下一行，从而使得位于同一行的多个按钮呈两行分布。

当页面存在按钮矩阵时，若用户选中非第一行按钮，并按下换行键，则对该按钮进横向切割或水平切割。

当用户选中任意一个按钮，并按下“tap”键(可配置为其他按键)，则对按钮进行纵向切割或垂直切割。

在生成前端页面之后，还可以将前端页面组件布局对应的树形列表和/或前端页面对应的代码发送至目标终端，以便于存储，以及便于用户通过目标终端进行前端页面的发布。

在一个实施例中，用户可以在用户终端进行页面设计，在页面设计之前，可以先下载上述组件库，通过用户终端启动页面设计器，页面设计器通过相应的插件访问用户终端下载的组件库，从而实现在页面设计器的画布上显示用户布局的组件。

示例性的，以后台页面为例，页面通常包括树状导航栏和内容展示模块。内容展示模块通常包括较多尺寸相同的组件，如描述涉及的各公司名称的组件、各公司交易量的组件等，则可以通过上述页面生成方法中的切割操作，快速布局内容展示模块中尺寸相同的多个组件，从而提高页面设计效率。

示例性的，以图文页面为例，如产品介绍页面，为了丰富页面的组件，通常设计多种尺寸的组件进行产品展示，则可以通过上述切割操作以及新增组件添加对应的操作，快速设计出多种尺寸、灵活布局的组件，且可以通过上述分组件删除操作，撤销切割操作，使得用户可以快速设计出所需的页面。

本申请实施例提供的一种页面生成装置，该页面生成装置包括：

组件添加模块，用于响应于用户的组件添加指令，将至少一个预设组件添加至所述组件添加指令对应的页面区域；组件切割模块，用于响应于用户关于所述预设组件的组件切割指令，将所述预设组件切割为多个分组件；页面生成模块，用于根据用户配置的所述分组件的组件属性，生成前端页面。

可选的，组件切割模块，包括：

切割方式确定单元，用于检测到关于所述预设组件的组件切割指令时，根据所述预设组件的类型和/或所述组件切割指令对应的交互区域，确定所述预设组件的切割方式；组件切割单元，用于根据所述切割方式，将所述预设组件切割为多个分组件。

可选的，切割方式确定单元，具体用于：

若所述预设组件的类型为块级类型，则确定所述预设组件的切割方式为预设切割方式；若所述预设组件的类型为行内类型，则根据所述组件切割指令对应的交互区域，确定所述预设组件的切割方式；其中，行内类型的预设组件在行内可存放的数量为多个，块级类型的预设组件在行内可存放的数量为1个。

可选的，组件切割单元，具体用于：

若所述预设组件的类型为行内类型，根据所述预设组件的属性，生成包裹组件；根据所述切割方式，将所述预设组件切割为位于所述包裹组件内的多个分组件。

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

分组件删除模块，用于当所述预设组件被切割为两个分组件时，响应于用户关于任一分组件的组件删除指令，删除所述分组件对应的包裹组件，并将所述分组件的关联分组件还原为对应的预设组件，其中，由同一个预设组件切割而成的两个分组件互为关联分组件。

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

分组件间距调整模块，用于在根据所述切割方式，将所述预设组件切割为位于所述包裹组件内的多个分组件之后，获取用户输入的包裹组件对应的目标间距；根据所述目标间距，调整所述包裹组件内各分组件的间距。

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

切割指示生成模块，用于根据所述切割方式，在所述预设组件上添加切割指示，其中，所述切割指示用于展示所述切割方式对应的切割路径。

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

切割指令生成模块，用于当检测到用户鼠标悬停于所述预设组件的切割控制区域时，生成所述预设组件的组件切割指令。

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

合并添加组件模块，用于当位于同一行或列的多个相邻的行内类型的组件被选中，且检测到组件添加指令时，在被选中的多个组件的预设方向添加新增组件，且所述新增组件沿垂直所述预设方向的长度由被选中的多个组件沿垂直所述预设方向的长度确定。

本申请实施例提供的页面生成模型的训练装置，可用于执行任意实施例提供的页面生成方法的技术方案，其实现原理和技术效果类似，本实施例此处不再赘述。

图10为本申请实施例提供的一种页面生成设备的结构示意图，如图10所示，本实施例的提供的页面生成设备包括：

至少一个处理器1010；以及与所述至少一个处理器通信连接的存储器1020；其中，所述存储器1020存储有计算机执行指令；所述至少一个处理器1010执行所述存储器存储的计算机执行指令，以使所述电子设备执行如前述任一实施例提供的方法。

可选地，存储器1020既可以是独立的，也可以跟处理器1010集成在一起。

本实施例提供的电子设备的实现原理和技术效果可以参见前述各实施例，此处不再赘述。

本申请实施例还提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，当所述计算机执行指令被处理器执行时，可以实现前述任一实施例提供的方法。

本申请实施例还提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现前述任一实施例提供的方法。

在本申请所提供的几个实施例中，应该理解到，所揭露的设备和方法，可以通过其它的方式实现。例如，以上所描述的设备实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个模块可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。

上述以软件功能模块的形式实现的集成的模块，可以存储在一个计算机可读取存储介质中。上述软件功能模块存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器执行本申请各个实施例所述方法的部分步骤。

应理解，上述处理器可以是中央处理单元(Central Processing Unit，简称CPU)，还可以是其它通用处理器、数字信号处理器(Digital Signal Processor，简称DSP)、专用集成电路(Application Specific Integrated Circuit，简称ASIC)等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合申请所公开的方法的步骤可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。存储器可能包含高速RAM存储器，也可能还包括非易失性存储NVM，例如至少一个磁盘存储器，还可以为U盘、移动硬盘、只读存储器、磁盘或光盘等。

上述存储介质可以是由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。存储介质可以是通用或专用计算机能够存取的任何可用介质。

一种示例性的存储介质耦合至处理器，从而使处理器能够从该存储介质读取信息，且可向该存储介质写入信息。当然，存储介质也可以是处理器的组成部分。处理器和存储介质可以位于专用集成电路(Application Specific Integrated Circuits，简称ASIC)中。当然，处理器和存储介质也可以作为分立组件存在于电子设备或主控设备中。

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

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

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

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

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

Claims (13)

1.一种页面生成方法，其特征在于，所述方法包括：

响应于用户的组件添加指令，将至少一个预设组件添加至所述组件添加指令对应的页面区域；

响应于用户关于所述预设组件的组件切割指令，将所述预设组件切割为至少两个分组件；

根据所述分组件的组件属性，生成页面；所述预设组件被切割为两个分组件，所述方法还包括：

响应于用户关于任一分组件的组件删除指令，删除所述分组件对应的包裹组件，并将所述分组件的关联分组件还原为对应的预设组件，其中，由同一个预设组件切割而成的两个分组件互为关联分组件；所述两个分组件位于所述包裹组件内；所述包裹组件是在所述预设组件的类型为行内类型时，根据所述预设组件的属性生成的。

2.根据权利要求1所述的方法，其特征在于，响应于用户关于所述预设组件的组件切割指令，将所述预设组件切割为多个分组件，包括：

当检测到关于所述预设组件的组件切割指令时，根据所述预设组件的类型和/或所述组件切割指令对应的交互区域，确定所述预设组件的切割方式；

根据所述切割方式，将所述预设组件切割为多个分组件。

3.根据权利要求2所述的方法，其特征在于，根据所述预设组件的类型和/或所述组件切割指令对应的交互区域，确定所述预设组件的切割方式，包括：

若所述预设组件的类型为块级类型，则确定所述预设组件的切割方式为预设切割方式；

若所述预设组件的类型为行内类型，则根据所述组件切割指令对应的交互区域，确定所述预设组件的切割方式；

其中，行内类型的预设组件在行内可存放的数量为多个，块级类型的预设组件在行内可存放的数量为1个。

4.根据权利要求2所述的方法，其特征在于，若所述预设组件的类型为行内类型，根据所述切割方式，将所述预设组件切割为多个分组件，包括：

根据所述预设组件的属性，生成包裹组件；

根据所述切割方式，将所述预设组件切割为位于所述包裹组件内的多个分组件。

5.根据权利要求4所述的方法，其特征在于，在根据所述切割方式，将所述预设组件切割为位于所述包裹组件内的多个分组件之后，所述方法还包括：

获取用户输入的包裹组件对应的目标间距；

根据所述目标间距，调整所述包裹组件内各分组件的间距。

6.根据权利要求3所述的方法，其特征在于，所述预设切割方式为：

将所述预设组件等分为位于同一行的多个分组件。

7.根据权利要求2-6任一项所述的方法，其特征在于，所述方法还包括：

根据所述切割方式，在所述预设组件上添加切割指示，其中，所述切割指示用于展示所述切割方式对应的切割路径。

8.根据权利要求1-6任一项所述的方法，其特征在于，所述方法还包括：

当检测到用户鼠标悬停于所述预设组件的切割控制区域时，生成所述预设组件的组件切割指令。

9.根据权利要求1-6任一项所述的方法，其特征在于，所述方法还包括：

当位于同一行或列的多个相邻的行内类型的组件被选中，且检测到组件添加指令时，在被选中的多个组件的预设方向添加新增组件，且所述新增组件沿垂直所述预设方向的长度由被选中的多个组件沿垂直所述预设方向的长度确定。

10.一种页面生成装置，其特征在于，包括：

组件添加模块，用于响应于用户的组件添加指令，将至少一个预设组件添加至所述组件添加指令对应的页面区域；

组件切割模块，用于响应于用户关于所述预设组件的组件切割指令，将所述预设组件切割为至少两个分组件；

页面生成模块，用于根据用户配置的所述分组件的组件属性，生成页面；

分组件删除模块，用于当所述预设组件被切割为两个分组件时，响应于用户关于任一分组件的组件删除指令，删除所述分组件对应的包裹组件，并将所述分组件的关联分组件还原为对应的预设组件，其中，由同一个预设组件切割而成的两个分组件互为关联分组件；所述两个分组件位于所述包裹组件内；所述包裹组件是在所述预设组件的类型为行内类型时，根据所述预设组件的属性生成的。

11.一种页面生成设备，其特征在于，包括：

处理器，以及与所述处理器通信连接的存储器；

所述存储器存储计算机执行指令；

所述处理器执行所述存储器存储的计算机执行指令，以实现如权利要求1-9任一项所述的方法。

12.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机执行指令，所述计算机执行指令被处理器执行时用于实现如权利要求1-9任一项所述的方法。

13.一种计算机程序产品，其特征在于，包括计算机程序，所述计算机程序被处理器执行时实现权利要求1-9任一项所述的方法。