一种页面布局方法及装置与流程

本申请涉及网页页面布局领域，具体而言，涉及一种页面布局方法及装置。

背景技术：

目前,人类世界已经迈入大数据时代，随着互联网、物联网、云计算等信息技术的迅猛发展，在网页上进行各类报表的制作和对数据进行整理已经非常普及。然而在网页上对制作的页面进行布局时，用户每次操作都需要将组件一一拖放至预设位置，即使多次制作的页面相似或相同，也需要用户手动对页面的布局进行排版。大量重复的工作浪费了用户时间和精力，降低了用户的工作效率。

有鉴于此，如何实现对待布局网页页面的快速布局，是目前需要解决的问题。

技术实现要素：

本申请提供一种页面布局方法及装置。

第一方面，本申请提供一种页面布局方法，应用于计算机设备，所述方法包括：

将待布局网页中可拖放组件的页面进行初始化；

获取登录所述待布局网页的用户的身份信息，并根据所述身份信息，从预存有用户历史操作习惯的数据库中查找登陆所述待布局网页的用户的历史操作习惯；

响应所述用户将目标组件拖放至所述可拖放组件的页面上的操作，并根据查找到的所述历史操作习惯，将所述目标组件自动布置到所述可拖放组件的页面的相应位置。

可选地，所述方法还包括获取用户历史操作习惯的步骤，该步骤包括：

根据所述待布局网页的内置规则，将待放置组件的配置项转化为相应的数据信息；

根据所述数据信息，计算得到所述待放置组件的有效特征；

根据所述有效特征，计算得到所述待放置组件的布局权重；

根据所述布局权重，得到所述待放置组件的用户历史操作习惯，并将所述用户历史操作习惯存入所述数据库。

可选地，所述根据所述数据信息，计算得到所述待放置组件的有效特征，包括：

将所述数据信息作为所述待放置组件的原始特征；

将所述原始特征进行线性特征提取，计算得到有效特征。

可选地，所述将所述原始特征进行线性特征提取，计算得到有效特征，包括：

将原始特征进行去平均值的操作；

计算去平均值后的原始特征对应的协方差矩阵，得到特征值和特征向量；

将所述特征值和特征向量作为有效特征。

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

响应用户调整所述目标组件在所述可拖放组件的页面的位置的操作，对所述目标组件在所述可拖放组件的页面的位置进行调整。

第二方面，本申请提供一种页面布局装置，应用于计算机设备，所述装置包括：

初始化模块，用于将待布局网页中可拖放组件的页面进行初始化；

登录模块，用于获取登录所述待布局网页的用户的身份信息，并根据所述身份信息，从预存有用户历史操作习惯的数据库中查找登陆所述待布局网页的用户的历史操作习惯；

布置模块，用于响应所述用户将目标组件拖放至所述可拖放组件的页面上的操作，并根据查找到的所述历史操作习惯，将所述目标组件自动布置到所述可拖放组件的页面的相应位置。

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

转化模块，用于根据所述待布局网页的内置规则，将待放置组件的配置项转化为相应的数据信息；

计算模块，用于根据所述数据信息，计算得到所述待放置组件的有效特征；

根据所述有效特征，计算得到所述待放置组件的布局权重；

存储模块，用于根据所述布局权重，得到所述待放置组件的用户历史操作习惯，并将所述用户历史操作习惯存入所述数据库。

可选地，所述计算模块具体用于：

将所述数据信息作为所述待放置组件的原始特征；

将所述原始特征进行线性特征提取，计算得到有效特征。

可选地，所述计算模块具体用于：

将原始特征进行去平均值的操作；

计算去平均值后的原始特征对应的协方差矩阵，得到特征值和特征向量；

将所述特征值和特征向量作为有效特征。

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

调整模块，用于响应用户调整所述目标组件在所述可拖放组件的页面的位置的操作，对所述目标组件在所述可拖放组件的页面的位置进行调整。

本申请提供一种页面布局方法及装置，所述方法包括：用户在登录网页时，用户的身份信息会被确认，在身份信息确认后，数据库中存储的用户对应的历史操作习惯也会被确认。用户在拖动组件到待布局网页的页面上进行布局时，拖动到页面的组件会根据用户的历史操作习惯自动吸附至预设位置。采用本申请提供的页面布局方法，能够使用户对制作页面进行快速的布局，不需要手动的对每个组件进行排版放置，提高了工作效率。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍。应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定。对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本申请实施例提供的计算机设备的结构框图；

图2为本申请实施例提供的页面布局方法的步骤流程示意框图；

图3为本申请实施例提供的获取用户历史操作习惯的步骤流程示意图；

图4为图3中步骤S25的子步骤流程示意图；

图5为图4中步骤S252的子步骤流程示意图；

图6为本申请实施例提供的页面布局装置的结构示意框图。

图标：100-计算机设备；110-页面布局装置；111-存储器；112-处理器；113-通信单元；1101-初始化模块；1102-登录模块；1103-布置模块；1104-转化模块；1105-计算模块；1106-存储模块；1107-调整模块。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

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

在本申请的描述中，还需要说明的是，除非另有明确的规定和限定，“设置”、“连接”等术语应做广义理解，例如，“连接”可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接连接，也可以通过中间媒介间接连接，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本申请中的具体含义。

下面结合附图，对本申请的具体实施方式进行详细说明。

请参照图1，图1为本申请实施例提供的计算机设备的结构框图。所述计算机设备100包括页面布局装置110、存储器111、处理器112及通信单元113。

所述存储器111、处理器112以及通信单元113各元件相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。所述页面布局装置110包括至少一个可以软件或固件(firmware)的形式存储于所述存储器111中或固化在所述计算机设备100的操作系统(operating system，OS)中的软件功能模块。所述处理器112用于执行所述存储器111中存储的可执行模块，例如所述页面布局装置110所包括的软件功能模块及计算机程序等。

其中，所述存储器111可以是，但不限于，随机存取存储器(Random Access Memory，RAM)，只读存储器(Read Only Memory，ROM)，可编程只读存储器(Programmable Read-Only Memory，PROM)，可擦除只读存储器(Erasable Programmable Read-Only Memory，EPROM)，电可擦除只读存储器(Electric Erasable Programmable Read-Only Memory，EEPRO M)等。其中，存储器111用于存储程序或者数据。

请参照图2，图2为本申请实施例提供的页面布局方法的步骤流程示意框图。所述方法包括步骤S21、步骤S22和步骤S23。

步骤S21，将待布局网页中可拖放组件的页面进行初始化。

在本实施例中，可以先对待布局网页中可拖放组件的页面进行初始化的操作，可以包括对组件所在的组件列表进行加载，对页面中的网格位置进行加载(网格位置可以用于确定组件在页面中的坐标)。在其他实施例中，初始化还可以包括对待布局网页中可拖放组件的页面的功能进行加载(例如，拖动、复制、删除等)。

步骤S22，获取登录所述待布局网页的用户的身份信息，并根据所述身份信息，从预存有用户历史操作习惯的数据库中查找登陆所述待布局网页的用户的历史操作习惯。

在本实施例中，用户可以通过账户密码的方式确定自己的身份信息，用户自己的身份信息对应自己的历史操作习惯，在本实施例中，用户的历史操作习惯可以存放在数据库中，而数据库可以通过网络与待布局网页进行交互。

步骤S23，响应所述用户将目标组件拖放至所述可拖放组件的页面上的操作，并根据查找到的所述历史操作习惯，将所述目标组件自动布置到所述可拖放组件的页面的相应位置。

在本实施例中，被用户选中的目标组件自动布置到可拖放组件的页面的方式可以是磁力吸附的方式。例如，用户此时正在制作中公司的财务报表，组件列表中，可以包括“年度财务支出”、“年度工资发放”、“年度财务收入”、“年度经营利润”、“新员工入职人数”和“老员工离职人数”。在本实施例中，各个组件中可以包括更详细的信息，例如，在“年度财务支出”组件中，可以包括购买、差旅费、罚款等多项支出数据，用户在进行报表制作的时候，只需要将对应的信息填写到对应的组件中。

在用户历史操作习惯中，用户可以将“年度财务支出”、“年度工资发放”、“年度财务收入”和“年度经营利润”设置为宽度为2，高度为1的方形组件，其数据展现形式可以是柱状图。可以将“新员工入职人数”和“老员工离职人数”设置为半径为3的圆形组件，其数据展现形式可以是饼状图。在用户历史操作习惯中，可以依次将“年度财务支出”、“年度工资发放”、“年度财务收入”和“年度经营利润”组件依次按照从上至下的位置关系排列，并且“年度财务支出”、“年度工资发放”、“年度财务收入”和“年度经营利润”组件的位置可以处于页面的右上角位置，而“新员工入职人数”和“老员工离职人数”可以依次按照从左至右的关系排列，并且“新员工入职人数”和“老员工离职人数”组件可以处于页面的左下角位置。

当用户登录网页并验证身份信息后，此时待布局网页从数据库中获取对应身份信息的历史操作。此时用户可以选择“年度财务支出”组件，并将“年度财务支出”组件拖动至可拖放组件的页面上，当“年度财务支出”组件拖动至可拖放组件的页面上时，会自动对自身构架进行调整，调整为宽度为2，高度为1的方形组件，并且会自动吸附到页面的右上角位置。此时用户可以选择“年度财务收入”组件进行同样的操作，“年度财务收入”组件在拖动至可拖放组件的页面上时，也会对自身架构进行调整，调整为宽度为2，高度为1的方形组件，并且会吸附到“年度财务支出”组件的下方，若此时用户对“年度工资发放”组件进行放置操作，“年度工资发放”组件会自动调整为宽度为2，高度为1的方形组件，并且会改变“年度财务支出”组件的位置，以使“年度财务支出”、“年度工资发放”和“年度财务收入”，按照从上至下的顺序进行排列，相当于“年度工资发放”组件在用户操作习惯中由于更靠近“年度财务支出”组件，所以在进行布局时会将“年度财务收入”组件的位置进行下调。

应当理解的是，根据用户历史操作习惯，此时用户不论先后的对“新员工入职人数”和“老员工离职人数”组件进行放置在可拖放的页面上的操作，“新员工入职人数”和“老员工离职人数”组件都会自动调整为半径为3的圆形组件，并且可以自动按照从左至右的顺序布置在页面的左下角位置。

请参照图3，图3为本申请实施例提供的获取用户历史操作习惯的步骤流程示意图。包括步骤S24、步骤S25、步骤S26和步骤S27。

步骤S24，根据所述待布局网页的内置规则，将待放置组件的配置项转化为相应的数据信息。

步骤S25，根据所述数据信息，计算得到所述待放置组件的有效特征。

步骤S26，根据所述有效特征，计算得到所述待放置组件的布局权重。

步骤S27，根据所述布局权重，得到所述待放置组件的用户历史操作习惯，并将所述用户历史操作习惯存入所述数据库。

在本实施例中，待放置组件的配置项可以是待放置组件的形状、大小，例如可以将待放置组件的配置项转化为宽2、高1的方形组件，其中，数据信息可以是待放置组件的宽高对应的数值“2”和“1”。待放置组件的配置项还可以是待放置组件的坐标位置，例如，待放置组件在页面中的相对坐标可以是(1，1)，此时数据信息可以是待放置组件的坐标(1，1)。

请参照图4，图4为图3中步骤S25的子步骤流程示意图。在本实施例中，步骤S25可以包括子步骤S251和子步骤S252。

步骤S251，将所述数据信息作为所述待放置组件的原始特征。

步骤S252，将所述原始特征进行线性特征提取，计算得到有效特征。

请参照图5，图5为图4中步骤S252的子步骤流程示意图。在本实施例中，步骤S252可以包括子步骤S2521、子步骤S2522和子步骤2523。

步骤S2521，将原始特征进行去平均值的操作。

步骤S2522，计算去平均值后的原始特征对应的协方差矩阵，得到特征值和特征向量。

步骤S2523，将所述特征值和特征向量作为有效特征。

应当理解的是，在本实施例中，在获取有效特征采用的算法原理可以是将一个高维向量x，通过一个特殊的特征向量矩阵U，投影到一个低维的向量空间中，表征为一个低维向量y，并且仅仅损失了一些次要信息。也就是说，通过低维表征的向量和特征向量矩阵，可以基本重构出所对应的原始高维向量。以此来获取我们需要的有效特征。

进一步地，所述方法还包括：

响应用户调整所述目标组件在所述可拖放组件的页面的位置的操作，对所述目标组件在所述可拖放组件的页面的位置进行调整。

在本实施例中，在根据用户历史操作习惯将目标组件进行自动布局后，用户也可以根据实际情况对目标组件的排列进行进一步地调整，调整的过程也可以被作为获取用户历史操作习惯的依据。

请参照图6，图6为本申请实施例提供的页面布局装置110的结构示意框图。所述装置包括：

初始化模块1101，用于将待布局网页中可拖放组件的页面进行初始化；

登录模块1102，用于获取登录所述待布局网页的用户的身份信息，并根据所述身份信息，从预存有用户历史操作习惯的数据库中查找登陆所述待布局网页的用户的历史操作习惯；

布置模块1103，用于响应所述用户将目标组件拖放至所述可拖放组件的页面上的操作，并根据查找到的所述历史操作习惯，将所述目标组件自动布置到所述可拖放组件的页面的相应位置。

进一步地，所述装置还包括：

转化模块1104，用于根据所述待布局网页的内置规则，将待放置组件的配置项转化为相应的数据信息；

计算模块1105，用于根据所述数据信息，计算得到所述待放置组件的有效特征；

根据所述有效特征，计算得到所述待放置组件的布局权重；

存储模块1106，用于根据所述布局权重，得到所述待放置组件的用户历史操作习惯，并将所述用户历史操作习惯存入所述数据库。

进一步地，所述计算模块1105具体用于：

将所述数据信息作为所述待放置组件的原始特征；

将所述原始特征进行线性特征提取，计算得到有效特征。

进一步地，所述计算模块1105具体用于：

将原始特征进行去平均值的操作；

计算去平均值后的原始特征对应的协方差矩阵，得到特征值和特征向量；

将所述特征值和特征向量作为有效特征。

进一步地，所述装置还包括：

调整模块1107，用于响应用户调整所述目标组件在所述可拖放组件的页面的位置的操作，对所述目标组件在所述可拖放组件的页面的位置进行调整。

在本实施例中，页面布局装置110的实现原理请参照前述页面布局方法的实现原理，在此不再赘述。

综上所述，采用本申请提供的页面布局方法，能够使用户对制作页面进行快速的布局，不需要手动的对每个组件进行排版放置，提高了工作效率。

以上所述仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。