CN111580819B - 页面生成方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本申请涉及一种页面生成方法、装置、计算机设备和存储介质。所述方法包括：获取页面布局组件；页面布局组件中设置有至少一个的候选布局模板。从候选布局模板中选择至少一个的目标布局模板，并将选择的目标布局模板进行组合，得到目标布局结构。确定目标布局结构中的子组件插槽。获取在子组件插槽中输入的业务代码。根据目标布局结构的代码和业务代码，生成符合目标布局结构的目标页面。采用本方法能够减少代码冗余。

Description

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

技术领域

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

背景技术

在前端开发领域中，常常会涉及到页面布局，比如，对web端后台系统(如，后台运维系统)的页面布局。页面布局是将文字和图片等元素有规则的设计在网页中。好的页面布局能够让前端开发人员更好的把握网页的整体结构，提高代码的书写效率，代码的复用性以及后期对代码的维护效率。

目前，当前端开发人员需要开发一个新页面时，通常会复制一个已有的、且与将要开发的新页面具有相同布局的界面对应的代码，然后再修改对应的业务代码，以生成目标页面。传统的页面生成方法，每生成一个新的页面均需复制具有相同布局的界面对应的代码，从而导致代码的冗余。

发明内容

基于此，有必要针对上述技术问题，提供一种能够减少代码冗余的页面生成方法、装置、计算机设备和存储介质。

一种页面生成方法，所述方法包括：

获取页面布局组件；所述页面布局组件中设置有至少一个的候选布局模板；

从所述候选布局模板中选择至少一个的目标布局模板，并将选择的所述目标布局模板进行组合，得到目标布局结构；

确定所述目标布局结构中的子组件插槽；

获取在所述子组件插槽中输入的业务代码；

根据所述目标布局结构的代码和所述业务代码，生成符合所述目标布局结构的目标页面。

在其中一个实施例中，所述根据所述目标布局结构的代码和所述业务代码，生成符合所述目标布局结构的目标页面，包括：

根据所述子组件插槽，确定对应的所述子组件在相应父组件中的位置；

将所述业务代码插入至所述位置中，以将所述业务代码和所述目标布局结构的代码进行融合处理，得到目标代码；

根据所述目标代码，生成符合所述目标布局结构的目标页面。

在其中一个实施例中，所述目标布局结构中包括页面组件；所述根据所述目标代码，生成符合所述目标布局结构的目标页面，包括：

确定所述页面组件的父组件；

根据所述页面组件的父组件所对应的宽度和高度、以及所述页面组件的宽属性和高属性，分别确定目标页面宽度和目标页面高度；所述页面组件的宽属性和高属性，用于指示所述目标页面宽度和目标页面高度继承所述页面组件的父组件所对应的宽度和高度；

根据所述目标代码、所述目标页面宽度和目标页面高度，生成符合所述目标布局结构的目标页面。

在其中一个实施例中，所述根据所述目标代码、所述目标页面宽度和目标页面高度，生成符合所述目标布局结构的目标页面之后，所述方法还包括：

当所述目标布局结构发生改变时，重新确定所述目标布局结构中各子组件插槽对应的子组件的宽度和/或高度；

根据重新确定的所述目标布局结构中各子组件插槽对应的子组件的宽度和/或高度，重新生成符合改变后的目标布局结构的目标页面。

在其中一个实施例中，所述方法还包括：

当检测到所述目标页面对应的浏览器的窗口大小发生改变时，判定所述目标布局结构发生改变；或，

当检测到所述子组件插槽中的第一插槽对应的子组件的折叠状态发生改变时，判定所述目标布局结构发生改变；或，

当检测到所述子组件插槽中的第二插槽对应的子组件的高度发生改变时，判定所述目标布局结构发生改变。

在其中一个实施例中，所述第一插槽对应的子组件中设置有折叠按钮；

所述当检测到所述子组件插槽中的第一插槽对应的子组件的折叠状态发生改变时，判定所述目标布局结构发生改变，包括：

当检测到所述折叠按钮的触发操作时，判定所述目标布局结构发生改变；

所述重新确定所述目标布局结构中各子组件插槽对应的子组件的宽度和/或高度，包括：

调用所述页面组件中的宽度计算函数，重新确定所述目标布局结构中除第一插槽对应的子组件以外的子组件的宽度。

在其中一个实施例中，所述第二插槽中包括作为参照的第二插槽；所述作为参照的第二插槽对应的子组件中设置有展示按钮；

所述重新确定所述目标布局结构中各子组件插槽对应的子组件的宽度和/或高度，包括：

确定所述作为参照的第二插槽在所述展示按钮被触发后所对应的高度，并以所确定的所述高度作为参照，调用所述页面组件中的高度计算函数，重新确定除所述作为参照的第二插槽以外的第二插槽对应的子组件的高度。

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

获取模块，获取页面布局组件；所述页面布局组件中设置有至少一个的候选布局模板；

组合模块，用于从所述候选布局模板中选择至少一个的目标布局模板，并将选择的所述目标布局模板进行组合，得到目标布局结构；

确定模块，用于确定所述目标布局结构中的子组件插槽；

所述获取模块还用于获取在所述子组件插槽中输入的业务代码；

生成模块，用于根据所述目标布局结构的代码和所述业务代码，生成符合所述目标布局结构的目标页面。

一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现以下步骤：

获取页面布局组件；所述页面布局组件中设置有至少一个的候选布局模板；

从所述候选布局模板中选择至少一个的目标布局模板，并将选择的所述目标布局模板进行组合，得到目标布局结构；

确定所述目标布局结构中的子组件插槽；

获取在所述子组件插槽中输入的业务代码；

根据所述目标布局结构的代码和所述业务代码，生成符合所述目标布局结构的目标页面。

一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现以下步骤：

获取页面布局组件；所述页面布局组件中设置有至少一个的候选布局模板；

从所述候选布局模板中选择至少一个的目标布局模板，并将选择的所述目标布局模板进行组合，得到目标布局结构；

确定所述目标布局结构中的子组件插槽；

获取在所述子组件插槽中输入的业务代码；

根据所述目标布局结构的代码和所述业务代码，生成符合所述目标布局结构的目标页面。

上述页面生成方法、装置、计算机设备和存储介质，通过从页面布局组件至少一个的候选布局模板中，选择至少一个的目标布局模板，并将选择的目标布局模板进行组合，得到目标布局结构。确定目标布局结构中的子组件插槽，并获取在子组件插槽中输入的业务代码。进而根据目标布局结构的代码和业务代码，生成符合目标布局结构的目标页面。这样，当前端开发人员需要开发一个新页面时，只需要通过引用的页面布局组件，确定目标布局结构，并在对应子组件插槽中输入的业务代码即可生成目标页面。减少了代码的冗余，提升了代码的复用率。

附图说明

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

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

图3A为一个实施例中候选布局模板的布局结构示意图；

图3B为另一个实施例中候选布局模板的布局结构示意图；

图3C为另一个实施例中候选布局模板的布局结构示意图；

图3D为另一个实施例中候选布局模板的布局结构示意图；

图4为一个实施例中生成目标页面步骤的流程示意图；

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

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

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

具体实施方式

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

本申请提供的页面生成方法，可以应用于如图1所示的应用环境中。该应用环境包括终端102和服务器104。终端102与服务器104通过网络进行通信。其中，终端102具体可以包括台式终端或移动终端。移动终端具体可以包括手机、平板电脑、笔记本电脑等中的至少一种。服务器104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。本领域技术人员可以理解，图1中示出的应用环境，仅仅是与本申请方案相关的部分场景，并不构成对本申请方案应用环境的限定。

终端102从服务器104中获取页面布局组件；页面布局组件中设置有至少一个的候选布局模板。终端102从候选布局模板中选择至少一个的目标布局模板，并将选择的目标布局模板进行组合，得到目标布局结构。终端102确定目标布局结构中的子组件插槽。终端102获取在子组件插槽中输入的业务代码。根据目标布局结构的代码和业务代码，生成符合目标布局结构的目标页面。

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

S202，获取页面布局组件；页面布局组件中设置有至少一个的候选布局模板。

其中，候选布局模板是预先设置在页面布局组件中的、且具有布局结构的模板。

具体地，终端可获取页面布局组件，并确定页面布局组件中设置至少一个的候选布局模板。

在一个实施例中，页面布局组件可存储在服务器中。终端与服务器通过网络连接进行通信，进而终端可从服务器中获取页面布局组件。

在一个实施例中，页面布局组件可存储在终端本地的存储介质中。终端可直接从本地获取页面布局组件。

在一个实施例中，每一个候选布局模板可对应一种布局结构。页面布局组件中可包括多种布局结构。比如，如图3A中的上下结构。图3B中的左右结构。图3C中的左-上下结构。图3D中的左-上中下结构。

举例说明，针对图3D中的左-上中下结构，终端可在左边设置菜单列表，在上边设置带有功能按钮的功能栏，在中部设置表格，在下边设置条数统计。其中，功能按钮可包括新增、查找、修改和删除。菜单列表中可包括菜单一、菜单二和菜单三。表格中可包括表格数据，比如，用户的姓名、年龄、性别和爱好等。

S204，从候选布局模板中选择至少一个的目标布局模板，并将选择的目标布局模板进行组合，得到目标布局结构。

具体地，终端可从确定的候选布局模板中，根据候选布局模板的模板标识，选择设定的至少一个的目标布局模板。终端可将选择的目标布局模板进行组合，得到目标布局结构。

S206，确定目标布局结构中的子组件插槽。

其中，子组件插槽是子组件提供给相应的父组件的占位符，用于当相应的父组件调用该子组件时指定该占位符对应位置具体的内容。

可以理解，父组件和子组件是相对存在的。每个父组件中可包括多个的子组件。父组件可以是其上一级的组件的子组件，子组件也可以作为其下一级的组件的父组件。

在一个实施例中，终端可基于Vue(一套用于构建用户界面的渐进式JavaScript框架)技术栈，并通过CSS3(层叠样式表)的弹性布局(flex)开发得到页面布局组件。终端通过Vue的插槽(slot)技术，为页面布局组件中的子组件提供了至少一个的子组件插槽。比如，子组件插槽可包括left(左)、header(页头)、main(主体)和footer(页尾)等中的至少一种。

可以理解，如图3A中的上下结构，其对应的子组件插槽可包括header(页头)和main(主体)。图3B中的左右结构，其对应的子组件插槽可包括left(左)和main(主体)。图3C中的左-上下结构，其对应的子组件插槽可包括left(左)、header(页头)和main(主体)。图3D中的左-上中下结构，其对应的子组件插槽可包括left(左)、header(页头)、main(主体)和footer(页尾)。

S208，获取在子组件插槽中输入的业务代码。

其中，业务代码是具备业务处理逻辑的代码。

具体地，终端可通过开发人员在子组件插槽中输入的业务代码，进而终端可获取在子组件插槽中输入的业务代码。

在一个实施例中，业务代码具体可以包括html(超文本标记语言)代码、组件、文本、图片、音频、和视频等中的至少一种。

S210，根据目标布局结构的代码和业务代码，生成符合目标布局结构的目标页面。

其中，目标布局结构的代码是目标布局结构对应的结构代码。可以理解，目标布局结构的代码，包括组成目标布局结构的各组件对应的代码。

具体地，终端可获取目标布局结构的代码和在子组件插槽中输入的业务代码。进而，终端可根据目标布局结构的代码和业务代码，生成符合目标布局结构的目标页面。可以理解，终端可将目标布局结构的代码和业务代码在浏览器中进行渲染，得到符合目标布局结构的目标页面。

上述页面生成方法中，通过从页面布局组件至少一个的候选布局模板中，选择至少一个的目标布局模板，并将选择的目标布局模板进行组合，得到目标布局结构。确定目标布局结构中的子组件插槽，并获取在子组件插槽中输入的业务代码。进而根据目标布局结构的代码和业务代码，生成符合目标布局结构的目标页面。这样，当前端开发人员需要开发一个新页面时，只需要通过引用的页面布局组件，确定目标布局结构，并在对应子组件插槽中输入的业务代码即可生成目标页面。减少了代码的冗余，提升了代码的复用率。

在一个实施例中，如图4所示，步骤S210，也就是获取页面布局组件；页面布局组件中设置有至少一个的候选布局模板的步骤，包括步骤S402～S406：

S402，根据子组件插槽，确定对应的子组件在相应父组件中的位置。

具体地，子组件插槽是子组件提供给相应的父组件的占位符。所以，终端可根据子组件插槽，确定对应的子组件在相应父组件中的位置。

S404，将业务代码插入至位置中，以将业务代码和目标布局结构的代码进行融合处理，得到目标代码。

具体地，终端可将业务代码插入至确定的对应位置中。进而终端可将业务代码和目标布局结构的代码进行融合处理，得到业务逻辑完整的目标代码。

S406，根据目标代码，生成符合目标布局结构的目标页面。

具体地，终端可控制本地的浏览器，对得到的业务逻辑完整的目标代码进行渲染，生成符合目标布局结构的目标页面。

在一个实施例中，目标布局结构中设置有div组件和page组件(页面组件)。其中，div组件是page组件的父组件，page组件是div组件的子组件。父组件div可引用子组件page。即子组件page的slot(插槽)属性赋值，使得子组件page对应的业务代码可插入父组件div的相应的位置，得到目标代码。进而终端可通过浏览器对目标代码进行渲染，得到目标页面。其中，div是层叠样式表中的定位技术，全称DIVision，即为划分。div元素可用于为html文档内大块(block-level)的内容提供结构和背景。

上述实施例中，通过子组件插槽，确定对应的子组件在相应父组件中的位置。将业务代码插入至位置中，以将业务代码和目标布局结构的代码进行融合处理，进而生成符合目标布局结构的目标页面。这样，可，快速生成目标布局结构的目标页面，减少代码冗余。

在一个实施例中，目标布局结构中包括页面组件。步骤S306，也就是根据目标代码，生成符合目标布局结构的目标页面的步骤，具体包括：确定页面组件的父组件；根据页面组件的父组件所对应的宽度和高度、以及页面组件的宽属性和高属性，分别确定目标页面宽度和目标页面高度；页面组件的宽属性和高属性，用于指示目标页面宽度和目标页面高度继承页面组件的父组件所对应的宽度和高度；根据目标代码、目标页面宽度和目标页面高度，生成符合目标布局结构的目标页面。

具体地，目标布局结构中包括页面组件。页面组件可作为子组件，且页面组件有其相应的父组件。终端可确定页面组件相应的父组件，并确定页面组件的父组件所对应的宽度和高度、以及页面组件的宽属性和高属性。页面组件的内部设置有对应的宽属性和高属性。页面组件的宽属性和高属性，可用于指示目标页面宽度和目标页面高度继承页面组件的父组件所对应的宽度和高度。进而，终端可根据页面组件的父组件所对应的宽度和高度、以及页面组件的宽属性和高属性，分别确定目标页面宽度和目标页面高度。终端可根据目标代码、目标页面宽度和目标页面高度，生成符合目标布局结构的目标页面。

在一个实施例中，终端可将子组件page的style(样式)中width属性(宽属性)和height属性(高属性)分别设置为100％，以继承父组件div的宽度和高度，那么子组件page可的宽度和高度可与父组件div的宽度和高度一致。举例说明，如果父组件div是撑满整个屏幕的终端屏幕的可视宽度和可视高度，那么子组件page就可自适应的终端屏幕的可视宽度和可视高度。这样，目标页面中不会产生浏览器滚动条。

上述实施例中，通过控制目标页面宽度和目标页面高度继承页面组件的父组件所对应的宽度和高度，以确保所生成的目标页面的宽度和高度与对应的页面组件宽度和高度保持一致，以实现页面的自适应，使得页面不产生滚动条，提升页面的显示效果。

在一个实施例中，步骤S206之后，也就是根据目标代码、目标页面宽度和目标页面高度，生成符合目标布局结构的目标页面的步骤之后，页面生成方法具体还包括：当目标布局结构发生改变时，重新确定目标布局结构中各子组件插槽对应的子组件的宽度和/或高度；根据重新确定的目标布局结构中各子组件插槽对应的子组件的宽度和/或高度，重新生成符合改变后的目标布局结构的目标页面。

具体地，终端可实时检测目标布局结构是否发生改变。当终端检测到目标布局结构发生改变时，目标布局结构中各子组件插槽对应的子组件的宽度和/或高度可能也发生了改变。终端可重新确定目标布局结构中各子组件插槽对应的子组件的宽度和/或高度。进而终端根据重新确定的目标布局结构中各子组件插槽对应的子组件的宽度和/或高度，重新生成符合改变后的目标布局结构的目标页面。

上述实施例中，通过重新确定目标布局结构中各子组件插槽对应的子组件的宽度和/或高度，以重新生成符合改变后的目标布局结构的目标页面。这样，对应组件的内容可以及时重新撑满页面，提升了页面的美观性。

在一个实施例中，页面生成方法具体还包括：当检测到目标页面对应的浏览器的窗口大小发生改变时，判定目标布局结构发生改变。

具体地，终端可实时检测目标页面对应的浏览器的窗口大小是否发生改变。当终端检测到目标页面对应的浏览器的窗口大小发生改变时，判定目标布局结构发生改变。

可以理解，浏览器的窗口大小发生改变，具体可以是用户通过触发浏览器页面的窗口控制按钮，使得浏览器的窗口大小发生改变，那么，终端检测到对窗口控制按钮的触发操作时，可以判定浏览器的窗口大小发生改变。也可以是用户通过控制鼠标拖拽浏览器页面的窗口，使得浏览器的窗口大小发生改变，那么，终端可以在检测到针对浏览器页面的窗口的拖拽操作时，判断拖拽前后的浏览器的窗口大小是否发生变化。其中，浏览器窗口大小发生改变，包括浏览器的窗口的宽度和/高度发生改变。

在一个实施例中，当检测到子组件插槽中的第一插槽对应的子组件的折叠状态发生改变时，判定目标布局结构发生改变。

其中，第一插槽是可控制对应子组件的宽度的子组件插槽。

具体地，终端可实时检测子组件插槽中的第一插槽对应的子组件的折叠状态是否发生改变。当终端检测到子组件插槽中的第一插槽对应的子组件的折叠状态发生改变时，判定目标布局结构发生改变。

在一个实施例中，当检测到子组件插槽中的第二插槽对应的子组件的高度发生改变时，判定目标布局结构发生改变。

其中，第二插槽是可控制对应子组件的高度的子组件插槽。

具体地，终端可实时检测子组件插槽中的第二插槽对应的子组件的高度是否发生改变。当终端检测到子组件插槽中的第二插槽对应的子组件的高度发生改变时，判定目标布局结构发生改变。

上述实施例中，通过设定几种判定目标布局结构发生改变的情况，以实时检测目标页面的更新。这样，可便于重新调整页面布局。

在一个实施例中，第一插槽对应的子组件中设置有折叠按钮。当检测到子组件插槽中的第一插槽对应的子组件的折叠状态发生改变时，判定目标布局结构发生改变的步骤，具体包括：当检测到折叠按钮的触发操作时，判定目标布局结构发生改变。

具体地，第一插槽对应的子组件中设置有折叠按钮。用户可通过目标页面触发该折叠按钮。当终端检测到折叠按钮的触发操作时，可判定目标布局结构发生改变。

在一个实施例中，触发操作可包括单击操作、双击操作或长按操作等。

在一个实施例中，重新确定目标布局结构中各子组件插槽对应的子组件的宽度和/或高度的步骤，具体包括：调用页面组件中的宽度计算函数，重新确定目标布局结构中除第一插槽对应的子组件以外的子组件的宽度。

具体地，页面组件中设置有宽度计算函数。终端可调用页面组件中的宽度计算函数，重新确定目标布局结构中除第一插槽对应的子组件以外的子组件的宽度。

举例说明，针对3B中的左右结构，父组件是页面组件page，其对应的子组件的子组件插槽包括第一插槽left(左)和main(主体)。第一插槽left对应的子组件中设置有折叠按钮。页面组件page中设置有宽度计算函数calculateMainWidth()。终端可在页面组件page中设置ref的属性为page。通过指令this.$refs.page.calculateMainWidth()，终端可调用页面组件page的宽度计算函数calculateMainWidth()，重新计算目标布局结构中除第一插槽对应的子组件以外的子组件，即main对应的子组件的宽度。

上述实施例中，当检测到折叠按钮的触发操作时，通过调用页面组件中的宽度计算函数，重新确定目标布局结构中除第一插槽对应的子组件以外的子组件的宽度，以实现页面的宽度自适应调整。

在一个实施例中，第二插槽中包括作为参照的第二插槽。作为参照的第二插槽对应的子组件中设置有展示按钮。重新确定目标布局结构中各子组件插槽对应的子组件的宽度和/或高度的步骤，具体包括：确定作为参照的第二插槽在展示按钮被触发后所对应的高度，并以所确定的高度作为参照，调用页面组件中的高度计算函数，重新确定除作为参照的第二插槽以外的第二插槽对应的子组件的高度。

具体地，第二插槽中包括作为参照的第二插槽和自适应变化的第二插槽。作为参照的第二插槽对应的子组件中设置有展示按钮，自适应变化的第二插槽对应的子组件中没有设置有展示按钮。用户可触发作为参照的第二插槽对应的子组件中的展示按钮，终端则控制作为参照的第二插槽对应的子组件的高度发生改变。进而终端可确定作为参照的第二插槽在展示按钮被触发后所对应的高度。终端以所确定的高度作为参照，调用页面组件中的高度计算函数，重新确定除作为参照的第二插槽以外的第二插槽对应的子组件的高度，即自适应变化的第二插槽对应的子组件的高度。

举例说明，针对3A中的上下结构，父组件是页面组件page，其对应的第二插槽包括header(页头)和main(主体)。作为参照的第二插槽为header。header对应的子组件中设置有展示按钮。自适应变化的第二插槽为main。页面组件page中高度计算函数可以表示为calculateMainHeight()。终端可在页面组件page中设置ref的属性为page。通过指令this.$refs.page.calculateMainHeight()，终端可调用页面组件page的calculateMainHeight()，重新计算除作为参照的第二插槽以外的第二插槽对应的子组件，即main对应的子组件的高度。

上述实施例中，当作为参照的第二插槽在展示按钮被触发后，以所确定的高度作为参照，调用页面组件中的高度计算函数，重新确定除作为参照的第二插槽以外的第二插槽对应的子组件的高度。这样，可实现页面的高度自适应调整。

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

在一个实施例中，如图5所示，提供了一种页面生成装置500，包括：获取模块501、组合模块502、确定模块503和生成模块504，其中：

获取模块501，获取页面布局组件；页面布局组件中设置有至少一个的候选布局模板。

组合模块502，用于从候选布局模板中选择至少一个的目标布局模板，并将选择的目标布局模板进行组合，得到目标布局结构。

确定模块503，用于确定目标布局结构中的子组件插槽。

获取模块501还用于获取在子组件插槽中输入的业务代码。

生成模块504，用于根据目标布局结构的代码和业务代码，生成符合目标布局结构的目标页面。

在一个实施例中，生成模块504还用于根据子组件插槽，确定对应的子组件在相应父组件中的位置；将业务代码插入至位置中，以将业务代码和目标布局结构的代码进行融合处理，得到目标代码；根据目标代码，生成符合目标布局结构的目标页面。

在一个实施例中，生成模块504还用于确定页面组件的父组件；根据页面组件的父组件所对应的宽度和高度、以及页面组件的宽属性和高属性，分别确定目标页面宽度和目标页面高度；页面组件的宽属性和高属性，用于指示目标页面宽度和目标页面高度继承页面组件的父组件所对应的宽度和高度；根据目标代码、目标页面宽度和目标页面高度，生成符合目标布局结构的目标页面。

在一个实施例中，确定模块503还用于当目标布局结构发生改变时，重新确定目标布局结构中各子组件插槽对应的子组件的宽度和/或高度。

在一个实施例中，生成模块504还用于根据重新确定的目标布局结构中各子组件插槽对应的子组件的宽度和/或高度，重新生成符合改变后的目标布局结构的目标页面。

在一个实施例中，确定模块503还用于调用页面组件中的宽度计算函数，重新确定目标布局结构中除第一插槽对应的子组件以外的子组件的宽度。

在一个实施例中，第二插槽中包括作为参照的第二插槽；作为参照的第二插槽对应的子组件中设置有展示按钮。确定模块503还用于确定作为参照的第二插槽在展示按钮被触发后所对应的高度，并以所确定的高度作为参照，调用页面组件中的高度计算函数，重新确定除作为参照的第二插槽以外的第二插槽对应的子组件的高度。

参考图6，在一个实施例中，页面生成装置500还包括：判定模块505，其中：

判定模块505，用于当检测到目标页面对应的浏览器的窗口大小发生改变时，判定目标布局结构发生改变。

在一个实施例中，判定模块505还用于当检测到子组件插槽中的第一插槽对应的子组件的折叠状态发生改变时，判定目标布局结构发生改变。

在一个实施例中，判定模块505还用于当检测到子组件插槽中的第二插槽对应的子组件的高度发生改变时，判定目标布局结构发生改变。

在一个实施例中，第一插槽对应的子组件中设置有折叠按钮。判定模块505还用于当检测到折叠按钮的触发操作时，判定目标布局结构发生改变。

上述页面生成装置，通过从页面布局组件至少一个的候选布局模板中，选择至少一个的目标布局模板，并将选择的目标布局模板进行组合，得到目标布局结构。确定目标布局结构中的子组件插槽，并获取在子组件插槽中输入的业务代码。进而根据目标布局结构的代码和业务代码，生成符合目标布局结构的目标页面。这样，当前端开发人员需要开发一个新页面时，只需要通过引用的页面布局组件，确定目标布局结构，并在对应子组件插槽中输入的业务代码即可生成目标页面。减少了代码的冗余，提升了代码的复用率。

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

在一个实施例中，提供了一种计算机设备，该计算机设备可以是上述图1中的终端102，其内部结构图可以如图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)等。

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

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

Claims (10)

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

获取页面布局组件；所述页面布局组件中设置有至少一个的候选布局模板；所述候选布局模板是具有布局结构的模板；每一个所述候选布局模板对应一种布局结构；所述页面布局组件中包括至少一种布局结构；

从所述候选布局模板中选择至少一个的目标布局模板，并将选择的所述目标布局模板进行组合，得到目标布局结构；

确定所述目标布局结构中的子组件插槽；所述子组件插槽是子组件提供给相应的父组件的占位符，用于当相应的父组件调用所述子组件时指定所述占位符对应位置具体的内容；

获取开发人员在所述子组件插槽中输入的业务代码；所述业务代码是具备业务处理逻辑的代码；

根据所述目标布局结构的代码和所述业务代码，生成符合所述目标布局结构的目标页面。

2.根据权利要求1所述的方法，其特征在于，所述根据所述目标布局结构的代码和所述业务代码，生成符合所述目标布局结构的目标页面，包括：

根据所述子组件插槽，确定对应的所述子组件在相应父组件中的位置；

将所述业务代码插入至所述位置中，以将所述业务代码和所述目标布局结构的代码进行融合处理，得到目标代码；

根据所述目标代码，生成符合所述目标布局结构的目标页面。

3.根据权利要求2所述的方法，其特征在于，所述目标布局结构中包括页面组件；所述根据所述目标代码，生成符合所述目标布局结构的目标页面，包括：

确定所述页面组件的父组件；

根据所述页面组件的父组件所对应的宽度和高度、以及所述页面组件的宽属性和高属性，分别确定目标页面宽度和目标页面高度；所述页面组件的宽属性和高属性，用于指示所述目标页面宽度和目标页面高度继承所述页面组件的父组件所对应的宽度和高度；

根据所述目标代码、所述目标页面宽度和目标页面高度，生成符合所述目标布局结构的目标页面。

4.根据权利要求3所述的方法，其特征在于，所述根据所述目标代码、所述目标页面宽度和目标页面高度，生成符合所述目标布局结构的目标页面之后，所述方法还包括：

当所述目标布局结构发生改变时，重新确定所述目标布局结构中各子组件插槽对应的子组件的宽度和/或高度；

根据重新确定的所述目标布局结构中各子组件插槽对应的子组件的宽度和/或高度，重新生成符合改变后的目标布局结构的目标页面。

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

当检测到所述目标页面对应的浏览器的窗口大小发生改变时，判定所述目标布局结构发生改变；或，

当检测到所述子组件插槽中的第一插槽对应的子组件的折叠状态发生改变时，判定所述目标布局结构发生改变；或，

当检测到所述子组件插槽中的第二插槽对应的子组件的高度发生改变时，判定所述目标布局结构发生改变。

6.根据权利要求5所述的方法，其特征在于，所述第一插槽对应的子组件中设置有折叠按钮；

所述当检测到所述子组件插槽中的第一插槽对应的子组件的折叠状态发生改变时，判定所述目标布局结构发生改变，包括：

当检测到所述折叠按钮的触发操作时，判定所述目标布局结构发生改变；

所述重新确定所述目标布局结构中各子组件插槽对应的子组件的宽度和/或高度，包括：

调用所述页面组件中的宽度计算函数，重新确定所述目标布局结构中除第一插槽对应的子组件以外的子组件的宽度。

7.根据权利要求5所述的方法，其特征在于，所述第二插槽中包括作为参照的第二插槽；所述作为参照的第二插槽对应的子组件中设置有展示按钮；

所述重新确定所述目标布局结构中各子组件插槽对应的子组件的宽度和/或高度，包括：

确定所述作为参照的第二插槽在所述展示按钮被触发后所对应的高度，并以所确定的所述高度作为参照，调用所述页面组件中的高度计算函数，重新确定除所述作为参照的第二插槽以外的第二插槽对应的子组件的高度。

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

获取模块，获取页面布局组件；所述页面布局组件中设置有至少一个的候选布局模板；所述候选布局模板是具有布局结构的模板；每一个所述候选布局模板对应一种布局结构；所述页面布局组件中包括至少一种布局结构；

组合模块，用于从所述候选布局模板中选择至少一个的目标布局模板，并将选择的所述目标布局模板进行组合，得到目标布局结构；

确定模块，用于确定所述目标布局结构中的子组件插槽；所述子组件插槽是子组件提供给相应的父组件的占位符，用于当相应的父组件调用所述子组件时指定所述占位符对应位置具体的内容；

所述获取模块还用于获取开发人员在所述子组件插槽中输入的业务代码；所述业务代码是具备业务处理逻辑的代码；

生成模块，用于根据所述目标布局结构的代码和所述业务代码，生成符合所述目标布局结构的目标页面。

9.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至7中任一项所述的方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至7中任一项所述的方法的步骤。

Images