页面生成方法、装置、计算机设备和存储介质与流程

本申请涉及计算机技术领域，特别是涉及一种页面生成方法、装置、计算机设备和存储介质。

背景技术：

随着互联网系统的高速发展，越来越多的用户选择通过移动终端访问互联网，以获取互联网中的各种资源信息。通常，通过移动终端中显示的页面可以快速获取资源信息。而对于移动终端显示页面中展示的页面元素，一般会针对每个页面元素都编写对应的框架，并针对框架和填充的数据编写相应的样式。

然而，传统技术中页面元素均是加载在页面的固定位置，且不能移动，每次对页面元素进行位置或大小调整都需要在后台修改页面参数，从而花费较多的时间和精力。

技术实现要素：

基于此，有必要针对上述对页面元素进行调整需要修改后台参数的技术问题，提供一种页面生成方法、装置、计算机设备和存储介质。

为了实现上述目的，一方面，本申请实施例提供了一种页面生成方法，所述方法包括：

获取当前显示的页面信息，其中，页面信息包括以多个栅格为背景的画布以及映射在画布上的多个页面元素；

接收对页面元素的更新请求，生成待更新的页面元素的属性信息，其中，待更新的页面元素的属性信息包括待更新的页面元素占用画布上栅格区域的第一起始坐标位置以及占用栅格的第一数目；

根据待更新的页面元素占用画布上栅格区域的第一起始坐标位置以及占用栅格的第一数目，计算当前页面上除所述页面元素外的其他页面元素占用画布上栅格区域的起始坐标替换位置；

根据待更新的页面元素的属性信息以及当前页面上除页面元素外的其他页面元素占用画布上栅格区域的起始坐标替换位置，渲染生成新的页面。

在其中一个实施例中，接收对所述页面元素的更新请求，生成待更新的页面元素的属性信息，包括：接收对页面元素的移动或缩放处理，检测对页面元素进行移动或缩放处理的偏移量；根据页面元素占用画布上栅格区域的初始坐标位置、占用栅格的初始数目以及偏移量，生成对页面元素进行移动或缩放处理后的属性信息，将对页面元素进行移动或缩放处理后的属性信息作为待更新的页面元素的属性信息。

在其中一个实施例中，根据页面元素占用画布上栅格区域的初始坐标位置、占用栅格的初始数目以及所述偏移量，生成对所述页面元素进行移动或缩放处理后的属性信息，包括：将偏移量对应到栅格的预设宽度以及高度，得到偏移量占用栅格的第二数目以及方向信息；根据页面元素占用画布上栅格区域的初始坐标位置、占用栅格的初始数目以及偏移量占用栅格的第二数目和方向信息，计算对页面元素进行移动或缩放处理后占用画布上栅格区域的第一起始坐标位置以及占用栅格的第一数目。

在其中一个实施例中，根据待更新的页面元素占用画布上栅格区域的第一起始坐标位置以及占用栅格的第一数目，计算当前页面上除所述页面元素外的其他页面元素占用画布上栅格区域的起始坐标替换位置，包括：根据待更新的页面元素占用画布上栅格区域的第一起始坐标位置、占用栅格的第一数目，以及当前页面上除所述页面元素外的其他页面元素占用所述画布上栅格区域的初始坐标位置和对应占用栅格的数目，判断其他页面元素与所述待更新的页面元素之间是否存在重复占用的栅格；若存在，则根据其他页面元素对应占用栅格的数目，对其他页面元素占用画布上栅格区域的初始坐标位置进行加权处理，直到与待更新的页面元素之间不存在重复占用的栅格，将对初始坐标位置进行加权处理后的坐标位置作为其他页面元素占用画布上栅格区域的起始坐标替换位置。

在其中一个实施例中，根据其他页面元素对应占用栅格的数目，对其他页面元素占用画布上栅格区域的初始坐标位置进行加权处理，直到与待更新的页面元素之间不存在重复占用的栅格，包括：根据其他页面元素对应占用栅格的数目，将其他页面元素占用画布上栅格区域的初始坐标位置在水平方向或垂直方向上进行加权处理；若加权处理后的其他页面元素的栅格区域与待更新的页面元素之间仍存在重复占用的栅格，则检测加权处理后的栅格区域是否到达画布的展示边界；若加权处理后的其他页面元素的栅格区域未到达画布的展示边界，则重复上述加权处理的步骤，直到加权处理后的其他页面元素的栅格区域与待更新的页面元素之间不存在重复占用的栅格。

在其中一个实施例中，上述方法还包括：若加权处理后的其他页面元素的栅格区域到达画布的展示边界，则在平行于展示边界的方向上对其他页面元素进行加权处理，直到加权处理后的其他页面元素的栅格区域与待更新的页面元素之间不存在重复占用的栅格。

在其中一个实施例中，渲染生成新的页面之前，上述方法还包括：根据待更新的页面元素的属性信息以及当前画布上除所述页面元素外的其他页面元素占用画布上栅格区域的起始坐标替换位置，更新对应页面元素的初始属性信息，其中，页面元素的初始属性信息包括所述页面元素占用所述画布上栅格区域的初始坐标位置以及占用栅格的初始数目；则渲染生成新的页面，包括：根据更新后的页面元素的属性信息渲染生成对应的页面元素，得到新的页面。

另一方面，本申请实施例还提供了一种页面生成装置，包括：

页面信息获取模块，用于获取当前显示的页面信息，其中，页面信息包括以多个栅格为背景的画布以及映射在所述画布上的多个页面元素；

更新请求接收模块，用于接收对页面元素的更新请求，生成待更新的页面元素的属性信息，其中，待更新的页面元素的属性信息包括待更新的页面元素占用画布上栅格区域的第一起始坐标位置以及占用栅格的第一数目；

坐标更新模块，用于根据待更新的页面元素占用画布上栅格区域的第一起始坐标位置以及占用栅格的第一数目，计算当前页面上除页面元素外的其他页面元素占用画布上栅格区域的起始坐标替换位置；

页面生成模块，用于根据待更新的页面元素的属性信息以及当前页面上除页面元素外的其他页面元素占用画布上栅格区域的起始坐标替换位置，渲染生成新的页面。

又一方面，本申请实施例还提供了一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现如上所述方法的步骤。

再一方面，本申请实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上所述方法的步骤。

上述页面生成方法、装置、计算机设备和存储介质，通过实时获取终端显示页面的页面信息，并根据终端对展示的页面中的页面元素进行移动或调整操作的更新请求，生成待更新的页面元素的属性信息，以根据待更新的页面元素的属性信息计算页面中其他页面元素占用栅格区域的起始坐标替换位置，进而渲染生成新的页面。从而实现不需要通过后台进行编辑，仅通过对原有的页面中的页面元素进行操作即可对页面布局进行更新，极大的提高了页面布局的效率和灵活性。

附图说明

图1为一个实施例中页面生成方法的应用环境图；

图2为一个实施例中页面生成方法的流程示意图；

图3为一个实施例中生成待更新的页面元素的属性信息的步骤的流程示意图；

图4为一个实施例中生成其他页面元素占用栅格区域的起始坐标替换位置的步骤的流程示意图；

图5为另一个实施例中生成其他页面元素占用栅格区域的起始坐标替换位置的步骤的流程示意图；

图6为一个实施例中页面生成装置的结构框图；

图7为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本申请提供的页面生成方法，可以应用于如图1所示的应用环境中。其中，终端102通过网络与服务器104进行通信。服务器104能够获取终端102当前显示的页面信息，当用户通过终端102对当前显示的页面中的页面元素进行移动或调整操作时，服务器104则根据终端102对当前显示的页面中页面元素的操作，生成待更新的页面元素的属性信息，以根据待更新的页面元素的属性信息计算当前页面中其他页面元素占用栅格区域的起始坐标替换位置，进而渲染生成新的页面。从而实现不需要通过后台进行编辑，仅通过对原有的页面中的页面元素进行操作即可对页面布局进行更新，极大的提高了页面布局的效率和灵活性。

其中，终端102可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备，服务器104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

在一个实施例中，如图2所示，提供了一种页面生成方法，以该方法应用于图1中的服务器为例进行说明，包括以下步骤：

步骤202，获取当前显示的页面信息。

其中，页面信息是指终端显示的当前页面的页面属性信息，对于终端中显示的页面发生跳转时，服务器都会在第一时间捕捉到跳转页面(即终端当前显示的页面)的页面属性信息，具体的，服务器对终端当前显示的页面进行栅格划分，即将一个页面对应的画布划分成若干列与若干行，从而得到具有多个栅格的画布，并将当前显示的页面中的多个页面元素映射到具有多个栅格的画布上，从而得到与当前显示页面对应的具有多个栅格的画布以及映射在画布上的多个页面元素。其中，每个页面元素在画布上分别占用对应的栅格区域，服务器根据画布中栅格的划分可以获知每个页面元素占用的栅格区域的初始坐标位置以及占用若干行高度的栅格与若干列长度的栅格(即占用栅格的初始数目)。

步骤204，接收对页面元素的更新请求，生成待更新的页面元素的属性信息。

当用户通过终端对当前显示的页面中的任一个页面元素进行移动或调整操作时，则对应页面元素在画布上占用的栅格区域的位置或大小将会发生改变。因此，服务器根据终端的操作接收对该任一个页面元素的更新请求，从而生成待更新的页面元素的属性信息。可以理解的是，待更新的页面元素是指对当前显示的页面中的任一个页面元素进行操作后，其对应的栅格区域的位置或大小发生改变后的页面元素。具体的，待更新的页面元素的属性信息包括待更新的页面元素占用画布上栅格区域的第一起始坐标位置以及占用栅格的第一数目，即栅格区域的位置发生改变后的第一起始坐标位置，栅格区域的大小发生改变后占用栅格的第一数目。

步骤206，根据待更新的页面元素占用画布上栅格区域的第一起始坐标位置以及占用栅格的第一数目，计算当前页面上除页面元素外的其他页面元素占用画布上栅格区域的起始坐标替换位置。

可以理解的是，当页面上的多个页面元素中的任一个页面元素占用画布上栅格区域的位置或大小发生改变后，为了使得页面能够正常显示，则需要对该页面中其他页面元素的布局进行调整，从而生成新的页面。其中，起始坐标替换位置是指：其他页面元素根据待更新的页面元素占用画布上栅格区域的位置和大小，进行调整后的自身占用画布上栅格区域的起始坐标位置。本实施例中，为了区分对应页面元素调整前与调整后占用画布上栅格区域的起始坐标位置的不同，将进行调整后的其他页面元素占用画布上栅格区域的起始坐标位置定义为起始坐标替换位置。

具体的，在本实施例中，服务器根据待更新的页面元素占用画布上栅格区域的第一起始坐标位置以及占用栅格的第一数目，以及当前页面上除任一个页面元素外的其他页面元素占用画布上栅格区域的起始坐标位置以及占用栅格的数目，自适应计算当前页面上除任一个页面元素外的其他页面元素占用画布上栅格区域的起始坐标替换位置。

步骤208，根据待更新的页面元素的属性信息以及当前页面上除页面元素外的其他页面元素占用画布上栅格区域的起始坐标替换位置，渲染生成新的页面。

服务器根据上述计算的其他页面元素占用画布上栅格区域的起始坐标替换位置，以及待更新的页面元素占用画布上栅格区域的第一起始坐标位置以及占用栅格的第一数目的属性信息，进行页面元素的渲染即可得到新的页面。

上述页面生成方法，通过实时获取终端当前显示页面的页面信息，并根据终端对展示的页面中的页面元素进行移动或调整操作的更新请求，生成待更新的页面元素的属性信息，以根据待更新的页面元素的属性信息自适应调整页面中其他页面元素占用栅格区域的起始坐标替换位置，进而渲染生成新的页面。从而实现不需要通过后台进行编辑，仅通过对原有的页面中的页面元素进行操作即可对页面布局进行更新，极大的提高了页面布局的效率和灵活性。

在一个实施例中，如图3所示，接收对页面元素的更新请求，生成待更新的页面元素的属性信息，具体可以包括如下步骤：

步骤302，接收对页面元素的移动或缩放处理，检测对页面元素进行移动或缩放处理的偏移量。

具体的，服务器接收用户通过终端对当前显示的页面中的任一个页面元素进行移动或缩放处理的操作，并检测进行移动或缩放处理的偏移量。其中，偏移量是指对任一个页面元素进行移动或缩放处理后，其占用栅格区域的大小和位置与进行移动或缩放处理前其占用栅格区域的大小和位置之间的偏差。该偏差在对任一个页面元素进行移动或缩放的处理过程中可通过检测得到，例如，在通过鼠标拖动一个页面元素的位置或拉伸一个页面元素的大小时，则服务器可以检测鼠标拖动或拉伸过程中产生的偏移量。

步骤304，根据页面元素占用画布上栅格区域的初始坐标位置、占用栅格的初始数目以及偏移量，生成对页面元素进行移动或缩放处理后的属性信息，将对页面元素进行移动或缩放处理后的属性信息作为待更新的页面元素的属性信息。

在本实施例中，为了区分对任一个页面元素进行移动或缩放处理前和处理后其占用画布上栅格区域的起始坐标位置的不同以及占用栅格的数目的不同，将进行处理前的页面元素占用的栅格区域的起始坐标位置定义为初始坐标位置、占用栅格的数目定义为初始数目，将进行处理后的页面元素占用的栅格区域的起始坐标位置定义为第一起始坐标位置、占用栅格的数目定义为第一数目。

具体的，服务器根据检测的对任一个页面元素进行移动或缩放处理的偏移量，并将该偏移量对应到栅格的预设宽度以及高度上，需要说明的是，在对一个页面对应的画布进行栅格划分后，每一个栅格对应的宽度以及高度则是固定不变的，从而可以得到偏移量对应占用栅格的第二数目以及方向信息。其中，方向信息可以是指该偏移量在水平方向上的变化信息(如在水平方向上增加或减少)或垂直方向上的变化信息(如在垂直方向上增加或减少)。在本实施例中，服务器根据任一个页面元素占用画布上栅格区域的初始坐标位置、占用栅格的初始数目以及偏移量对应占用栅格的第二数目和方向信息，计算对任一个页面元素进行移动或缩放处理后占用画布上栅格区域的第一起始坐标位置以及占用栅格的第一数目，从而生成对任一个页面元素进行移动或缩放处理后的属性信息，并将对任一个页面元素进行移动或缩放处理后的属性信息作为待更新的页面元素的属性信息。

在一个实施例中，如图4所示，根据待更新的页面元素占用画布上栅格区域的第一起始坐标位置以及占用栅格的第一数目，计算当前画布上除页面元素外的其他页面元素占用画布上栅格区域的起始坐标替换位置，包括如下步骤：

步骤402，判断其他页面元素与待更新的页面元素之间是否存在重复占用的栅格。

当页面上的多个页面元素中的任一个页面元素占用画布上栅格区域的位置或大小发生改变后，为了使得页面能够正常显示，则需要对该页面中其他页面元素的布局进行调整，从而生成新的页面。因此，在本实施例中，当页面中任一个页面元素占用画布上栅格区域的位置或大小发生改变后，则需要根据发生改变后的页面元素占用画布上栅格区域的位置或大小(即待更新的页面元素的属性信息)，判断是否与其他页面元素之间存在重复占用的栅格。具体的，可以根据待更新的页面元素占用画布上栅格区域的第一起始坐标位置、占用栅格的第一数目以及当前画布上除任一个页面元素外的其他页面元素占用画布上栅格区域的初始坐标位置以及对应占用栅格的数目，判断其他页面元素占用的栅格区域与待更新的页面元素占用的栅格区域之间是否存在重叠的部分，若存在重叠的部分则说明存在重复占用的栅格，因此执行步骤404；若不存在重叠的部分则说明不存在重复占用的栅格，则执行步骤406。

步骤404，根据其他页面元素对应占用栅格的数目，对其他页面元素占用画布上栅格区域的初始坐标位置进行加权处理，直到与待更新的页面元素之间不存在重复占用的栅格，将对初始坐标位置进行加权处理后的坐标位置作为其他页面元素占用画布上栅格区域的起始坐标替换位置。

在本实施例中，若经过上述步骤确定其他页面元素与待更新的页面元素之间存在重复占用的栅格，则根据其他页面元素对应占用栅格的数目，将其他页面元素占用画布上栅格区域的初始坐标位置在水平方向或垂直方向上进行加权处理。其中，加权处理可以理解为将该页面元素对应占用的栅格区域进行整体移动，每一次加权处理可以理解为整体移动一行栅格或一列栅格。如根据该页面元素占用的栅格区域的初始坐标位置以及对应占用栅格的数目将其在水平方向上或垂直方向上整体移动一行或一列。

可以理解的是，移动后的页面元素占用的栅格区域的坐标位置则发生了变化，因此，每次移动后，再行判断移动后的页面元素占用的栅格区域与待更新的页面元素之间是否还存在重复占用的栅格，若不存在，则将移动后的页面元素占用的栅格区域的坐标位置作为该页面元素占用的栅格区域的起始坐标替换位置。如果移动后的页面元素占用的栅格区域与待更新的页面元素之间仍然存在重复占用的栅格，则重复上述加权处理的步骤，即对移动后的页面元素占用的栅格区域在水平方向上或垂直方向上再整体移动一个栅格，直到移动后的页面元素占用的栅格区域与待更新的页面元素之间不存在重复占用的栅格，则将当前移动后的页面元素占用的栅格区域的坐标位置作为该页面元素占用的栅格区域的起始坐标替换位置。从而实现当页面中某一页面元素的位置或大小发生改变时，页面中的其他页面元素能够自适应调整，从而形成新的页面。

步骤406，将其他页面元素占用画布上栅格区域的初始坐标位置作为对应的坐标替换位置。

由于其他页面元素占用的栅格区域与待更新的页面元素占用的栅格区域之间不存在重叠的部分，则说明页面中的页面元素都能够正常显示，因此，可以不对其他页面元素占用的栅格区域进行调整，从而将其栅格区域的初始坐标位置作为新页面中对应页面元素的坐标替换位置。

在一个实施例中，如图5所示，根据其他页面元素对应占用栅格的数目，对其他页面元素占用画布上栅格区域的初始坐标位置进行加权处理，直到与待更新的页面元素之间不存在重复占用的栅格，具体可以包括如下步骤：

步骤502，根据其他页面元素对应占用栅格的数目，将其他页面元素占用画布上栅格区域的初始坐标位置在水平方向或垂直方向上进行加权处理。

当确定其他页面元素与待更新的页面元素之间存在重复占用的栅格时，则根据其他页面元素对应占用栅格的数目，将其他页面元素占用画布上栅格区域的初始坐标位置在水平方向或垂直方向上进行加权处理。

步骤504，判断加权处理后的其他页面元素的栅格区域与待更新的页面元素之间是否还存在重复占用的栅格。

每次移动后，再行判断移动后的页面元素占用的栅格区域与待更新的页面元素之间是否还存在重复占用的栅格，若存在，则执行步骤506，否则执行步骤510。

步骤506，检测加权处理后的其他页面元素的栅格区域是否到达画布的展示边界。

具体的，如果移动后的页面元素占用的栅格区域与待更新的页面元素之间还存在重复占用的栅格，则表示需要对该移动后的页面元素的布局进行再次调整(即进行加权处理)，因此，需要进一步判断该移动后的页面元素占用的栅格区域是否到达画布的展示边界，如果到达展示边界则执行步骤508，否则返回步骤502。即如果移动后的页面元素占用的栅格区域与待更新的页面元素之间仍然存在重复占用的栅格，且该页面元素不位于画布的展示边界，则表示该页面元素还可以在画布中进行任意移动，因此，返回步骤502进行再次加权处理。

步骤508，在平行于展示边界的方向上对其他页面元素进行加权处理，直到加权处理后的其他页面元素的栅格区域与待更新的页面元素之间不存在重复占用的栅格。

具体的，如果移动后的页面元素占用的栅格区域与待更新的页面元素之间仍然存在重复占用的栅格，但是该页面元素已经位于画布的展示边界，则表示该页面元素已经不能在画布中进行任意移动。因此，在本实施例中，可以通过在平行于展示边界的方向上对该页面元素进行加权处理。例如，如果该页面元素占用的栅格区域的顶部或底部位于画布的展示边界，则此时可以在水平方向上(即平行于画布的顶部或底部的展示边界)对该页面元素进行加权处理；如果该页面元素占用的栅格区域的左部或右部位于画布的展示边界，则此时可以在垂直方向上(即平行于画布的左部或右部的展示边界)对该页面元素进行加权处理，从而使其与待更新的页面元素之间不存在重复占用的栅格。

步骤510，将移动后的页面元素占用的栅格区域的坐标位置作为该页面元素占用的栅格区域的起始坐标替换位置。

具体的，如果移动后的页面元素占用的栅格区域与待更新的页面元素之间已经不存在重复占用的栅格，则将移动后的页面元素占用的栅格区域的坐标位置作为该页面元素占用的栅格区域的起始坐标替换位置。

在一个实施例中，根据上述待更新的页面元素的属性信息，以及当前画布上除任一个页面元素外的其他页面元素占用画布上栅格区域的起始坐标替换位置，更新对应页面元素的初始属性信息，其中，页面元素的初始属性信息包括页面元素占用画布上栅格区域的初始坐标位置以及占用栅格的初始数目。进而根据页面中各页面元素更新后的属性信息渲染生成对应的页面元素，从而得到新的页面。因此，在得到新页面的过程中不需要通过后台进行重新编辑，且避免了频繁的创建各种重复样式，从而提高了页面生成的效率，且大大减少了系统内存消耗，提高了系统性能。

以下通过一个具体的实施例进一步说明本申请的方法，可以理解的是，对于终端显示的每一个页面都是根据需要提前设计并存储在数据库中的，在本实施例中，在对页面进行设计时，可以根据待设计页面的属性值对页面进行栅格划分，从而得到页面对应的带栅格的画布。其中，待设计页面的属性值可以但不限于待设计页面的大小、分辨率等，从而根据待设计页面的大小或分辨率将对应的画布划分为若干列和若干行，具体每一列的列宽和每一行的行高可以根据实际需要设定。

具体的，当对待设计页面进行栅格划分后，可以根据页面元素的创建请求在待设计页面中生成对应的页面元素，其中，页面元素的创建请求包括对应页面元素的高度占比、宽度占比以及位置信息。如页面元素将占用画布上若干行的高度h与若干列的宽度w的栅格区域。通常，在接收到页面元素的创建请求后，需要先行判断当前画布上是否已经存在其他页面元素，如果当前画布上不存在其他页面元素，则将画布上未被占用的y轴(长度方向)的第一个栅格位置作为待创建的页面元素的起始位置，并生成对应的描述信息。如果当前画布上已经存在其他页面元素，则根据画布上已有的页面元素占用的栅格区域确定待创建的页面元素的起始位置，例如，若画布上已有的页面元素占用y轴上的第1-3格的栅格，那么待创建的页面元素默认显示在y轴上的第4格，也即待创建的页面元素将y轴上的第4格栅格位置作为待创建的页面元素的起始位置，并生成对应的描述信息。从而使得待创建的页面元素与页面中已有的页面元素之间不至于产生部突。其中，页面元素的描述信息包括页面元素的标识(该标识可以通过随机数生成或通过默认顺序排列给出等)以及属性信息(如该页面元素位于画布上栅格区域的起始位置以及占用栅格的数目)等。本实施例通过将页面对应的画布进行栅格化，从而可以按占比来计算页面元素的描述，降低了运算资源。

在本实施例中，生成页面元素的描述信息后，通常将其存储在数据库中，通过从数据库中加载对应的页面元素的描述信息至待创建的页面元素，即可在页面中生成页面元素，从而完成页面元素的创建。通过上述方法创建一个页面中的若干个页面元素，即可得到一个完整的页面。

而对于一个页面中的每一个页面元素，其在画布上分别占用的栅格区域的初始坐标位置以及对应占用栅格的初始数目可通过数据结构(x、y、w、h)表示，以下简称l，为页面元素的初始属性信息。其中，x、y为页面元素占用的栅格区域的初始坐标位置，也即该页面元素占用的栅格区域的左上角的栅格位于画布中第x行、第y列；w、h则为该页面元素占用的栅格区域在水平及垂直方向上分别对应的栅格的数量，也即该页面元素占用的栅格区域的大小。

在对页面中的某一页面元素进行调整(移动或缩放)后，则根据该页面元素的初始属性信息以及调整的偏移量得到调整后的待更新的页面元素的属性信息，即该待更新的页面元素占用画布上栅格区域的第一起始坐标位置以及占用栅格的第一数目，在本申请中，将待更新的页面元素的属性信息设为nl。则进一步检测nl与页面上其他页面元素的l之间是否有碰撞，也即检测待更新的页面元素与其他页面元素占用的栅格区域之间是否存在重合的面积部分，如果有，则找出与待更新的页面元素之间存在重复占用的栅格的其他页面元素的标识，并将该其他页面元素对应的l记为cl(cl.x、cl.y、w、h)，然后将其占用的栅格区域在水平方向上右移一列栅格或在垂直方向上下移一行栅格，例如，若在水平方向上右移一列栅格，则其对应占用栅格区域的坐标发生了变化，其对应的坐标为cl.x+1,记为cnx。同理，若在垂直方向上下移一行栅格，则其对应占用栅格区域的坐标发生了变化，其对应的坐标为cl.y+1，记为cny。从而将cl移动到新的坐标cnx或cny上，如果此时没有碰撞了，则更新cl的坐标位置，更新后的坐标位置即为对应页面元素的起始坐标替换位置，并标记为已经解决并移动到新的坐标上。否则循环往复上述过程，直至所有的有碰撞的图表都被标记为已解决。

需要注意的是，在对发生碰撞的页面元素进行移动前，需要判断其是否具备移动空间，即判断该页面元素占用的栅格区域是否到达画布的展示边界位置，若已到达，则采用平行于展示边界的位置进行移动，进到没有碰撞为止。

进而将待更新的页面元素的属性信息以及其他页面元素的起始坐标替换位置，传输至数据库中，将数据库中存储的对应页面元素的描述信息替换掉。从而在加载页面元素时，从数据库中加载对应的页面元素的描述信息，并更新当前页面中所有的页面元素，渲染生成新的页面。本实施例在对页面元素进行更新时，不需要后台重新编辑，仅通过对原有的页面中的页面元素进行操作即可对页面布局进行更新，极大的提高了页面布局的效率和灵活性，且在渲染页面元素时避免了频繁的创建各种重复样式，而是直接从数据库中提取数据，从而大大减少了系统内存消耗，提高了系统性能。

应该理解的是，虽然图1-5的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，图1-5中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些子步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

在一个实施例中，如图6所示，提供了一种页面生成装置，包括：页面信息获取模块601、更新请求接收模块602、坐标计算模块603和页面生成模块604，其中：

页面信息获取模块601，用于获取当前显示的页面信息，其中，页面信息包括以多个栅格为背景的画布以及映射在画布上的多个页面元素；

更新请求接收模块602，用于接收对页面元素的更新请求，生成待更新的页面元素的属性信息，其中，待更新的页面元素的属性信息包括待更新的页面元素占用画布上栅格区域的第一起始坐标位置以及占用栅格的第一数目；

坐标更新模块603，用于根据待更新的页面元素占用画布上栅格区域的第一起始坐标位置以及占用栅格的第一数目，计算当前页面上除所述页面元素外的其他页面元素占用画布上栅格区域的起始坐标替换位置；

页面生成模块604，用于根据待更新的页面元素的属性信息以及当前页面上除页面元素外的其他页面元素占用画布上栅格区域的起始坐标替换位置，渲染生成新的页面。

在一个实施例中，更新请求接收模块602具体用于，接收对页面元素的移动或缩放处理，检测对页面元素进行移动或缩放处理的偏移量；根据页面元素占用画布上栅格区域的初始坐标位置、占用栅格的初始数目以及偏移量，生成对页面元素进行移动或缩放处理后的属性信息，将对页面元素进行移动或缩放处理后的属性信息作为待更新的页面元素的属性信息。

在一个实施例中，坐标更新模块603具体用于，根据待更新的页面元素占用画布上栅格区域的第一起始坐标位置、占用栅格的第一数目，以及当前页面上除页面元素外的其他页面元素占用画布上栅格区域的初始坐标位置和对应占用栅格的数目，判断其他页面元素与待更新的页面元素之间是否存在重复占用的栅格；若存在，则根据其他页面元素对应占用栅格的数目，对其他页面元素占用画布上栅格区域的初始坐标位置进行加权处理，直到与待更新的页面元素之间不存在重复占用的栅格，将对初始坐标位置进行加权处理后的坐标位置作为其他页面元素占用画布上栅格区域的起始坐标替换位置。

在一个实施例中，页面生成模块604具体用于，根据待更新的页面元素的属性信息以及当前画布上除页面元素外的其他页面元素占用画布上栅格区域的起始坐标替换位置，更新对应页面元素的初始属性信息，其中，页面元素的初始属性信息包括页面元素占用画布上栅格区域的初始坐标位置以及占用栅格的初始数目；根据更新后的页面元素的属性信息渲染生成对应的页面元素，得到新的页面。

关于页面生成装置的具体限定可以参见上文中对于页面生成方法的限定，在此不再赘述。上述页面生成装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是服务器，其内部结构图可以如图7所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储页面元素的描述信息。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种页面生成方法。

本领域技术人员可以理解，图7中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现以下步骤：

获取当前显示的页面信息，其中，页面信息包括以多个栅格为背景的画布以及映射在画布上的多个页面元素；

接收对页面元素的更新请求，生成待更新的页面元素的属性信息，其中，待更新的页面元素的属性信息包括待更新的页面元素占用画布上栅格区域的第一起始坐标位置以及占用栅格的第一数目；

根据待更新的页面元素占用画布上栅格区域的第一起始坐标位置以及占用栅格的第一数目，计算当前页面上除所述页面元素外的其他页面元素占用画布上栅格区域的起始坐标替换位置；

根据待更新的页面元素的属性信息以及当前页面上除页面元素外的其他页面元素占用画布上栅格区域的起始坐标替换位置，渲染生成新的页面。

在一个实施例中，接收对所述页面元素的更新请求，生成待更新的页面元素的属性信息，包括：接收对页面元素的移动或缩放处理，检测对页面元素进行移动或缩放处理的偏移量；根据页面元素占用画布上栅格区域的初始坐标位置、占用栅格的初始数目以及偏移量，生成对页面元素进行移动或缩放处理后的属性信息，将对页面元素进行移动或缩放处理后的属性信息作为待更新的页面元素的属性信息。

在一个实施例中，根据页面元素占用画布上栅格区域的初始坐标位置、占用栅格的初始数目以及所述偏移量，生成对所述页面元素进行移动或缩放处理后的属性信息，包括：将偏移量对应到栅格的预设宽度以及高度，得到偏移量占用栅格的第二数目以及方向信息；根据页面元素占用画布上栅格区域的初始坐标位置、占用栅格的初始数目以及偏移量占用栅格的第二数目和方向信息，计算对页面元素进行移动或缩放处理后占用画布上栅格区域的第一起始坐标位置以及占用栅格的第一数目。

在一个实施例中，根据待更新的页面元素占用画布上栅格区域的第一起始坐标位置以及占用栅格的第一数目，计算当前页面上除所述页面元素外的其他页面元素占用画布上栅格区域的起始坐标替换位置，包括：根据待更新的页面元素占用画布上栅格区域的第一起始坐标位置、占用栅格的第一数目，以及当前页面上除所述页面元素外的其他页面元素占用所述画布上栅格区域的初始坐标位置和对应占用栅格的数目，判断其他页面元素与所述待更新的页面元素之间是否存在重复占用的栅格；若存在，则根据其他页面元素对应占用栅格的数目，对其他页面元素占用画布上栅格区域的初始坐标位置进行加权处理，直到与待更新的页面元素之间不存在重复占用的栅格，将对初始坐标位置进行加权处理后的坐标位置作为其他页面元素占用画布上栅格区域的起始坐标替换位置。

在一个实施例中，根据其他页面元素对应占用栅格的数目，对其他页面元素占用画布上栅格区域的初始坐标位置进行加权处理，直到与待更新的页面元素之间不存在重复占用的栅格，包括：根据其他页面元素对应占用栅格的数目，将其他页面元素占用画布上栅格区域的初始坐标位置在水平方向或垂直方向上进行加权处理；若加权处理后的其他页面元素的栅格区域与待更新的页面元素之间仍存在重复占用的栅格，则检测加权处理后的栅格区域是否到达画布的展示边界；若加权处理后的其他页面元素的栅格区域未到达画布的展示边界，则重复上述加权处理的步骤，直到加权处理后的其他页面元素的栅格区域与待更新的页面元素之间不存在重复占用的栅格。

在一个实施例中，上述方法还包括：若加权处理后的其他页面元素的栅格区域到达画布的展示边界，则在平行于展示边界的方向上对其他页面元素进行加权处理，直到加权处理后的其他页面元素的栅格区域与待更新的页面元素之间不存在重复占用的栅格。

在一个实施例中，渲染生成新的页面之前，上述方法还包括：根据待更新的页面元素的属性信息以及当前画布上除所述页面元素外的其他页面元素占用画布上栅格区域的起始坐标替换位置，更新对应页面元素的初始属性信息，其中，页面元素的初始属性信息包括所述页面元素占用所述画布上栅格区域的初始坐标位置以及占用栅格的初始数目；则渲染生成新的页面，包括：根据更新后的页面元素的属性信息渲染生成对应的页面元素，得到新的页面。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：

获取当前显示的页面信息，其中，页面信息包括以多个栅格为背景的画布以及映射在画布上的多个页面元素；

接收对页面元素的更新请求，生成待更新的页面元素的属性信息，其中，待更新的页面元素的属性信息包括待更新的页面元素占用画布上栅格区域的第一起始坐标位置以及占用栅格的第一数目；

根据待更新的页面元素占用画布上栅格区域的第一起始坐标位置以及占用栅格的第一数目，计算当前页面上除所述页面元素外的其他页面元素占用画布上栅格区域的起始坐标替换位置；

根据待更新的页面元素的属性信息以及当前页面上除页面元素外的其他页面元素占用画布上栅格区域的起始坐标替换位置，渲染生成新的页面。

在一个实施例中，接收对所述页面元素的更新请求，生成待更新的页面元素的属性信息，包括：接收对页面元素的移动或缩放处理，检测对页面元素进行移动或缩放处理的偏移量；根据页面元素占用画布上栅格区域的初始坐标位置、占用栅格的初始数目以及偏移量，生成对页面元素进行移动或缩放处理后的属性信息，将对页面元素进行移动或缩放处理后的属性信息作为待更新的页面元素的属性信息。

在一个实施例中，根据页面元素占用画布上栅格区域的初始坐标位置、占用栅格的初始数目以及所述偏移量，生成对所述页面元素进行移动或缩放处理后的属性信息，包括：将偏移量对应到栅格的预设宽度以及高度，得到偏移量占用栅格的第二数目以及方向信息；根据页面元素占用画布上栅格区域的初始坐标位置、占用栅格的初始数目以及偏移量占用栅格的第二数目和方向信息，计算对页面元素进行移动或缩放处理后占用画布上栅格区域的第一起始坐标位置以及占用栅格的第一数目。

在一个实施例中，根据待更新的页面元素占用画布上栅格区域的第一起始坐标位置以及占用栅格的第一数目，计算当前页面上除所述页面元素外的其他页面元素占用画布上栅格区域的起始坐标替换位置，包括：根据待更新的页面元素占用画布上栅格区域的第一起始坐标位置、占用栅格的第一数目，以及当前页面上除所述页面元素外的其他页面元素占用所述画布上栅格区域的初始坐标位置和对应占用栅格的数目，判断其他页面元素与所述待更新的页面元素之间是否存在重复占用的栅格；若存在，则根据其他页面元素对应占用栅格的数目，对其他页面元素占用画布上栅格区域的初始坐标位置进行加权处理，直到与待更新的页面元素之间不存在重复占用的栅格，将对初始坐标位置进行加权处理后的坐标位置作为其他页面元素占用画布上栅格区域的起始坐标替换位置。

在一个实施例中，根据其他页面元素对应占用栅格的数目，对其他页面元素占用画布上栅格区域的初始坐标位置进行加权处理，直到与待更新的页面元素之间不存在重复占用的栅格，包括：根据其他页面元素对应占用栅格的数目，将其他页面元素占用画布上栅格区域的初始坐标位置在水平方向或垂直方向上进行加权处理；若加权处理后的其他页面元素的栅格区域与待更新的页面元素之间仍存在重复占用的栅格，则检测加权处理后的栅格区域是否到达画布的展示边界；若加权处理后的其他页面元素的栅格区域未到达画布的展示边界，则重复上述加权处理的步骤，直到加权处理后的其他页面元素的栅格区域与待更新的页面元素之间不存在重复占用的栅格。

在一个实施例中，上述方法还包括：若加权处理后的其他页面元素的栅格区域到达画布的展示边界，则在平行于展示边界的方向上对其他页面元素进行加权处理，直到加权处理后的其他页面元素的栅格区域与待更新的页面元素之间不存在重复占用的栅格。

在一个实施例中，渲染生成新的页面之前，上述方法还包括：根据待更新的页面元素的属性信息以及当前画布上除所述页面元素外的其他页面元素占用画布上栅格区域的起始坐标替换位置，更新对应页面元素的初始属性信息，其中，页面元素的初始属性信息包括所述页面元素占用所述画布上栅格区域的初始坐标位置以及占用栅格的初始数目；则渲染生成新的页面，包括：根据更新后的页面元素的属性信息渲染生成对应的页面元素，得到新的页面。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(rom)、可编程rom(prom)、电可编程rom(eprom)、电可擦除可编程rom(eeprom)或闪存。易失性存储器可包括随机存取存储器(ram)或者外部高速缓冲存储器。作为说明而非局限，ram以多种形式可得，诸如静态ram(sram)、动态ram(dram)、同步dram(sdram)、双数据率sdram(ddrsdram)、增强型sdram(esdram)、同步链路(synchlink)dram(sldram)、存储器总线(rambus)直接ram(rdram)、直接存储器总线动态ram(drdram)、以及存储器总线动态ram(rdram)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。