CN110347390B

CN110347390B - 一种快速生成web页面的方法、存储介质、设备及系统

Info

Publication number: CN110347390B
Application number: CN201810290773.6A
Authority: CN
Inventors: 黄进; 陈少杰; 张文明
Original assignee: Guangzhou Onion Fashion Group Co ltd
Current assignee: Guangzhou Onion Fashion Group Co ltd
Priority date: 2018-04-03
Filing date: 2018-04-03
Publication date: 2023-07-11
Anticipated expiration: 2038-04-03
Also published as: CN110347390A

Abstract

本发明公开了一种快速生成WEB页面的方法，涉及互联网应用开发领域，包括步骤：在数据库中查找待生成页面的页面数据信息，解析所述页面数据信息得到HTML可识别的字符串，并将解析得到的字符串插入到预设的HTML模板中对应的位置，组建完成待生成页面的HTML文档，编译所述HTML文档，生成对应的WEB页面。本发明提供的快速生成WEB页面的方法，操作简单，实现方便，缩短了开发时间，生成WEB页面效率较高，而且大大节约了开发的人工成本。

Description

一种快速生成WEB页面的方法、存储介质、设备及系统

技术领域

本发明涉及互联网应用开发领域，具体涉及一种快速生成WEB页面的方法、存储介质、设备及系统。

背景技术

随着直播平台的迅猛发展，各大直播平台上落地页需求量巨大，但是开发人员数量有限，通常开发的速度赶不上需求的数量，导致开发需求的不断堆积，且大部分落地页需求类似，加大了开发成本。

现有技术中，有一种快速生成web页面的方法为：在已有的落地页代码基础上进行编辑修改，形成新的落地页代码，并将开发到发布的流程进行可视化的集成，页面开发完可一键点击预览效果，随时退回修改页面信息，优化页面效果；另外，完成页面开发，测试之后，需要上线时，也可一键点击发布到线上，避免了常规各种繁琐的步骤。

然而，在上述过程中，当新需求的落地页代码和已有的落地页代码内容和格式区别较大时，编辑修改已有的落地页代码将会耗费较长的时间，而且开发人员可能出现修改失误，导致编辑修改效率低，进而使得生成web页面耗时长，效率低下。

发明内容

针对现有技术中存在的缺陷，本发明的目的在于提供一种快速生成WEB页面的方法，操作简单，实现方便，缩短了开发时间，生成WEB页面效率较高，而且大大节约了开发的人工成本。

为达到以上目的，本发明采取的技术方案是：

一种快速生成WEB页面的方法，包括步骤：

在数据库中查找待生成页面的页面数据信息，解析所述页面数据信息得到HTML可识别的字符串，并将解析得到的字符串插入到预设的HTML模板中对应的位置，组建完成待生成页面的HTML文档，编译所述HTML文档，生成对应的WEB页面。

本发明的一种快速生成WEB页面的方法，操作简单，实现方便，只需按照操作进行相应替换即可，不仅不容易出现失误，缩短了开发时间，生成WEB页面效率较高，而且对页面开发者要求不高，大大节约了开发的人工成本。

在上述技术方案的基础上，将解析得到的字符串插入到HTML模板中对应的位置包括步骤：在HTML模板中预留与所述页面数据信息对应的钩子，解析所述页面数据信息得到HTML可识别的字符串后，将解析得到的字符串对应替换HTML模板中对应的钩子。

在上述技术方案的基础上，在组建完成待生成页面的HTML文档之后，编译所述HTML文档之前，还包括步骤：压缩所述HTML文档，以减小HTML文档大小，提高页面传输效率，有利于页面快速加载，进而提高页面生产速度。

在上述技术方案的基础上，所述页面数据信息包括若干页面组件，解析所述页面数据信息的步骤包括：遍历所有页面组件，按照先父后子的原则，依次将各页面组件加入到堆栈中，并获取各页面组件的组件信息，所述组件信息包括组件参数和组件模板，并将各页面组件的组件参数对应替换到组件模板中，得到各页面组件的HTML可识别的字符串。

在上述技术方案的基础上，所述组件信息还包括组件层叠样式表，解析所述页面数据信息的步骤还包括：根据所述组件层叠样式表获取HTML可识别的组件样式字符串，能够根据不同的配置，还原HTML模板，更加灵活高效，并且将不同CSS样式做拆分，仅加载页面引用组件的样式，减少页面大小，提升页面渲染效率。

本发明还提供了一种存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述方法的步骤。

本发明还提供了一种电子设备，包括存储器、处理器及存储在所述存储器上并在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述方法的步骤。

本发明还提供了一种快速生成WEB页面的系统，所述系统包括查找模块、解析模块、插入模块和编译模块；

所述查找模块用于在数据库中查找待生成页面的页面数据信息；

所述解析模块用于解析所述页面数据信息得到HTML可识别的字符串；

所述插入模块用于将解析得到的字符串插入到预设的HTML模板中对应的位置，组建完成待生成页面的HTML文档；

所述编译模块用于编译所述HTML文档，生成对应的WEB页面。

本发明的一种快速生成WEB页面的系统，可以将页面数据信息解析为HTML可识别的字符串，并将解析得到的字符串插入到预设的HTML模板中对应的位置，组建完成待生成页面的HTML文档，编译所述HTML文档，即可生成对应的WEB页面，该操作简单，实现方便，只需按照操作进行相应替换即可，不仅不容易出现失误，缩短了开发时间，生成WEB页面效率较高，而且对页面开发者要求不高，大大节约了开发的人工成本。

在上述技术方案的基础上，所述页面数据信息包括若干页面组件，所述解析模块包括处理单元、信息获取单元和第一单元；

所述处理单元用于遍历所有页面组件，按照先父后子的原则，依次将各页面组件加入到堆栈中；

所述信息获取单元用于获取各页面组件的组件信息，所述组件信息包括组件参数和组件模板；

所述第一单元用于将各页面组件的组件参数对应替换到组件模板中，得到各页面组件的HTML可识别的字符串。

在上述技术方案的基础上，所述组件信息还包括组件层叠样式表，所述解析模块还包括第二单元，所述第二单元用于根据所述组件层叠样式表获取HTML可识别的组件样式字符串，能够根据不同的配置，还原HTML模板，更加灵活高效，并且将不同CSS样式做拆分，仅加载页面引用组件的样式，减少页面大小，提升页面渲染效率。

附图说明

图1为本发明实施例中快速生成WEB页面的方法流程图；

图2为本发明实施例中电子设备的连接框图。

具体实施方式

以下结合附图及实施例对本发明作进一步详细说明。

参见图1所示，本发明实施例提供一种快速生成WEB页面的方法，包括步骤：

S1：在数据库中查找待生成页面的页面数据信息，该步骤的具体实现过程为：根据不同页面的页面ID，预先在数据库中存储不同页面的页面数据，当需要生成页面时，根据待生成页面的页面ID，在数据库中查找对应的页面数据信息，并将查找到的页面数据信息存入到缓存文件中。此处的页面ID为若干数字或字母组合而成的字符串，用以标识不同页面，且不同页面具有的页面ID也不同。

由于页面数据信息在页面编译过程中需要多次使用到，将查找到的页面数据存入到缓存文件中，可以减少数据库的存取，便于后续操作过程中的数据获取，从而提高效率。

其中，页面数据信息包括若干页面组件，所有页面组件以数组的形式存储在组件列表中，页面数据信息还包括页面名称、页面类型、页面宽度、作者、页面标题、页面关键字、页面描述和页面状态等信息。

上述页面数据信息示意如下：

S2：解析页面数据信息得到HTML可识别的字符串。

该解析页面数据信息的步骤具体包括如下：

S201：遍历所有页面组件，按照先父后子的原则，依次将各页面组件加入到堆栈中，通过该操作可以使得在页面还原时，父组件永远在子组件之前渲染，具体实现过程示例如下：

在本示例中，以等待组件数组waitCopm[]为例，当等待组件数组中仍含有未渲染的组件，遍历等待组件数组，找到每个组件的父组件插槽，如果该组件的父组件插槽已经被渲染，将子组件插入到其对应父组件的插槽中，并将该组件从等待组件数组中移除，如此循环操作，直至等待组件数组中的所有组件均被渲染。

S202:获取各页面组件的组件信息，组件信息包括组件参数和组件模板，并将各页面组件的组件参数对应替换到组件模板中，得到各页面组件的HTML可识别的字符串。具体实现过程示例如下：

组件参数：

组件模板：

</script>

替换结果：

上述示例即描述了如何将组件参数herf和target插入到对应的组件模板中，最终生成html。也可理解为：假如a标签包含2个属性，这2个属性即为两个组件参数，且2个属性分别为：跳转链接和是否在新窗口中打开，将用户设置的组件参数信息，替换到组件模板对应的位置，即可生成完整的a标签html字符串。

在上述步骤S202中，组件信息还包括组件层叠样式表CSS，根据组件层叠样式表CSS获取HTML可识别的组件样式字符串。层叠样式表的示例如下：

.linkBox{display:block；cursor:pointer；height:100％；width:100％；}

以上是对类名为linkBox的a标签设置其通用样式，其中display:block是让对象成为块级元素，cursor:pointer规定了要显示的光标的类型(形状)为指示链接的指针等。

根据组件层叠样式表CSS获取HTML可识别的组件样式字符串，能够根据不同的配置，还原HTML模板，更加灵活高效，并且将不同CSS样式做拆分，仅加载页面引用组件的样式，减少页面大小，提升页面渲染效率。

在本发明实施例中层叠样式表简称CSS，全称为Cascading Style Sheets，是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

S3：将解析得到的字符串插入到预设的HTML模板中对应的位置，组建完成待生成页面的HTML文档。

上述过程中，将解析得到的字符串插入到预设的HTML模板中对应的位置方法为：在HTML模板中预留与页面数据信息对应的钩子，解析页面数据信息得到HTML可识别的字符串后，将解析得到的字符串对应替换HTML模板中对应的钩子，实现HTML页面还原。在本发明实施例中，钩子应理解为预设的特殊规则单词，如在使用时用到的{{％＝title％}}示例中，title可替换为任意单词，如keywords、description或style等，只需通过正则匹配相关关键字符来替换title内容即可。

与页面数据信息对应的钩子示例如下：

{{％＝title％}}:页面标题

{％＝keywords％}}:页面关键字

{％＝description％}}:页面描述

{{％＝style％}}}:css样式信息

{{％＝extraHead％}}}:额外头部

{{％＝point％}}}:页面打点

{{％＝template％}}}:组件模板

{{％＝content％}}}:页面详细内容

HTML模板示例如下：

<！DOCTYPE html>

<html>

<head>

<title>{{％＝title％}}</title>

<head>

</div>

</body>

</html>

在得到待生成页面的页面数据信息，如页面标题为“webm专题”、页面关键字为“斗鱼直播”等，将这些页面数据信息解析为HTML可识别的字符串后，替换到HTML模板中对应的钩子中，通过钩子的替换，能清晰的组建页面HTML文档，可读性佳，易于理解。

S4：压缩HTML文档。此处压缩HTML文档指的是去除空白字符、注释、空行等无效字符串，以减小HTML文档大小，提高页面传输效率，有利于页面快速加载，进而提高页面生产速度。

S5：编译HTML文档，生成对应的WEB页面，即可完成WEB页面的快速生成。

本发明实施例中的一种快速生成WEB页面的方法，可以将页面数据信息解析为HTML可识别的字符串，并将解析得到的字符串插入到预设的HTML模板中对应的位置，组建完成待生成页面的HTML文档，编译HTML文档，即可生成对应的WEB页面，该操作简单，实现方便，只需按照操作进行相应替换即可，不仅不容易出现失误，缩短了开发时间，生成WEB页面效率较高，而且对页面开发者要求不高，大大节约了开发的人工成本。

本发明实施例还提供了一种存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述快速生成WEB页面方法的步骤。

参见图2所示，本发明实施例还提供了一种电子设备，包括存储器、处理器及存储在存储器上并在处理器上运行的计算机程序，处理器执行计算机程序时实现上述快速生成WEB页面方法的步骤。

本发明实施例还提供了一种快速生成WEB页面的系统，系统包括查找模块、解析模块、插入模块和编译模块。

查找模块用于在数据库中查找待生成页面的页面数据信息。查找模块的具体实现过程为：根据不同页面的页面ID，预先在数据库中存储不同页面的页面数据，当需要生成页面时，根据待生成页面的页面ID，在数据库中查找对应的页面数据信息，并将查找到的页面数据信息存入到缓存文件中。此处的页面ID为若干数字或字母组合而成的字符串，用以标识不同页面，且不同页面具有的页面ID也不同。

解析模块用于解析页面数据信息得到HTML可识别的字符串。

插入模块用于将解析得到的字符串插入到预设的HTML模板中对应的位置，组建完成待生成页面的HTML文档。插入模块的具体实现过程为：在HTML模板中预留与页面数据信息对应的钩子，解析页面数据信息得到HTML可识别的字符串后，将解析得到的字符串对应替换HTML模板中对应的钩子，即可将解析得到的字符串插入到预设的HTML模板中对应的位置。

编译模块用于编译HTML文档，生成对应的WEB页面，即可完成WEB页面的快速生成。

进一步地，解析模块包括处理单元、信息获取单元和第一单元。

处理单元用于遍历所有页面组件，按照先父后子的原则，依次将各页面组件加入到堆栈中，通过该操作可以使得在页面还原时，父组件永远在子组件之前渲染。

信息获取单元用于获取各页面组件的组件信息，组件信息包括组件参数和组件模板。

第一单元用于将各页面组件的组件参数对应替换到组件模板中，得到各页面组件的HTML可识别的字符串。

进一步地，组件信息还包括组件层叠样式表，解析模块还包括第二单元，第二单元用于根据组件层叠样式表获取HTML可识别的组件样式字符串。根据组件层叠样式表CSS获取HTML可识别的组件样式字符串，能够根据不同的配置，还原HTML模板，更加灵活高效，并且将不同CSS样式做拆分，仅加载页面引用组件的样式，减少页面大小，提升页面渲染效率。

进一步地，上述快速生成WEB页面的系统还包括压缩模块，压缩模块用于在组建完成待生成页面的HTML文档之后，编译HTML文档之前，压缩HTML文档。此处压缩HTML文档指的是去除空白字符、注释、空行等无效字符串，以减小HTML文档大小，提高页面传输效率，有利于页面快速加载，进而提高页面生产速度。

本发明实施例中的一种快速生成WEB页面的系统，可以将页面数据信息解析为HTML可识别的字符串，并将解析得到的字符串插入到预设的HTML模板中对应的位置，组建完成待生成页面的HTML文档，编译HTML文档，即可生成对应的WEB页面，该操作简单，实现方便，只需按照操作进行相应替换即可，不仅不容易出现失误，缩短了开发时间，生成WEB页面效率较高，而且对页面开发者要求不高，大大节约了开发的人工成本。

需要说明的是：上述实施例提供的系统在实现快速生成WEB页面操作时，仅以上述各功能模块的划分进行举例说明，实际应用中，可根据需要而将上述功能分配由不同功能模块完成，即将系统的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。

本发明不局限于上述实施方式，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也视为本发明的保护范围之内。本说明书中未作详细描述的内容属于本领域专业技术人员公知的现有技术。

Claims

1.一种快速生成WEB页面的方法，其特征在于，包括步骤：

在数据库中查找待生成页面的页面数据信息，解析所述页面数据信息得到HTML可识别的字符串，并将解析得到的字符串插入到预设的HTML模板中对应的位置，组建完成待生成页面的HTML文档，编译所述HTML文档，生成对应的WEB页面；

其中，在数据库中查找待生成页面的页面数据信息，具体为：根据不同页面的页面ID，预先在数据库中存储不同页面的页面数据，当需要生成页面时，根据待生成页面的页面ID，在数据库中查找对应的页面数据信息，并将查找到的页面数据信息存入到缓存文件中；

其中，将解析得到的字符串插入到HTML模板中对应的位置包括步骤：在HTML模板中预留与所述页面数据信息对应的钩子，解析所述页面数据信息得到HTML可识别的字符串后，将解析得到的字符串对应替换HTML模板中对应的钩子。

2.如权利要求1所述的快速生成WEB页面的方法，其特征在于，在组建完成待生成页面的HTML文档之后，编译所述HTML文档之前，还包括步骤：压缩所述HTML文档。

3.如权利要求1所述的快速生成WEB页面的方法，其特征在于，所述页面数据信息包括若干页面组件，解析所述页面数据信息的步骤包括：遍历所有页面组件，按照先父后子的原则，依次将各页面组件加入到堆栈中，并获取各页面组件的组件信息，所述组件信息包括组件参数和组件模板，并将各页面组件的组件参数对应替换到组件模板中，得到各页面组件的HTML可识别的字符串。

4.如权利要求3所述的快速生成WEB页面的方法，其特征在于：所述组件信息还包括组件层叠样式表，解析所述页面数据信息的步骤还包括：根据所述组件层叠样式表获取HTML可识别的组件样式字符串。

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

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

7.一种快速生成WEB页面的系统，其特征在于，所述系统包括查找模块、解析模块、插入模块和编译模块；

所述编译模块用于编译所述HTML文档，生成对应的WEB页面；

8.如权利要求7所述的快速生成WEB页面的系统，其特征在于：所述页面数据信息包括若干页面组件，所述解析模块包括处理单元、信息获取单元和第一单元；

9.如权利要求8所述的快速生成WEB页面的系统，其特征在于：所述组件信息还包括组件层叠样式表，所述解析模块还包括第二单元，所述第二单元用于根据所述组件层叠样式表获取HTML可识别的组件样式字符串。