CN110909273B - 页面的生成方法及相关系统 - Google Patents

Abstract

本发明提供了一种页面的生成方法及相关系统，以解决动态页面加载速度慢的问题。其中，页面的生成方法，包括：依据待生成页面的生成需求，从页面模板的多个区块中选择待生成页面所包括的区块；其中，所述页面模板绑定vue对象，所述页面模板的每一个区块均与vue对象的唯一变量绑定；分别为选择得到的每一个区块配置页面信息；依据所述选择得到的区块和配置的页面信息，在所述vue对象中生成所述待生成页面的页面数据。

Description

页面的生成方法及相关系统

技术领域

本发明涉及页面处理技术领域，尤其涉及一种页面的生成方法及相关系统。

背景技术

网站中展示的页面，在为了实现页面内容的动态调整时，一般设置动态页面。动态页面是一种页面内容可以随着时间或环境等发生改变。

目前，在网站服务器接收到动态页面请求后，需要进一步执行解析、查询数据库等操作，待得到页面的动态内容之后才能返回给客户端，完成页面加载。由于网站服务器执行的解析、查询数据等操作会占用时间，导致动态页面的加载速度较慢。

发明内容

基于上述现有技术的不足，本发明提出一种页面的生成方法及相关系统，以解决动态页面加载速度慢的问题。

为解决上述问题，现提出的方案如下：

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

依据待生成页面的生成需求，从页面模板的多个区块中选择待生成页面所包括的区块；其中，所述页面模板绑定vue对象，所述页面模板的每一个区块均与vue对象的唯一变量绑定；

分别为选择得到的每一个区块配置页面信息；

依据所述选择得到的区块和配置的页面信息，在所述vue对象中生成所述待生成页面的页面数据。

可选地，所述依据所述选择得到的区块和页面信息，在所述vue对象中生成所述待生成页面，包括：

将所述页面模板的多个区块中的剩余区块的数据以空字符替换；其中，所述剩余区块包括：所述页面模板的多个区块中除所述待生成页面所包括的区块之外的区块；

将所述区块配置的页面信息写入所述区块绑定的vue对象的变量。

可选地，所述页面的生成方法还包括：

接收待修改区块的更新后的页面信息；其中，所述待修改区块包括所述待生成页面所包括的区块中的至少一个；

将所述修改区块的更新后的页面信息，替换所述修改区块绑定的vue对象的变量中被写入的页面信息。

可选地，所述页面的生成方法还包括：

存储所述待生成页面到预定目录；

发送同步信号，所述同步信号用于在网站服务器监听到所述同步信号后，依据所述同步信号，读取所述预定目录存储的待生成页面。

可选地，所述页面模板绑定的vue对象包括一个占位符，所述依据所述选择得到的区块和配置的页面信息，在所述vue对象中生成所述待生成页面的页面数据，包括：

组成所述选择得到的区块的页面信息，得到数据对象；

替换所述vue对象中的占位符为所述数据对象。

一种页面的生成装置，包括：

选择单元，用于依据待生成页面的生成需求，从页面模板的多个区块中选择待生成页面所包括的区块；其中，所述页面模板绑定vue对象，所述页面模板的每一个区块均与vue对象的唯一变量绑定；

配置单元，用于分别为选择得到的每一个区块配置页面信息；

生成单元，用于依据所述选择得到的区块和配置的页面信息，在所述vue对象中生成所述待生成页面。

可选地，所述生成单元，包括：

第一替换单元，用于将所述页面模板的多个区块中的剩余区块的数据以空字符替换；其中，所述剩余区块包括：所述页面模板的多个区块中除所述待生成页面所包括的区块外的区块；

写入单元，用于将所述区块配置的页面信息写入所述区块绑定的vue对象的变量。

可选地，所述页面的生成装置还包括：

接收单元，用于接收待修改区块的更新后的页面信息；其中，所述待修改区块包括所述待生成页面所包括的区块中的至少一个；

第二替换单元，用于将所述修改区块的更新后的页面信息，替换所述修改区块绑定的vue对象的变量中被写入的页面信息。

可选地，所述页面的生成装置还包括：

存储单元，用于存储所述待生成页面到预定目录；

发送单元，用于发送同步信号，所述同步信号用于在网站服务器监听到后，依据所述同步信号，读取所述预定目录存储的待生成页面的页面数据。

一种名单的分配装置，包括：存储器和处理器，其中：

所述存储器用于存储计算机指令；

所述处理器用于执行所述存储器存储的计算机指令，具体执行如上述任意一项所述的方法。

一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，所述指令用于执行如上述任意一项所述的方法。

本发明提供的公开的页面的生成方法中，由于页面模板绑定vue对象，页面模板的每一个区块均绑定vue对象的唯一变量，因此，在需要生成页面时，从页面模板的多个区块中选择出待生成页面所包括的区块，分别为选择得到的每一个区块配置页面信息；依据所述选择得到的区块和配置的页面信息，在所述vue对象中生成所述待生成页面的页面数据，所述页面数据写入到所述vue对象的变量里后生成一静态页面，使得浏览器可以直接解析渲染所生成的静态页面和vue对象，实现用于在屏幕上显示的页面效果，不需要服务端请求数据后执行解析、查询数据等操作，解决了动态页面加载速度慢的问题，进一步达到了前端页面与服务器解耦的目的。

附图说明

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

图1为本发明实施例公开的页面的生成方法的流程图；

图2为本发明另一实施例公开的页面的生成方法的流程图；

图3是本发明实施例公开的一种页面的生成装置的结构示意图；

图4为本发明另一实施例公开的页面的生成装置的结构示意图。

具体实施方式

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

本申请实施例提出一种页面的生成方法及相关系统，以解决动态页面加载速度慢的问题。

页面模板，包括多个独立的功能模块，每一个独立的功能模块均可以被定义为一个区块。因此，将页面模块划分为一个一个的区块，且区块之间相互独立，互不影响，划分得到的区块可用于拼接成页面。并且，页面模板，被划分得到多个区块后，还可以根据实际情况，增加或删除该页面模板所包括的区块。

可选地，在页面模块划分的每一个区块的开始和结束处均可打上标签，例如：开始处打上标签<！—section1begin-->，结束处打上标签<！—section1end-->。

需要说明的是，本实施例中提及的页面模板，绑定有一个vue对象。具体的，页面模板可以理解成一段html源代码，html源代码的最顶层分为头部和内容体，body元素就代表内容体。页面模板的body元素绑定vue对象。其中，vue对象是一个根据vue.js框架生成的一个js变量，vue.js是一套构建用户页面的框架，借助于vue.js的双向绑定功能，这个js变量和body元素就会建立直接的绑定关系，body元素的改变，js变量会感知到，相反，js变量的改变，body元素也能感知到。

除了将页面模板的body元素绑定vue对象之外，还需要分别绑定页面模板的每个区块和vue对象包含的一个section变量，一一对应，例如：分块一绑定section1，分块二绑定section2，以此类推。并且，在为一个页面模板新增区块后，还可以自动为该新增的区块绑定页面模板绑定的vue对象中的唯一变量。

还需要说明的是，页面模板可以设置多个。并且，在需要新增一个页面模板时，在页面模板被编译完成后，根据预先编译的页面模板和vue对象的绑定程序，自动为新编译的页面模板绑定一个vue对象。并且，还根据页面模板和vue对象的绑定程序，为新编译的页面模板包括的各个区块绑定该页面模板绑定的vue对象中的唯一变量。

另外需说明的是，本申请中的页面模板为前端页面模板。

基于上述内容，本申请实施例公开了一种页面的生成方法，如图1所示，包括步骤：

S101、依据待生成页面的生成需求，从页面模板的多个区块中选择待生成页面所包括的区块。

其中，所述页面模板如上述内容所示，绑定有vue对象，且所述页面模板的每一个区块均与vue对象的唯一变量绑定。

页面模板绑定vue对象，利用页面模板生成的页面，可以仅与vue对象进行交互，而不用与服务器交互，请求动态页面的动态数据，实现页面与服务器的解耦。并且，在页面需要进行动态调整时，针对需要调整的页面的区块，调整区块绑定的变量中的数据。

所述待生成页面的生成需求用于说明待生成页面的设计要求，可根据设计要求确定出页面模板的多个区块用于拼接页面的区块。可选地，页面模板被划分到的每一个区块可以设置编号，所述待生成页面的生成需求中可携带区块的编号，从页面模板的多个区块中选择所述区块的编号对应的区块。

S102、分别为选择得到的每一个区块配置页面信息。

其中，针对步骤S102中得到的每一个区块，分别配置该区块的页面信息。所述页面信息可包括页面素材和渲染模式。具体的，分别录入每一个区块的页面素材和渲染模式，实现区块的页面信息的配置。

S103、依据所述选择得到的区块和配置的页面信息，在所述vue对象中生成所述待生成页面的页面数据。

所述vue对象与页面模板绑定，且所述页面模板的每一个区块与vue对象的唯一变量绑定。如此，在选择得到所述待生成页面所包括的区块，以及为每一个区块配置页面信息后，可利用所述待生成页面所包括的区块和每一个区块的页面信息，在vue对象中生成所述待生成页面的页面数据。

本发明提供的公开的页面的生成方法中，由于页面模板绑定vue对象，页面模板的每一个区块均绑定vue对象的唯一变量，因此，在需要生成页面时，从页面模板的多个区块中选择出待生成页面所包括的区块，分别为选择得到的每一个区块配置页面信息；依据所述选择得到的区块和配置的页面信息，在所述vue对象中生成所述待生成页面的页面数据，所述页面数据写入到所述vue对象的变量里后生成一静态页面，使得浏览器可以直接解析渲染所生成的静态页面和vue对象，实现用于在屏幕上显示的页面效果，不需要从服务端请求数据然后执行解析、查询数据等操作，解决了动态页面加载速度慢的问题，达到了前端页面与服务器解耦的目的。换句话说，因为生成的静态页面已经包含了区块和存储在vue对象里的区块需要用到的数据信息，所以在用户用浏览器或其它客户端直接访问生成的静态页面后，浏览器会直接解析渲染该静态页面，不会再有额外的服务端处理流程，所以速度会很快。

其中，每一区块根据对应的section变量的数据来渲染，从而避免过多的引入占位符，达到实现页面静态化的目的。具体的，占位符是vue对象里的data变量里的一个属性的值，该占位符下还包括多个section变量，section变量用于分别绑定一个区块。由于所述页面模板绑定有vue对象，且所述页面模板的每一个区块均与vue对象的唯一变量绑定，因而基于该种绑定关系，本申请可以在整个页面生成前，vue对象里只有一个占位符，而页面生成过程中，为每一区块配置的页面信息组成一个数据对象，该数据对象会替换掉vue对象里的这一个占位符，因此，就可以生成一个没有占位符的静态页面。另外，本申请中页面生成过程中将配置的页面信息动态化注入到section变量，页面生成后为一静态页面，从而避免了现有的静态页面都必须是专业编程人员编码实现，本申请中，基于预设的页面模板，页面生成用户选择待生成页面用区块，并为每一区块配置页面信息，即可完成静态页面的生成。

可选地，本申请的另一实施例中，步骤S103的一种实施方式，包括：

将所述页面模板的多个区块中的剩余区块的数据以空字符替换；其中，所述剩余区块包括：所述页面模板的多个区块中除所述待生成页面所包括的区块之外的区块。

将所述区块配置的页面信息写入所述区块绑定的vue对象的变量。

本实施例中，所述页面模板的多个区块中，不属于所述待生成页面所包括的区块，即所述页面模板的多个区块中的剩余区块，可以理解成是所述待生成页面所不需要的区块。因此，在vue对象中生成所述待生成页面的过程中，需要删除这些剩余区块。

具体的，可以将剩余区块中的数据，以空字符串来替换。可选地，页面模块划分的每一个区块的开始和结束处打上标签后，即可以用空字符串来替换掉这两个每个剩余区块的标签之间的数据。

还需要说明的是，每一个区块绑定有vue对象的变量，在待生成页面的生成过程中，根据区块和变量的绑定关系，以及所述待生成页面所包括的每一个区块所绑定的变量，将所述区块的页面信息写入该区块绑定的变量。

其中，在区块配置的页面信息写入绑定的变量之后，所述待生成页面的每一个区块均可以根据变量中的页面信息进行显示。

并且，变量中被写入区块的页面信息，在变量中的数据进行更改后，该变量绑定的区块也会相应的进行变化。具体的，更改区块中写入的页面素材和/或渲染模式，该区块所展示的页面素材和渲染模式也会对应变化。

本申请另一实施例还公开的一种页面的生成方法，如图2所示，包括步骤S201～步骤S205，其中步骤S201～步骤S203的具体实施方式，与上述实施例中步骤S101～步骤S103相同，此处不再赘述。

本实施例中，在步骤S203，生成待生成页面后，如需要调整待生成页面，则可执行步骤S204～步骤S205。

S204、接收待修改区块的更新后的页面信息；其中，所述待修改区块包括所述待生成页面所包括的区块中的至少一个。

S205、将所述修改区块的更新后的页面信息，替换所述修改区块绑定的vue对象的变量中被写入的页面信息。

其中，待生成页面生成后，若需要调整页面内容，可以分区块进行调整。具体的，用户可以向页面的生成装置输入待修改区块的更新后的页面信息，页面的生成装置接收到待修改区块的更新后的页面信息后，还需要将该更新后的页面信息写入该区块绑定的变量中。

可选地，本申请的另一实施例中，在生成待生成页面后，或者对生成的页面进行调整，均还可以执行以下两个步骤。

存储所述待生成页面到预定目录。

发送同步信号，所述同步信号用于在网站服务器监听到所述同步信号后，依据所述同步信号，读取所述预定目录存储的待生成页面。

其中，页面的生成装置生成页面后，需要将其挂到网络中进行展示，如此才可实现页面的应用。

具体的，在页面生成完成之后，需要通知网站服务器，有网站服务器读取该页面进行展示。因此，在所述待生成页面生成或者调整之后，需要将其存储到预定目录，例如：本地的webroot目录。再向外发送同步信号，以向各个网站服务器通告：待生成页面的生成完成或者更新完成。

还需要说明的是，网站服务器读取到待生成页面后，还需要修改路由，将

在每一个网站服务器监听到同步信号，即可以根据同步信号，确定所述待生成页面的存储地址，在该存储地址中读取待生成页面。

本申请的另一实施例还公开了一种页面的生成装置，如图3所示，包括：

选择单元301，用于依据待生成页面的生成需求，从页面模板的多个区块中选择待生成页面所包括的区块；其中，所述页面模板绑定vue对象，所述页面模板的每一个区块均与vue对象的唯一变量绑定。

配置单元302，用于分别为选择得到的每一个区块配置页面信息。

生成单元303，用于依据所述选择得到的区块和配置的页面信息，在所述vue对象中生成所述待生成页面的页面数据。

可选地，本申请的另一实施例中，生成单元303，包括：

第一替换单元，用于将所述页面模板的多个区块中的剩余区块的数据以空字符替换；其中，所述剩余区块包括：所述页面模板的多个区块中除所述待生成页面所包括的区块外的区块。

写入单元，用于将所述区块配置的页面信息写入所述区块绑定的vue对象的变量。

可选地，本申请的另一实施例中，所述页面的生成装置还包括：

接收单元，用于接收待修改区块的更新后的页面信息；其中，所述待修改区块包括所述待生成页面所包括的区块中的至少一个。

第二替换单元，用于将所述修改区块的更新后的页面信息，替换所述修改区块绑定的vue对象的变量中被写入的页面信息。

可选地，本申请的另一实施例中，所述页面的生成装置还包括：

存储单元，用于存储所述待生成页面到预定目录。

发送单元，用于发送同步信号，所述同步信号用于在网站服务器监听到后，依据所述同步信号，读取所述预定目录存储的待生成页面。

可选地，本申请的另一实施例中，所述页面模板绑定的vue对象包括一个占位符，生成单元303执行依据所述选择得到的区块和配置的页面信息，在所述vue对象中生成所述待生成页面的页面数据，用于：组成所述选择得到的区块的页面信息，得到数据对象；替换所述vue对象中的占位符为所述数据对象。

上述各个实施例公开的页面的生成装置中的各个单元的具体工作过程，可参见对应的方法实施例内容，此处不再赘述。

本申请另一实施例还公开了一种页面的生成装置，如图4所示，包括：存储器401和处理器402，其中：

存储器401用于存储计算机指令。

处理器402用于执行所述存储器存储的计算机指令，具体执行如上述实施例公开的所述的页面的生成方法。

本实施例公开的处理器的具体工作过程可参见对应的方法实施例内容，此处不再赘述。

本申请另一实施例还公开了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，所述指令用于执行如上述实施例公开的所述的页面的生成方法。

本实施例公开的指令的具体执行过程可参见对应的方法实施例内容，此处不再赘述。

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

Claims (10)

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

依据待生成页面的生成需求，从页面模板的多个区块中选择所述待生成页面所包括区块的编号对应的区块；其中，所述页面模板绑定vue对象，所述页面模板的每一个区块均与vue对象的唯一变量绑定；所述页面模板被划分到的每一个区块设置编号，所述待生成页面的生成需求中携带待生成页面所包括区块的编号；

分别录入选择得到的每一个区块的页面素材和渲染模式，实现区块的页面信息的配置；

依据所述选择得到的区块和配置的页面信息，在所述vue对象中生成所述待生成页面的页面数据。

2.根据权利要求1所述的方法，其特征在于，所述依据所述选择得到的区块和页面信息，在所述vue对象中生成所述待生成页面，包括：

将所述页面模板的多个区块中的剩余区块的数据以空字符替换；其中，所述页面模板的多个区块中的剩余区块包括：所述页面模板的多个区块中除所述待生成页面所包括的区块之外的区块；

将所述选择得到的区块配置的页面信息写入所述区块绑定的vue对象的变量。

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

接收待修改区块的更新后的页面信息；其中，所述待修改区块包括所述待生成页面所包括的区块中的至少一个；

将所述修改区块的更新后的页面信息，替换所述修改区块绑定的vue对象的变量中被写入的页面信息。

4.根据权利要求1-3中任意一项所述的方法，其特征在于，还包括：

存储所述待生成页面到预定目录；

发送同步信号，所述同步信号用于在网站服务器监听到所述同步信号后，依据所述同步信号，读取所述预定目录存储的待生成页面。

5.根据权利要求1所述的方法，其特征在于，所述页面模板绑定的vue对象包括一个占位符，所述依据所述选择得到的区块和配置的页面信息，在所述vue对象中生成所述待生成页面的页面数据，包括：

组成所述选择得到的区块的页面信息，得到数据对象；

替换所述vue对象中的占位符为所述数据对象。

6.一种页面的生成装置，其特征在于，包括：

选择单元，用于依据待生成页面的生成需求，从页面模板的多个区块中选择所述待生成页面所包括区块的编号对应的区块；其中，所述页面模板绑定vue对象，所述页面模板的每一个区块均与vue对象的唯一变量绑定；所述页面模板被划分到的每一个区块设置编号，所述待生成页面的生成需求中携带待生成页面所包括区块的编号；

配置单元，用于分别录入选择得到的每一个区块的页面素材和渲染模式，实现区块的页面信息的配置；

生成单元，用于依据所述选择得到的区块和配置的页面信息，在所述vue对象中生成所述待生成页面的页面数据。

7.根据权利要求6所述的装置，其特征在于，所述生成单元，包括：

第一替换单元，用于将所述页面模板的多个区块中的剩余区块的数据以空字符替换；其中，所述页面模板的多个区块中的剩余区块包括：所述页面模板的多个区块中除所述待生成页面所包括的区块外的区块；

写入单元，用于将所述选择得到的区块配置的页面信息写入所述区块绑定的vue对象的变量。

8.根据权利要求7所述的装置，其特征在于，还包括：

接收单元，用于接收待修改区块的更新后的页面信息；其中，所述待修改区块包括所述待生成页面所包括的区块中的至少一个；

第二替换单元，用于将所述修改区块的更新后的页面信息，替换所述修改区块绑定的vue对象的变量中被写入的页面信息。

9.一种页面的生成装置，其特征在于，包括：存储器和处理器，其中：

所述存储器用于存储计算机指令；

所述处理器用于执行所述存储器存储的计算机指令，具体执行如权利要求1-5中任意一项所述的方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有指令，所述指令用于执行如权利要求1-5中任意一项所述的方法。

Images