CN108415963A - 一种页面生成方法和装置 - Google Patents

Abstract

本说明书实施例提供一种页面生成方法和装置，其中的方法包括：接收页面开发前端发送的前端代码；将所述前端代码打包成页面的静态资源，并根据预配置的关联信息，将所述静态资源部署至资源存储地址对应的存储空间，所述关联信息包括：所述页面开发前端与资源存储地址、地址存储装置之间的对应关系；根据所述关联信息，将所述资源存储地址推送至地址存储装置，以使得页面服务器由所述地址存储装置获取资源存储地址用于更新页面HTML文件。

Description

一种页面生成方法和装置

技术领域

本公开涉及计算机技术领域，特别涉及一种页面生成方法和装置。

背景技术

浏览器可以通过解析页面对应的HTML(HyperText Markup Language，超文本标记语言)文件来显示页面。例如，当用户在浏览器中输入页面对应的网址时，浏览器可以向服务器获取页面的HTML文件，并加载渲染该文件。页面中可以包括静态资源和动态资源，其中，静态资源可以包括img、CSS(Cascading Style Sheets，层叠样式表)等与页面显示相关的内容，可以由页面开发的前端生成；其中的动态资源可以页面开发的后端生成，且动态资源是根据后端技术生成的用于获取页面所需数据的可运行逻辑程序，数据可以由数据库提供。当将前端的静态资源和后端的动态资源整合到HTML文件，则可以称为生成了页面。

为了加快页面的显示速度，通常可以将静态资源部署在CDN(Content DeliveryNetwork，内容分发网络)，并可以在HTML文件中通过<script>标签引入静态资源的存储地址，使得浏览器解析文件时根据该地址获取静态资源。而前端对静态资源的修改较为频繁，当静态资源修改后，同样需要适应性修改HTML文件中引用的地址。

发明内容

有鉴于此，本公开提供一种页面生成方法和装置，以在前端修改时提高页面的更新速度。

具体地，本说明书一个或多个实施例是通过如下技术方案实现的：

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

接收页面开发前端发送的前端代码；

将所述前端代码打包成页面的静态资源，并根据预配置的关联信息，将所述静态资源部署至资源存储地址对应的存储空间，所述关联信息包括：所述页面开发前端与资源存储地址、地址存储装置之间的对应关系；

根据所述关联信息，将所述资源存储地址推送至地址存储装置，以使得页面服务器由所述地址存储装置获取资源存储地址用于更新页面HTML文件。

第二方面，提供一种页面生成方法，所述方法由页面服务器执行，所述方法包括：

由地址存储装置获取资源存储地址，所述资源存储地址用于存储根据页面开发前端产生的前端代码打包得到的页面静态资源；

更新页面HTML文件中的所述资源存储地址，以使得根据所述资源存储地址获取所述静态资源渲染页面。

第三方面，提供一种页面生成装置，所述装置包括：

代码接收模块，用于接收页面开发前端发送的前端代码；

资源部署模块，用于将所述前端代码打包成页面的静态资源，并根据预配置的关联信息，将所述静态资源部署至资源存储地址对应的存储空间，所述关联信息包括：所述页面开发前端与资源存储地址、地址存储装置之间的对应关系；

地址推送模块，用于根据所述关联信息，将所述资源存储地址推送至地址存储装置，以使得页面服务器由所述地址存储装置获取资源存储地址用于更新页面HTML文件。

第四方面，提供一种页面生成装置，所述装置包括：

地址获取模块，用于由地址存储装置获取资源存储地址，所述资源存储地址用于存储根据页面开发前端产生的前端代码打包得到的页面静态资源；

页面更新模块，用于更新页面HTML文件中的所述资源存储地址，以使得根据所述资源存储地址获取所述静态资源渲染页面。

第五方面，提供一种页面生成设备，所述设备包括存储器、处理器，以及存储在存储器上并可在处理器上运行的计算机指令，所述处理器执行指令时实现以下步骤：

接收页面开发前端发送的前端代码；

将所述前端代码打包成页面的静态资源，并根据预配置的关联信息，将所述静态资源部署至资源存储地址对应的存储空间，所述关联信息包括：所述页面开发前端与资源存储地址、地址存储装置之间的对应关系；

根据所述关联信息，将所述资源存储地址推送至地址存储装置，以使得页面服务器由所述地址存储装置获取资源存储地址用于更新页面HTML文件。

本说明书一个或多个实施例的页面生成方法和装置，通过由部署中心将静态资源发送至CDN后，自动将CDN的地址推送至页面服务器，使得页面服务器可以根据该地址修改页面文件中的地址，从而实现了资源地址的自动修改，提高了在前端修改时页面的更新速度。

附图说明

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

图1为本说明书一个或多个实施例提供的一种页面生成的系统架构；

图2为本说明书一个或多个实施例提供的一种页面生成方法的流程图；

图3为本说明书一个或多个实施例提供的一种页面生成装置的结构示意图；

图4为本说明书一个或多个实施例提供的一种页面生成装置的结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本说明书一个或多个实施例中的技术方案，下面将结合本说明书一个或多个实施例中的附图，对本说明书一个或多个实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是一部分实施例，而不是全部的实施例。基于本说明书一个或多个实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都应当属于本公开保护的范围。

在一个页面的开发过程中，可以分为页面开发前端和页面开发后端。其中，页面开发前端产生的前端代码主要用于设计页面显示相关的内容，比如，页面样式CSS，页面布局，页面的交互属性以及页面中使用到的图片链接等。页面开发后端产生的后端代码主要用于设计页面的可运行逻辑程序，通过执行该程序可以连接后端的数据库提供页面中需要的动态数据。

前端代码和后端代码可以整合成一个页面HTML文件，比如，前端代码可以编译打包生成页面的静态资源，并将该静态资源存储在一个资源存储地址，还可以将这个资源存储地址通过<script>标签引入到后端代码中，最终得到页面HTML文件，该文件中包括了后端代码以及前端代码对应的静态资源的地址。

由于页面布局可以进行修改调整，前端代码可能会修改较为频繁，对应的页面静态资源的资源存储地址也将发生变化，为了使得页面显示最新的布局样式，页面HTML文件中<script>标签引入的资源存储地址也要发生变化。例如<script src＝＂cdnurl＂/>，其中的cdnurl需要更新。

本说明书一个或者多个实施例的页面生成方法，将描述当前端代码变化时，如何更加快速和方便的更新页面HTML文件中引用的资源存储地址。图1示例了本说明书一个或多个实施例提供的一种页面生成的系统架构，如图1所示，该系统中可以包括：页面开发前端11、页面开发后端12、部署中心13、CDN14和页面服务器15。在这个例子中，以将页面的静态资源存储在CDN为例。

其中，部署中心13可以接收页面开发前端11提交的前端代码，也可以接收页面开发后端12提交的后端代码。对于后端代码，部署中心13可以将后端代码打包后发送至页面服务器15，而对于前端代码，部署中心13打包后可以部署至CDN14，并可以将CDN的地址通知页面服务器15。页面服务器15可以自动更新页面HTML文件(例如，图1中的index.html)引用的地址cdnurl。详见图2所示的流程：

在步骤200中，部署中心接收页面开发前端发送的前端代码。例如，页面开发前端在完成前端的开发后，可以将前端代码提交至部署中心。

在步骤202中，部署中心将前端代码打包成页面的静态资源，并根据预配置的关联信息，将所述静态资源部署至资源存储地址对应的存储空间。

本步骤中，部署中心预配置的关联信息，例如可以包括：页面开发前端与资源存储地址、地址存储装置之间的对应关系。

举个例子来说，如下的表1示例了上述的部分对应关系：

表1对应关系

前端迭代id	对应的发布id	cdn发布的产物地址	关联的后端服务器地址
				1.0.0	2018012601	xxx1.js xxx1.css	server-url
1.0.0	2018012602	xxx2.js xxx2.css	server-url

以上面的例子来说，比如，要开发一个新项目，该新项目可以是一个包括10个页面的网站。那么，页面开发前端可以创建一个前端迭代id(比如，1.0.0)，该前端迭代id可以作为上述对应关系中“页面开发前端”的标识。

在网站开发过程中可以涉及到多次的部署，网站开发过程的每次修改都可以部署(也可以称为“发布”)一次。比如，开发了第一个页面，部署一次看下效果；开发了第二个页面，部署一次，看下效果；或者，要修改下页面的代码，又重新部署一次，等。每次部署都会创建一个对应的发布id(例如，2018012602)。

每一次发布对应的产物地址可能是不同的，该产物地址就是“资源存储地址”。比如上述例子中，发布id是2018012601时，对应的产物地址是xxx1.js xxx1.css；当发布id是2018012602时，对应的产物地址是xxx2.js xxx2.css。

在上述例子中，关联的后端服务器地址，可以用于指示部署中心在将静态资源部署到上述的产物地址后，将产物地址推送到该关联的后端服务器。不同的发布id对应的后端服务器地址可以是相同的。

根据上面示例的对应关系，部署中心在接收到前端迭代id是1.0.0的页面开发前端发送的前端代码时，同时也会接收到上述对应关系的配置，不过，其中的发布id也可以由部署中心创建，比如，部署中心按照顺序依次创建为发布id是2018012601、2018012602。每一次发布对应的产物地址、关联的后端服务器地址可以由前端发送给部署中心。

或者，还可能的实施方式是，在每一次前端迭代id创建时，就配置关联的后端服务器地址。比如，前端迭代id：1.0.0----关联的后端服务器地址，就是说以后这个前端迭代id发送的前端代码都是要发送到该后端服务器。后续的该迭代id对应的每次部署，都会自动发送到该后端服务器，只是由前端将发布的产物地址通知部署中心即可。

综上所述，本例子所述的“页面开发前端与资源存储地址、地址存储装置之间的对应关系”，包括两层意思，一层意思是，该页面开发前端的前端代码要部署到所述的资源存储地址对应的存储空间，即代码要部署在哪里；另一层意思是，该页面开发前端的前端代码所部署的资源存储地址，要发送到所述地址存储装置，即部署的地址要通知到哪里。

在步骤204中，部署中心根据所述关联信息，将所述资源存储地址推送至地址存储装置。

本步骤中，部署中心可以根据预配置的关联信息，将资源存储地址推送至页面服务器，由页面服务器中的地址存储模块进行存储。例如，结合参见图1，部署中心可以将CDN的地址cdnurl发送至页面服务器，存储在页面服务器的server.conf(相当于地址存储模块)中。该server.conf除了存储资源存储地址，还可以存储其他信息。

此外，部署中心也可以将资源存储地址推送至其他地方，比如，可以写入一个共享数据库，页面服务器可以由该共享数据库中获取资源存储地址来更新页面HTML文件。

在步骤206中，页面服务器由地址存储装置获取资源存储地址。

例如，页面服务器可以由server.conf中获取资源存储的CDN地址，或者，也可以由共享数据库中获取CDN地址。当然，不局限于上述列举的地址，也可以将资源存储地址放在其他地方存储。

此外，在一个例子中，页面服务器可以是在接收到页面请求时，获取该资源存储地址。并根据资源存储地址更新页面的HTML文件后，将HTML文件发送至客户端进行渲染显示。

在步骤208中，更新页面HTML文件中的所述资源存储地址，以使得根据所述资源存储地址获取所述静态资源渲染页面。

例如，页面服务器可以根据server.conf中的CDN地址，修改index.html中的对应地址，即<script src＝＂cdnurl＂/>中的cdnurl。

本例子的页面生成方法，通过由部署中心将静态资源发送至CDN后，自动将CDN的地址推送至页面服务器，使得页面服务器可以根据该地址修改页面文件中的地址，从而实现了资源地址的自动修改，提高了在前端修改时页面的更新速度。此外，上述例子中是以部署中心执行资源的自动部署和资源存储地址的自动推送，但实际实施中并不局限于此，也可以由其他设备执行。

为了实现上述的页面生成方法，本说明书一个或多个实施例还提供了一种页面生成装置。例如，该装置可以应用于部署中心。如图3所示，该装置可以包括：代码接收模块31、资源部署模块32和地址推送模块33。

代码接收模块31，用于接收页面开发前端发送的前端代码；

资源部署模块32，用于将所述前端代码打包成页面的静态资源，并根据预配置的关联信息，将所述静态资源部署至资源存储地址对应的存储空间，所述关联信息包括：所述页面开发前端与资源存储地址、地址存储装置之间的对应关系；

地址推送模块33，用于根据所述关联信息，将所述资源存储地址推送至地址存储装置，以使得页面服务器由所述地址存储装置获取资源存储地址用于更新页面HTML文件。

在一个例子中，地址推送模块33，具体用于根据预配置的关联信息，将所述资源存储地址推送至所述页面服务器或者共享数据库。

为了实现上述的页面生成方法，本说明书一个或多个实施例还提供了一种页面生成装置。例如，该装置可以应用于页面服务器。如图4所示，该装置可以包括：地址获取模块41、页面更新模块42。

地址获取模块41，用于由地址存储装置获取资源存储地址，所述资源存储地址用于存储根据页面开发前端产生的前端代码打包得到的页面静态资源；

页面更新模块42，用于更新页面HTML文件中的所述资源存储地址，以使得根据所述资源存储地址获取所述静态资源渲染页面。

为了描述的方便，描述以上装置时以功能分为各种模块分别描述。当然，在实施本说明书一个或多个实施例时可以把各模块的功能在同一个或多个软件和/或硬件中实现。

上述方法实施例所示流程中的各个步骤，其执行顺序不限制于流程图中的顺序。此外，各个步骤的描述，可以实现为软件、硬件或者其结合的形式，例如，本领域技术人员可以将其实现为软件代码的形式，可以为能够实现所述步骤对应的逻辑功能的计算机可执行指令。当其以软件的方式实现时，所述的可执行指令可以存储在存储器中，并被设备中的处理器执行。

例如，对应于上述方法，本说明书一个或多个实施例同时提供一种页面生成设备，该设备可以包括处理器、存储器、以及存储在存储器上并可在处理器上运行的计算机指令，所述处理器通过执行所述指令，用于实现如下步骤：

接收页面开发前端发送的前端代码；

将所述前端代码打包成页面的静态资源，并根据预配置的关联信息，将所述静态资源部署至资源存储地址对应的存储空间，所述关联信息包括：所述页面开发前端与资源存储地址、地址存储装置之间的对应关系；

根据所述关联信息，将所述资源存储地址推送至地址存储装置，以使得页面服务器由所述地址存储装置获取资源存储地址用于更新页面HTML文件。

上述实施例阐明的装置或模块，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机，计算机的具体形式可以是个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件收发设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任意几种设备的组合。

本领域内的技术人员应明白，本说明书一个或多个实施例可提供为方法、系统、或计算机程序产品。因此，本说明书一个或多个实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本说明书一个或多个实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本说明书一个或多个实施例可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本说明书一个或多个实施例，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于服务端设备实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

以上所述仅为本说明书一个或多个实施例的较佳实施例而已，并不用以限制本公开，凡在本公开的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本公开保护的范围之内。

Claims (10)

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

接收页面开发前端发送的前端代码；

将所述前端代码打包成页面的静态资源，并根据预配置的关联信息，将所述静态资源部署至资源存储地址对应的存储空间，所述关联信息包括：所述页面开发前端与资源存储地址、地址存储装置之间的对应关系；

根据所述关联信息，将所述资源存储地址推送至地址存储装置，以使得页面服务器由所述地址存储装置获取资源存储地址用于更新页面HTML文件。

2.根据权利要求1所述的方法，所述根据预配置的关联信息，将所述静态资源部署至资源存储地址对应的存储空间，包括：

根据预配置的关联信息，将所述静态资源部署至内容分发网络CDN。

3.根据权利要求1所述的方法，所述根据所述关联信息，将所述资源存储地址推送至地址存储装置，包括：

根据预配置的关联信息，将所述资源存储地址推送至所述页面服务器，由所述页面服务器中的地址存储模块进行存储。

4.根据权利要求1所述的方法，所述根据所述关联信息，将所述资源存储地址推送至地址存储装置，包括：

根据预配置的关联信息，将所述资源存储地址推送至共享数据库。

5.一种页面生成方法，所述方法由页面服务器执行，所述方法包括：

由地址存储装置获取资源存储地址，所述资源存储地址用于存储根据页面开发前端产生的前端代码打包得到的页面静态资源；

更新页面HTML文件中的所述资源存储地址，以使得根据所述资源存储地址获取所述静态资源渲染页面。

6.根据权利要求5所述的方法，所述由地址存储装置获取资源存储地址，包括：由页面服务器的地址存储模块获取所述资源存储地址；

或者，由共享数据库获取所述资源存储地址。

7.一种页面生成装置，所述装置包括：

代码接收模块，用于接收页面开发前端发送的前端代码；

资源部署模块，用于将所述前端代码打包成页面的静态资源，并根据预配置的关联信息，将所述静态资源部署至资源存储地址对应的存储空间，所述关联信息包括：所述页面开发前端与资源存储地址、地址存储装置之间的对应关系；

地址推送模块，用于根据所述关联信息，将所述资源存储地址推送至地址存储装置，以使得页面服务器由所述地址存储装置获取资源存储地址用于更新页面HTML文件。

8.根据权利要求7所述的装置，

所述地址推送模块，具体用于根据预配置的关联信息，将所述资源存储地址推送至所述页面服务器或者共享数据库。

9.一种页面生成装置，所述装置包括：

地址获取模块，用于由地址存储装置获取资源存储地址，所述资源存储地址用于存储根据页面开发前端产生的前端代码打包得到的页面静态资源；

页面更新模块，用于更新页面HTML文件中的所述资源存储地址，以使得根据所述资源存储地址获取所述静态资源渲染页面。

10.一种页面生成设备，所述设备包括存储器、处理器，以及存储在存储器上并可在处理器上运行的计算机指令，所述处理器执行指令时实现以下步骤：

接收页面开发前端发送的前端代码；

将所述前端代码打包成页面的静态资源，并根据预配置的关联信息，将所述静态资源部署至资源存储地址对应的存储空间，所述关联信息包括：所述页面开发前端与资源存储地址、地址存储装置之间的对应关系；

根据所述关联信息，将所述资源存储地址推送至地址存储装置，以使得页面服务器由所述地址存储装置获取资源存储地址用于更新页面HTML文件。