web页面构建方法及装置

技术领域

本发明涉及网页开发技术领域，特别是涉及一种web页面构建方法及装置。

背景技术

随着互联网技术的不断发展，网络服务已逐渐成为人们日常生活中不可缺少的一部分，其中网络服务通常需要通过网络页面开发来实现，而对网页开发而言，如何快速地构建出合适的页面是网页开发过程中的一个极为重要的实现因素。

目前，web页面丰富多样，活动规则变化频繁，每次的变化都需要研发修改业务代码，大到一块业务逻辑，小到一个文字图片，都需要研发来支持。在每次开发新的web页面或对web页面进行修改时，需要开发者人工根据需求对组件的属性及应用进行不断摸索，并进行代码调整，从而使得组件的构建效率不高，进而导致整体的网页开发搭建效率不高。

发明内容

有鉴于此，本发明提供一种web页面构建方法，通过该方法，无需在每次构建web页面时开发调整代码，提高网页开发搭建的效率。

本发明还提供了一种web页面构建装置，用以保证上述方法在实际中的实现及应用。

一种web页面构建方法，包括：

响应于用户发送的页面构建请求，并基于所述页面构建请求，加载预先设置的组件编辑平台，所述组件编辑平台中包含多个已构建的web组件；

当接收到所述用户发送的组件选择信息时，基于所述组件选择信息，确定所述用户在所述组件编辑平台的各个web组件中选择的，用于构建web页面的各个目标web组件；

获取每个所述目标web组件的组件信息，及每个所述组件信息中包含的目标web组件对应的位置标识；

基于每个所述目标web组件对应的位置标识及所述组件选择信息，确定各个所述目标web组件之间的嵌套关系；

基于每个所述目标web组件的组件信息，以及各个所述目标web组件之间的嵌套关系，生成页面描述文件；

在预先设置的编辑器内加载所述页面描述文件，以通过所述页面描述文件渲染各个所述目标web组件，生成web页面。

上述的方法，可选的，在所述组件编辑平台中构建各个web组件的过程，包括：

获取已上传至所述组件编辑平台的各个组件源代码；

调用预先设置的组件构建工具，对各个所述组件源代码进行编译，获得每个组件源代码对应的代码文件；

将各个所述代码文件进行压缩和打包，获得每个组件源代码对应的web组件，并将各个web组件存储至组件编辑平台的内容分发网络CDN中，并生成每个所述web组件对应的唯一资源地址。

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

当接收到组件变更消息时，确定所述组件变更消息对应的web组件；

获取所述组件变更消息中包含的组件参数；

应用所述组件参数对所述组件变更消息对应的web组件进行调整，以获得所述组件变更消息对应的web组件的组件版本。

上述的方法，可选的，所述基于所述组件选择信息，确定所述用户在所述组件编辑平台的各个web组件中选择的，用于构建web页面的各个目标web组件，包括：

获取所述组件选择信息中包含的各个标识信息，并确定每个所述标识信息对应的web组件为目标web组件；

检查每个所述标识信息中是否包含版本标识号，所述版本标识号用于表示该版本标识号所属的标识信息对应的目标web组件的组件版本；

若存在任意的标识信息中包含版本标识号，则确定所述版本标识号对应的组件版本为目标版本；获取所述目标版本对应的唯一资源地址，通过所述目标版本对应的唯一资源地址，获得所述标识信息对应的组件版本为所述目标版本的目标web组件；

若存在任意的标识信息中不包含版本标识号，则确定所述标识信息对应的目标web组件的最新版本；获取所述最新版本对应的唯一资源地址，通过所述最新版本对应的唯一资源地址，获得所述标识信息对应的组件版本为所述最新版本的目标web组件。

上述的方法，可选的，所述基于每个所述目标web组件对应的位置标识及所述组件选择信息，确定各个所述目标web组件之间的嵌套关系，包括：

将各个所述目标web组件拖拽至预先设置的页面编辑器中，并根据每个所述目标web组件对应的位置标识，确定各个所述目标web组件之间的初始嵌套关系；

基于各个所述目标web组件之间的初始嵌套关系，生成各个所述目标web组件对应的页面树；

获取所述组件选择信息中每个所述目标web组件对应的位置参数，并根据每个所述目标web组件对应的位置参数，变更每个所述目标web组件对应的位置标识；

基于已变更的各个位置标识，调整各个所述目标web组件在所述页面树中的位置，以确定各个所述目标web组件之间新的嵌套关系。

一种web页面构建装置，包括：

加载单元，用于响应于用户发送的页面构建请求，并基于所述页面构建请求，加载预先设置的组件编辑平台，所述组件编辑平台中包含多个已构建的web组件；

第一确定单元，用于当接收到所述用户发送的组件选择信息时，基于所述组件选择信息，确定所述用户在所述组件编辑平台的各个web组件中选择的，用于构建web页面的各个目标web组件；

获取单元，用于获取每个所述目标web组件的组件信息，及每个所述组件信息中包含的目标web组件对应的位置标识；

第二确定单元，用于基于每个所述目标web组件对应的位置标识及所述组件选择信息，确定各个所述目标web组件之间的嵌套关系；

第一生成单元，用于基于每个所述目标web组件的组件信息，以及各个所述目标web组件之间的嵌套关系，生成页面描述文件；

第二生成单元，用于在预先设置的编辑器内加载所述页面描述文件，以通过所述页面描述文件渲染各个所述目标web组件，生成web页面。

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

构建单元，用于获取已上传至所述组件编辑平台的各个组件源代码；调用预先设置的组件构建工具，对各个所述组件源代码进行编译，获得每个组件源代码对应的代码文件；将各个所述代码文件进行压缩和打包，获得每个组件源代码对应的web组件，并将各个web组件存储至组件编辑平台的内容分发网络CDN中，并生成每个所述web组件对应的唯一资源地址。

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

变更单元，用于当接收到组件变更消息时，确定所述组件变更消息对应的web组件；获取所述组件变更消息中包含的组件参数；应用所述组件参数对所述组件变更消息对应的web组件进行调整，以获得所述组件变更消息对应的web组件的组件版本。

上述的装置，可选的，所述第一确定单元，包括：

第一确定子单元，用于获取所述组件选择信息中包含的各个标识信息，并确定每个所述标识信息对应的web组件为目标web组件；

检查子单元，用于检查每个所述标识信息中是否包含版本标识号，所述版本标识号用于表示该版本标识号所属的标识信息对应的目标web组件的组件版本；

第一获取子单元，用于若存在任意的标识信息中包含版本标识号，则确定所述版本标识号对应的组件版本为目标版本；获取所述目标版本对应的唯一资源地址，通过所述目标版本对应的唯一资源地址，获得所述标识信息对应的组件版本为所述目标版本的目标web组件；

第二获取子单元，用于若存在任意的标识信息中不包含版本标识号，则确定所述标识信息对应的目标web组件的最新版本；获取所述最新版本对应的唯一资源地址，通过所述最新版本对应的唯一资源地址，获得所述标识信息对应的组件版本为所述最新版本的目标web组件。

上述的装置，可选的，所述第二确定单元，包括：

第二确定子单元，用于将各个所述目标web组件拖拽至预先设置的页面编辑器中，并根据每个所述目标web组件对应的位置标识，确定各个所述目标web组件之间的初始嵌套关系；

生成子单元，用于基于各个所述目标web组件之间的初始嵌套关系，生成各个所述目标web组件对应的页面树；

变更子单元，用于获取所述组件选择信息中每个所述目标web组件对应的位置参数，并根据每个所述目标web组件对应的位置参数，变更每个所述目标web组件对应的位置标识；

第三确定子单元，用于基于已变更的各个位置标识，调整各个所述目标web组件在所述页面树中的位置，以确定各个所述目标web组件之间新的嵌套关系。

一种存储介质，所述存储介质包括存储的指令，其中，在所述指令运行时控制所述存储介质所在的设备执行上述的web页面构建方法。

一种电子设备，包括存储器，以及一个或者一个以上的指令，其中一个或者一个以上指令存储于存储器中，且经配置以由一个或者一个以上处理器执行上述的web页面构建方法。

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

本发明提供了一种web页面构建方法，包括：响应于用户发送的页面构建请求，并基于所述页面构建请求，加载预先设置的组件编辑平台，所述组件编辑平台中包含多个已构建的web组件；当接收到所述用户发送的组件选择信息时，基于所述组件选择信息，确定所述用户在所述组件编辑平台的各个web组件中选择的，用于构建web页面的各个目标web组件；获取每个所述目标web组件的组件信息，及每个所述组件信息中包含的目标web组件对应的位置标识；基于每个所述目标web组件对应的位置标识及所述组件选择信息，确定各个所述目标web组件之间的嵌套关系；基于每个所述目标web组件的组件信息，以及各个所述目标web组件之间的嵌套关系，生成页面描述文件；在预先设置的编辑器内加载所述页面描述文件，以通过所述页面描述文件渲染各个所述目标web组件，生成web页面。应用本发明提供的方法，无需在每次构建web页面时开发调整代码，提高网页开发搭建的效率。

附图说明

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

图1为本发明式实施例提供的一种web页面构建方法的方法流程图；

图2为本发明式实施例提供的一种web页面构建方法的又一方法流程图；

图3为本发明式实施例提供的一种web页面构建方法的再一方法流程图；

图4为本发明式实施例提供的一种web页面构建装置的装置结构图；

图5为本发明式实施例提供的一种电子设备结构示意图。

具体实施方式

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

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

本发明可用于众多通用或专用的计算装置环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器装置、包括以上任何装置或设备的分布式计算环境等等。

本发明实施例提供了一种web页面构建方法，该方法可以应用在多种系统平台，其执行主体可以为计算机终端或各种移动设备的处理器，所述方法的方法流程图如图1所示，具体包括：

S101：响应于用户发送的页面构建请求，并基于所述页面构建请求，加载预先设置的组件编辑平台。

其中，所述组件编辑平台中包含多个已构建的web组件。

在本发明实施例中，用户在需要构建web页面，向处理器发送页面构建请求，处理器对该请求进行响应，并加载出组件编辑平台，将该组件编辑平台显示在预设的显示界面上，用户可以通过该组件编辑平台选择构建web页面的组件。

需要说明的是，本发明中的各个web组件用于表征在web页面中不同的布局、数据展示以及功能的实现等。

S102：当接收到所述用户发送的组件选择信息时，基于所述组件选择信息，确定所述用户在所述组件编辑平台的各个web组件中选择的，用于构建web页面的各个目标web组件。

在本发明实施例中，用户可以在该组件编辑平台中个性化选择需要构建web页面的web组件，用户所选中的各个web组件为目标web组件。

可选的，用户在组件编辑平台选择web组件时，应用预先设定的监听设备监听用户选择web组件的过程，以确定用户最终选定的各个目标web组件。

其中，该组件选择信息中包含多个标识信息，每个标识信息对应用户所选择的每个web组件的组件名称、编号以及版本标识号等信息。

S103：获取每个所述目标web组件的组件信息，及每个所述组件信息中包含的目标web组件对应的位置标识。

在本发明实施例中，web组件的位置标识用于确定组件在渲染至页面时该组件渲染的位置。

S104：基于每个所述目标web组件对应的位置标识及所述组件选择信息，确定各个所述目标web组件之间的嵌套关系。

在本发明实施例中，每个组件信息中的位置标识表征已预先设定的各个组件的固定位置，用户在选择web组件时可以对web组件的位置进行调整，通过用户发送的组件选择信息中用户已调整的组件位置的相关参数，确定各个目标web组件调整的调整位置，以确定各个目标web组件之间最终的位置关系。

S105：基于每个所述目标web组件的组件信息，以及各个所述目标web组件之间的嵌套关系，生成页面描述文件。

在本发明实施例中，页面描述文件为部署web页面的部署文件，该页面描述文件包含各个待渲染的目标web组件、组件信息以及各个目标web组件之间的嵌套关系。

S106：在预先设置的编辑器内加载所述页面描述文件，以通过所述页面描述文件渲染各个所述目标web组件，生成web页面。

在本发明实施例中，通过编辑器对页面描述文件进行脚本编辑，渲染出各个目标web组件，最终生成完整的web页面。

本发明实施例提供的web页面构建方法中，响应用户的页面构建请求，以加载出组件编辑平台，该组件编辑平台内已构建多个web组件，用户可以通过该组件编辑平台选择需要构建web页面的各个web组件。当接收到用户发送的组件选择信息时，表征用户已经选取完成构建web页面的各个目标web组件，获取每个web组件的组件信息，以及组件信息中包含的位置标识，通过位置标识位置以及用户发送的组件选择信息，确定各个目标web组件之间最终的嵌套关系。基于该嵌套关系及每个目标web组件的组件信息生成页面描述文件，在编辑器内加载该文件，有编辑器对该页面描述文件进行编辑，渲染出各个目标web组件，最终生成web页面。

应用本发明实施例提供的方法，无需在每次构建web页面时开发调整代码，提高网页开发搭建的效率。

本发明实施例提供的方法中，组件编辑平台为构建web组件的前端工程，其内部设置有编辑组件的相关代码，用户可以通过该组件编辑平台构建出基础的web组件，以供后续构建web页面的使用。具体的，在该组件编辑平台构建各个web组件的过程，具体可以包括：

获取已上传至所述组件编辑平台的各个组件源代码；

调用预先设置的组件构建工具，对各个所述组件源代码进行编译，获得每个组件源代码对应的代码文件；

将各个所述代码文件进行压缩和打包，获得每个组件源代码对应的web组件，并将各个web组件存储至组件编辑平台的内容分发网络CDN中，并生成每个所述web组件对应的唯一资源地址。

本发明实施例提供的web页面构建方法中，维护人员可以提前向组件编辑平台上传通用的各个组件源代码，每个组件源代码实现一个组件的功能和默认布局等，各个组件源代码可以是由vue前端框架进行开发。组件构建工具可以是Webpack构建工具或npm依赖包管理工具等。Webpack构建工具是前端工程打包构建工具，实现源代码的转换过程；npm依赖包管理工具用于管理包依赖，描述第三方依赖的版本。组件构建工具用于构建web组件，在实现对web组件的开发和构建之前完善组件构建工具的功能，应用依赖库实现组件源代码与组件构建关系之间的依赖关系。当组件构建工具的功能开发完成后，对组件源代码进行编译，获得对应的代码文件。将代码文件经过压缩和打包后，获得规范版本的的web组件，将web组件保存至CDN中，并生成web组件在CDN内存储的唯一资源地址。

需要说明的是，本发明实施例中对组件源代码进行编译的过程是将组件源代码转换成符合设定格式的代码文件。在向组件编辑平台上传各个组件源代码时，各个组件源代码的格式可能不符合平台的语义规范，因此需要将源代码进行语义规范。

还需要说明的是，同一个web组件在CDN中可以拥有多个版本，当在组件编辑平台中生成第一版本的web组件后，维护人员可以按照需求对web组件进行更新和升级，获得更多版本的web组件，同一个web组件的各个版本对应的唯一资源地址可以都不相同。

进一步地，更新web组件的组件版本的过程，具体可以包括：

当接收到组件变更消息时，确定所述组件变更消息对应的web组件；

获取所述组件变更消息中包含的组件参数；

应用所述组件参数对所述组件变更消息对应的web组件进行调整，以获得所述组件变更消息对应的web组件的组件版本。

可以理解的是，在组件编辑平台生成web组件后，可以随时变更web组件的组件版本。在更新web组件的组件版本的过程中，需要接收发送的组件变更消息，并从该组件变更消息中确定当前需要更新版本的微博组件。获取该组件变更消息中包含的组件参数，定位web组件需要变更的参数位置，并根据该参数位置进行组件参数调整，获得新的组件版本的web组件并对其进行存储，为其分配对应的唯一资源地址。

需要说明的是，web组件在更新组件版本后，同时保存旧版本的web组件和新版本的web组件，用户可以根据意愿随时调用各个组件版本的web组件。

应用本发明实施例提供的方法，在组件编辑平台上构建各个web组件后，用户无需在构建web页面时重新编写新的代码，直接对选择web组件构成web页面，同时还能实时更新web组件的组件版本，实现web组件的多样化。

本发明实施例提供的方法中，基于上述S102的内容，所述基于所述组件选择信息，确定所述用户在所述组件编辑平台的各个web组件中选择的，用于构建web页面的各个目标web组件的过程如图2所示，具体可以包括：

S201：获取所述组件选择信息中包含的各个标识信息，并确定每个所述标识信息对应的web组件为目标web组件。

在本发明实施例中，该选择信息中包含多个标识信息，每个标识信息对应用户所选择的每个web组件的组件名称、编号以及版本标识号号等信息。组件编辑平台中的每个web组件均对应至少一个组件版本，在根据标识信息确定用户选中的各个web组件后，

S202：检查每个所述标识信息中是否包含版本标识号；若是，则执行S203；若否，则执行S205。

其中，所述版本标识号用于表示该版本标识号所属的标识信息对应的目标web组件的组件版本。

在本发明实施例中，用户在选择web组件时可以同时选择web组件的组件的版本，若用户选择web组件的组件版本，则该标识信息中包含版本标识号。

S203：若存在任意的标识信息中包含版本标识号，则确定所述版本标识号对应的组件版本为目标版本。

在本发明实施例中，若标识信息中包含版本标识号，则用户所选择的版本标识号对应的组件版本为目标版本，并执行S204。

S204：获取所述目标版本对应的唯一资源地址，通过所述目标版本对应的唯一资源地址，获得所述标识信息对应的组件版本为所述目标版本的目标web组件。

在本发明实施例中，该唯一资源地址为标识信息对应的组件版本为目标版本的目标web组件的存储地址，通过该唯一资源地址获取该目标web组件。

S205：若存在任意的标识信息中不包含版本标识号，则确定所述标识信息对应的目标web组件的最新版本。

在本发明实施例中，若标识信息中不包含版本标识号，则表征用户没有选择该标识信息对应的目标web组件的组件版本，默认该目标web组件为最新版本。

S206：获取所述最新版本对应的唯一资源地址，通过所述最新版本对应的唯一资源地址，获得所述标识信息对应的组件版本为所述最新版本的目标web组件。

在本发明实施中，与上述S204实施过程一致，最新版本对应的唯一资源地址，获取标识信息对应的组件版本为最新版本的目标web组件。

本发明实施例提供的web页面构建方法中，用户在需要构建web页面时，发送选择web组件的选择信息，该选择信息中包含对组件版本进行选择的标识信息，每个标识信息对应一个web组件，将标识信息对应的web组件确定为目标web组件。对于每个标识信息，检查该标识信息中是否包含用于表征用户已选择组件版本的版本标识号。若包含，则需要获取该标识信息对应的组件版本为该版本标识号对应的组件版本的web组件。将该版本标识号对应的组件版本确定为目标版本，并获取该目标版本对应的位置资源地址，通过该唯一资源地址该web组件。若标识信息不包含版本标识号，则默认该标识信息对应的目标web组件的组件版本为最新版本，获取该最新版本的唯一资源地址，通过最新版本的唯一资源地址获取该目标web组件。

基于上述实施例提供的方法，以web组件A为例，目前web组件A有1.0、2.0以及3.0三个版本，其中3.0版本为最新版本，因此，获取web组件A的具体过程如下：

当在组件选择信息中确定包含web组件A对应的标识信息，则该web组件A为目标组件。检查该标识信息是否包含版本标识。若该标识信息包含版本标识，且该版本标识对应的组件版本为1.0，则获取该web组件A组件版本为1.0对应的唯一资源地址，通过该唯一资源地址获取1.0版本的web组件A；若标识信息不包含版本标识，则默认当前用户所选择的组件版本为3.0版本，获取web组件A组件版本为3.0对应的唯一资源地址，通过该唯一资源地址获取3.0版本的web组件A。

应用本发明实施例提供的方法，用户在选择web组件是，可以根据组件版本选择不同版本的web组件，实现web页面的多样性。

本发明实施例提供的方法，基于上述S104的内容，所述基于每个所述目标web组件对应的位置标识及所述组件选择信息，确定各个所述目标web组件之间的嵌套关系的过程如图3所示，具体可以包括：

S301：将各个所述目标web组件拖拽至预先设置的页面编辑器中，并根据每个所述目标web组件对应的位置标识，确定各个所述目标web组件之间的初始嵌套关系。

在本发明实施例中，每个web组件的组件信息中，包含web组件初始设定的位置标识，通过位置标识确定各个web组件的初始嵌套关系。

S302：基于各个所述目标web组件之间的初始嵌套关系，生成各个所述目标web组件对应的页面树。

在本发明实施例中，在该页面编辑器中生成各个目标web组件对应的页面树，在该页面树中，各个目标web组件之间均有着对应的位置关系。

S303：获取所述组件选择信息中每个所述目标web组件对应的位置参数，并根据每个所述目标web组件对应的位置参数，变更每个所述目标web组件对应的位置标识。

在本发明实施例中，用户在选择web组件时可以变更web组件的位置，通过该组件选择信息获取用户输入的每个目标web组件对应位置参数，以根据位置参数变更目标web组件的位置标识。

可以理解的是，用户在选择web组件的过程中，弹出每个web组件对应的位置选择框，选择框中显示web组件的初始位置参数，用户可以对该初始位置参数进行变更，也可以选择不变更。因此，该组件选择信息中每个web组件的位置参数可以是初始位置参数，也可以是变更后的位置参数。

S304：基于已变更的各个位置标识，调整各个所述目标web组件在所述页面树中的位置，以确定各个所述目标web组件之间新的嵌套关系。

在本发明实施例中，当位置标识发生变更时，web组件在页面树中的位置也将发生变化，则各个目标web组件之间的嵌套关系也发生变化，变化后的嵌套关系为各个目标web组件之间需要渲染的嵌套关系。

本发明实施例提供的web页面构建方法中，当用户选中各个目标web页面后，将各个目标web页面拖拽至页面编辑器中，通过页面编辑器确定各个目标web页面之间初始的嵌套关系。通过初始嵌套关系生成页面树，并获取组件选择信息中每个目标web页面对应的位置参数，通过位置参数重新调整每个目标web组件的位置标识，并调整目标web组件在页面树中的位置，以获得最终调整之后的各个目标web组件之间的嵌套关系。

应用本发明实施例提供的方法，通过各个web组件之间的嵌套关系，可以在生成web页面时，定位各个web组件在页面上的位置。

上述各个实施例的具体实施过程及其衍生方式，均在本发明的保护范围之内。

与图1所述的方法相对应，本发明实施例还提供了一种web页面构建装置，用于对图1中方法的具体实现，本发明实施例提供的web页面构建装置可以应用计算机终端或各种移动设备中，其结构示意图如图4所示，具体包括：

加载单元401，用于响应于用户发送的页面构建请求，并基于所述页面构建请求，加载预先设置的组件编辑平台，所述组件编辑平台中包含多个已构建的web组件。

第一确定单元402，用于当接收到所述用户发送的组件选择信息时，基于所述组件选择信息，确定所述用户在所述组件编辑平台的各个web组件中选择的，用于构建web页面的各个目标web组件。

获取单元403，用于获取每个所述目标web组件的组件信息，及每个所述组件信息中包含的目标web组件对应的位置标识。

第二确定单元404，用于基于每个所述目标web组件对应的位置标识及所述组件选择信息，确定各个所述目标web组件之间的嵌套关系。

第一生成单元405，用于基于每个所述目标web组件的组件信息，以及各个所述目标web组件之间的嵌套关系，生成页面描述文件。

第二生成单元406，用于在预先设置的编辑器内加载所述页面描述文件，以通过所述页面描述文件渲染各个所述目标web组件，生成web页面。

本发明实施例提供的web页面构建装置中，响应用户的页面构建请求，以加载出组件编辑平台，该组件编辑平台内已构建多个web组件，用户可以通过该组件编辑平台选择需要构建web页面的各个web组件。当接收到用户发送的组件选择信息时，表征用户已经选取完成构建web页面的各个目标web组件，获取每个web组件的组件信息，以及组件信息中包含的位置标识，通过位置标识位置以及用户发送的组件选择信息，确定各个目标web组件之间最终的嵌套关系。基于该嵌套关系及每个目标web组件的组件信息生成页面描述文件，在编辑器内加载该文件，有编辑器对该页面描述文件进行编辑，渲染出各个目标web组件，最终生成web页面。

应用本发明实施例提供的装置，无需在每次构建web页面时开发调整代码，提高网页开发搭建的效率。

本发明实施例提供的装置中，还包括：

构建单元，用于获取已上传至所述组件编辑平台的各个组件源代码；调用预先设置的组件构建工具，对各个所述组件源代码进行编译，获得每个组件源代码对应的代码文件；将各个所述代码文件进行压缩和打包，获得每个组件源代码对应的web组件，并将各个web组件存储至组件编辑平台的内容分发网络CDN中，并生成每个所述web组件对应的唯一资源地址。

本发明实施例提供的装置中，还包括：

变更单元，用于当接收到组件变更消息时，确定所述组件变更消息对应的web组件；获取所述组件变更消息中包含的组件参数；应用所述组件参数对所述组件变更消息对应的web组件进行调整，以获得所述组件变更消息对应的web组件的组件版本。

本发明实施例提供的装置中，所述第一确定单元，包括：

第一确定子单元，用于获取所述组件选择信息中包含的各个标识信息，并确定每个所述标识信息对应的web组件为目标web组件；

检查子单元，用于检查每个所述标识信息中是否包含版本标识号，所述版本标识号用于表示该版本标识号所属的标识信息对应的目标web组件的组件版本；

第一获取子单元，用于若存在任意的标识信息中包含版本标识号，则确定所述版本标识号对应的组件版本为目标版本；获取所述目标版本对应的唯一资源地址，通过所述目标版本对应的唯一资源地址，获得所述标识信息对应的组件版本为所述目标版本的目标web组件；

第二获取子单元，用于若存在任意的标识信息中不包含版本标识号，则确定所述标识信息对应的目标web组件的最新版本；获取所述最新版本对应的唯一资源地址，通过所述最新版本对应的唯一资源地址，获得所述标识信息对应的组件版本为所述最新版本的目标web组件。

本发明实施例提供的装置中，所述第二确定单元，包括：

第二确定子单元，用于将各个所述目标web组件拖拽至预先设置的页面编辑器中，并根据每个所述目标web组件对应的位置标识，确定各个所述目标web组件之间的初始嵌套关系；

生成子单元，用于基于各个所述目标web组件之间的初始嵌套关系，生成各个所述目标web组件对应的页面树；

变更子单元，用于获取所述组件选择信息中每个所述目标web组件对应的位置参数，并根据每个所述目标web组件对应的位置参数，变更每个所述目标web组件对应的位置标识；

第三确定子单元，用于基于已变更的各个位置标识，调整各个所述目标web组件在所述页面树中的位置，以确定各个所述目标web组件之间新的嵌套关系。

以上本发明实施例公开的web页面构建装置中各个单元及子单元的具体工作过程，可参见本发明上述实施例公开的web页面构建方法中的对应内容，这里不再进行赘述。

本发明实施例还提供了一种存储介质，所述存储介质包括存储的指令，其中，在所述指令运行时控制所述存储介质所在的设备执行上述web页面构建方法。

本发明实施例还提供了一种电子设备，其结构示意图如图5所示，具体包括存储器501，以及一个或者一个以上的指令502，其中一个或者一个以上指令502存储于存储器501中，且经配置以由一个或者一个以上处理器503执行所述一个或者一个以上指令502进行以下操作：

响应于用户发送的页面构建请求，并基于所述页面构建请求，加载预先设置的组件编辑平台，所述组件编辑平台中包含多个已构建的web组件；

当接收到所述用户发送的组件选择信息时，基于所述组件选择信息，确定所述用户在所述组件编辑平台的各个web组件中选择的，用于构建web页面的各个目标web组件；

获取每个所述目标web组件的组件信息，及每个所述组件信息中包含的目标web组件对应的位置标识；

基于每个所述目标web组件对应的位置标识及所述组件选择信息，确定各个所述目标web组件之间的嵌套关系；

基于每个所述目标web组件的组件信息，以及各个所述目标web组件之间的嵌套关系，生成页面描述文件；

在预先设置的编辑器内加载所述页面描述文件，以通过所述页面描述文件渲染各个所述目标web组件，生成web页面。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统或系统实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的系统及系统实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现。

为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

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