CN107451145A

CN107451145A - 基于多维度多数据源渲染来生成动态页面的方法和装置

Info

Publication number: CN107451145A
Application number: CN201610374805.1A
Authority: CN
Inventors: 贺长荣
Original assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Jingdong Shangke Information Technology Co Ltd
Current assignee: Beijing Jingdong Century Trading Co Ltd; Beijing Jingdong Shangke Information Technology Co Ltd
Priority date: 2016-05-31
Filing date: 2016-05-31
Publication date: 2017-12-08

Abstract

本公开提供了一种基于多维度多数据源渲染来生成动态页面的方法，所述方法包括：对渲染请求进行解析以确定渲染维度，所述渲染维度包括页面维度、布局维度和模块维度；当确定渲染维度是页面维度时，对页面中的布局进行解析以获得布局参数；根据所述布局参数对各个布局中的模块进行解析以获得模块标识；根据模块标识从多个数据源中的相应数据源获取模块数据和模块模板；根据所述模块数据和所述模块模板对各个模块进行渲染以生成相应的模块超文本链接标示语言HTML代码；对生成的模块HTML代码进行组合以生成布局HTML代码；对生成的布局HTML代码进行组合以生成页面HTML代码；以及向浏览器返回所述页面HTML代码。

Description

基于多维度多数据源渲染来生成动态页面的方法和装置

技术领域

本发明涉及动态页面生成的领域，更具体地，涉及基于多维度多数据源渲染来生成动态页面的方法和装置。

背景技术

随着B/S应用的普及，尤其是互联网应用不断涌现，对应用的页面类型多元化和展示效果多样化提出更高的要求，同时要求页面加载速度要快。基于这个情况，除了设计师们设计出多种不同的静态页面效果外，如何生成应用系统页面并且快速加载页面成为了一个关键性问题。传统的实现方法是在服务器上提供一个解释引擎，当用户访问时，首先从数据库中加载数据，然后解释引擎将数据结合动态页面翻译为超文本链接标示语言(HTML)代码，并返回给浏览器。但是这种方式最大的缺陷就是生成页面是串行的，依赖较为严重，耗时较长。

具体地，现有的动态页面生成包括：动态数据加载、数据业务逻辑处理、数据与页面结构结合生成HTML代码，其具体流程如下：

1)客户端(浏览器)发起访问页面请求；

2)服务器端在接收到访问请求之后，从数据库中或者通过远程过程调用协议(RPC)方式加载动态业务数据；

3)根据业务进行数据加工，并将加工后的数据放到上下文中；

4)结合上下文数据与页面结构，生成HTML代码；

5)将HTML代码返回给客户端浏览器；以及

6)浏览器解析页面，展示页面效果。

然而，现有的动态页面生成方法生成动态页面方式比较单一，且页面的各个模块的数据加载是串行化的，耗时较长。由于模块业务数据比较单一，实现多样化页面成本较高。

因而，需要一种提供多种维度快速生成动态页面的方法和装置。

发明内容

鉴于此，本发明提出了一种基于多维度多数据源渲染来生成动态页面的方法和装置。

在本发明的一个方面，公开了一种基于多维度多数据源渲染来生成动态页面的方法，所述方法包括：

对渲染请求进行解析以确定渲染维度，所述渲染维度包括页面维度、布局维度和模块维度；

当确定渲染维度是页面维度时，对页面中的布局进行解析以获得布局参数；

根据所述布局参数对各个布局中的模块进行解析以获得模块标识；

根据模块标识从多个数据源中的相应数据源获取模块数据和模块模板；

根据所述模块数据和所述模块模板对各个模块进行渲染以生成相应的模块超文本链接标示语言HTML代码；

对生成的模块HTML代码进行组合以生成布局HTML代码；

对生成的布局HTML代码进行组合以生成页面HTML代码；以及

向浏览器返回所述页面HTML代码。

优选地，在接收到所述页面HTML代码之后，所述浏览器对所述页面HTML代码进行解析以在显示器上显示与所述页面HTML代码相对应的页面。

优选地，所述方法还包括：

当确定渲染维度是布局维度时，对页面结构文件进行解析以获得页面结构HTML代码；

向浏览器返回所述页面结构HTML代码；

从数据库获取布局参数，并且根据所述布局参数对各个布局中的模块进行解析以获得模块标识；

根据所述模块数据和所述模块模板对各个模块进行渲染以生成相应的模块HTML代码；

对生成的模块HTML代码进行组合以生成布局HTML代码；以及

向浏览器返回所述布局HTML代码。

优选地，在接收到所述页面结构HTML代码和所述布局HTML代码之后，所述浏览器对所述页面结构HTML代码和所述布局HTML代码进行解析以在显示器上显示与所述页面结构HTML代码和所述布局HTML代码相对应的页面。

优选地，所述方法还包括：

当确定渲染维度是模块维度时，对页面结构文件进行解析以获得页面结构HTML代码；

向浏览器返回所述页面结构HTML代码；

从数据库获取模块参数，并且对所述模块参数进行解析以获得模块标识；

根据所述模块数据和所述模块模板对各个模块进行渲染以生成相应的模块HTML代码；以及

向浏览器返回所述模块HTML代码。

优选地，在接收到所述页面结构HTML代码和所述模块HTML代码之后，所述浏览器对所述页面结构HTML代码和所述模块HTML代码进行解析以在显示器上显示与所述页面结构HTML代码和所述模块HTML代码相对应的页面。

在本发明的另一方面，公开了一种基于多维度多数据源渲染来生成动态页面的装置，所述装置包括：

第一解析模块，被配置为对渲染请求进行解析以确定渲染维度，所述渲染维度包括页面维度、布局维度和模块维度；

第二解析模块，被配置为当确定渲染维度是页面维度时，对页面中的布局进行解析以获得布局参数；

第三解析模块，被配置为根据所述布局参数对各个布局中的模块进行解析以获得模块标识；

第一获取模块，被配置为根据模块标识从多个数据源中的相应数据源获取模块数据和模块模板；

第一渲染模块，被配置为根据所述模块数据和所述模块模板对各个模块进行渲染以生成相应的模块超文本链接标示语言HTML代码；

第一组合模块，被配置为对生成的模块HTML代码进行组合以生成布局HTML代码；

第二组合模块，被配置为对生成的布局HTML代码进行组合以生成页面HTML代码；以及

第一传输模块，被配置为向浏览器返回所述页面HTML代码。

优选地，所述装置还包括：

第四解析模块，被配置为当确定渲染维度是布局维度时，对页面结构文件进行解析以获得页面结构HTML代码；

第二传输模块，被配置为向浏览器返回所述页面结构HTML代码；

第二获取模块，被配置为从数据库获取布局参数，并且根据所述布局参数对各个布局中的模块进行解析以获得模块标识；

第三获取模块，被配置为根据模块标识从多个数据源中的相应数据源获取模块数据和模块模板；

第二渲染模块，被配置为根据所述模块数据和所述模块模板对各个模块进行渲染以生成相应的模块HTML代码；

第三组合模块，被配置为对生成的模块HTML代码进行组合以生成布局HTML代码；以及

第三传输模块，被配置为向浏览器返回所述布局HTML代码。

优选地，所述装置还包括：

第五解析模块，被配置为当确定渲染维度是模块维度时，对页面结构文件进行解析以获得页面结构HTML代码；

第四传输模块，被配置为向浏览器返回所述页面结构HTML代码；

第四获取模块，被配置为从数据库获取模块参数，并且对所述模块参数进行解析以获得模块标识；

第五获取模块，被配置为根据模块标识从多个数据源中的相应数据源获取模块数据和模块模板；

第三渲染模块，被配置为根据所述模块数据和所述模块模板对各个模块进行渲染以生成相应的模块HTML代码；以及

第五传输模块，被配置为向浏览器返回所述模块HTML代码。

本发明的优点在于，1)替代单一动态页面加载方式，提供整页面，页面片段，页面结构多维度加载方式；2)多数据源机制实现页面动态组装和加载更加方便快捷；以及3)业务数据并行加载机制，提升页面加载效率。

附图说明

根据结合示例性附图对示例性实施例的以下描述，本公开的其他细节、方面和优点将变得显而易见，在附图中：

图1示出了根据本发明的实施例的页面结构的划分示意图；

图2(a)示出了根据本发明的实施例用于基于多维度多数据源渲染来生成动态页面的方法的第一示意图；

图2(b)示出了根据本发明的实施例用于基于多维度多数据源渲染来生成动态页面的方法的第二示意图；以及

图2(c)示出了根据本发明的实施例用于基于多维度多数据源渲染来生成动态页面的方法的第三示意图。

附图没有对实施例的所有电路或结构进行显示。贯穿所有附图相同的附图标记表示相同或相似的部件或特征。

具体实施方式

下面将详细描述本发明的具体实施例，应当注意，这里描述的实施例只用于举例说明，并不用于限制本发明。在以下描述中，为了提供对本发明的透彻理解，阐述了大量特定细节。然而，对于本领域普通技术人员显而易见的是：不必采用这些特定细节来实行本发明。在其他实例中，为了避免混淆本发明，未具体描述公知的电路、材料或方法。

在整个说明书中，对“一个实施例”、“实施例”、“一个示例”或“示例”的提及意味着：结合该实施例或示例描述的特定特征、结构或特性被包含在本发明至少一个实施例中。因此，在整个说明书的各个地方出现的短语“在一个实施例中”、“在实施例中”、“一个示例”或“示例”不一定都指同一实施例或示例。此外，可以以任何适当的组合和/或子组合将特定的特征、结构或特性组合在一个或多个实施例或示例中。此外，本领域普通技术人员应当理解，在此提供的附图都是为了说明的目的，并且附图不一定是按比例绘制的。这里使用的术语“和/或”包括一个或多个相关列出的项目的任何和所有组合。

首先，将结合图1对页面结构的划分进行描述。页面按照其结构可以划分为整个页面、布局、模块这三个维度。一个页面由一个或多个布局组成，一个布局包含一个或多个模块。模块是构成页面的最小单元。数据加载以及效果展示控制均是在模块维度进行的。

本发明实现了以页面为维度的整页面加载、以及以布局或模块为维度的局部动态页面加载结合页面结构加载实现的页面异步加载。下面将对整页面加载和页面异步加载进行讨论。

参见图2(a)至图2(c)，示出了根据本发明的实施例用于基于多维度多数据源渲染来生成动态页面的方法100的示意图。该方法是整页面加载方法。

首先，参见图2(a)。在步骤S101，接收渲染请求，并且对渲染请求进行解析以确定渲染维度。这里，渲染维度包括页面维度、布局维度和模块维度。

当确定渲染维度是页面维度时，在步骤S102，对页面中的布局进行解析以获得布局参数。布局参数包括模块的数量、模块的类型等等。当确定渲染维度是布局维度时，该方法前进至流程A；当确定渲染维度是模块维度时，该方法前进至流程B。

在步骤S103，根据布局参数对各个布局中的模块进行解析以获得模块标识。这里，步骤S103可以以多线程的方式或单线程的方式来执行。具体地，可以根据步骤S101中接收到的渲染请求来确定执行步骤S103的方式是多线程还是单线程。当以多线程的方式执行步骤S103时，将从线程池中获取线程，然后以异步多线程的方式执行步骤S103；当以单线程的方式执行步骤S103时，将循环执行步骤S103。

在步骤S104，根据模块标识从数据源池的多个数据源中的相应数据源获取模块数据和模块模板。数据源池管理整个系统或平台的数据源，当进行页面维度时可以根据页面业务情况，选择性地使用数据源池中的任意数据源；当有业务扩展时，只需实现定义好的数据源接口即可加入新的数据源。数据源池支持整个页面的数据多元化，多数据源。数据源是数据加载的核心实现，每个数据源负责各自业务数据的加载，数据可以从本地数据库中进行读取，也可以通过远程过程调用协议(RPC)从第三方服务远程获取。由于支持多数据源，首先就要检查数据源的类型，然后再从数据源池中获取。数据源负责模块数据的加载，数据包括本地数据和第三方服务数据。如果模块数据是本地数据，则从本地数据库中加载数据，如果模块数据是第三方数据，则将通过RPC调用远程服务接口获取数据。用于控制页面的展示效果的模块模板只能从本地数据库加载。

在步骤S105，根据模块数据和模块模板对各个模块进行渲染以生成相应的模块HTML代码。应当注意的是，由于模块是整个页面的最小维度，因此可以直接进行渲染。这里，步骤S104和S105可以以多线程的方式或单线程的方式来执行。具体地，可以根据预先配置的配置文件来确定执行步骤S104和S105的方式是多线程还是单线程。当以多线程的方式执行步骤S104和S105时，将从线程池中获取线程，然后以异步多线程的方式执行步骤S104和S105；当以单线程的方式执行步骤S104和S105时，将循环执行步骤S104和S105。

应当注意的是，可以使用多线程布局维度和多线程模块维度中的一种，当页面特别复杂或RPC调用比较多的情况下，可以将多线程布局维度和多线程模块维度一起使用。

在步骤S106，对生成的模块HTML代码进行组合以生成布局HTML代码。

在步骤S107，对生成的布局HTML代码进行组合以生成页面HTML代码。

在步骤S108，向浏览器返回页面HTML代码。当浏览器接收到页面HTML代码之后，浏览器对页面HTML代码进行解析以在显示器上显示与页面HTML代码相对应的页面。

接下来，参见图2(b)，示出了页面异步加载方法。在步骤S201，对页面结构文件进行解析以获得页面结构HTML代码。

在步骤S202，向浏览器返回页面结构HTML代码。

在步骤S203，从数据库获取布局参数，并且根据布局参数对各个布局中的模块进行解析以获得模块标识。

在步骤S204，根据模块标识从数据源池的多个数据源中的相应数据源获取模块数据和模块模板。由于支持多数据源，首先就要检查数据源的类型，然后再从数据源池中获取。数据源负责模块数据的加载，数据包括本地数据和第三方服务数据。如果模块数据是本地数据，则从本地数据库中加载数据，如果模块数据是第三方数据，则将通过RPC调用远程服务接口获取数据。用于控制页面的展示效果的模块模板只能从本地数据库加载。

在步骤S205，根据模块数据和模块模板对各个模块进行渲染以生成相应的模块HTML代码。应当注意的是，由于模块是整个页面的最小维度，因此可以直接进行渲染。这里，步骤S204和S205可以以多线程的方式或单线程的方式来执行。具体地，可以根据预先配置的配置文件来确定执行步骤S204和S205的方式是多线程还是单线程。当以多线程的方式执行步骤S204和S205时，将从线程池中获取线程，然后以异步多线程的方式执行步骤S204和S205；当以单线程的方式执行步骤S204和S205时，将循环执行步骤S204和S205。

在步骤S206，对生成的模块HTML代码进行组合以生成布局HTML代码。

在步骤S207，向浏览器返回布局HTML代码。当浏览器接收到页面结构HTML代码和布局HTML代码之后，浏览器对页面结构HTML代码和布局HTML代码进行解析以在显示器上显示与页面结构HTML代码和布局HTML代码相对应的页面。

最后，参见图2(c)，示出了另一种页面异步加载方法。在步骤S301，对页面结构文件进行解析以获得页面结构HTML代码。

在步骤S302，向浏览器返回页面结构HTML代码。

在步骤S303，从数据库获取模块参数，并且对模块参数进行解析以获得模块标识。

在步骤S304，根据模块标识从数据源池的多个数据源中的相应数据源获取模块数据和模块模板。由于支持多数据源，首先就要检查数据源的类型，然后再从数据源池中获取。数据源负责模块数据的加载，数据包括本地数据和第三方服务数据。如果模块数据是本地数据，则从本地数据库中加载数据，如果模块数据是第三方数据，则将通过RPC调用远程服务接口获取数据。用于控制页面的展示效果的模块模板只能从本地数据库加载。

在步骤S305，根据模块数据和模块模板对各个模块进行渲染以生成相应的模块HTML代码。应当注意的是，由于模块是整个页面的最小维度，因此可以直接进行渲染。这里，步骤S304和S305可以以多线程的方式或单线程的方式来执行。具体地，可以根据预先配置的配置文件来确定执行步骤S304和S305的方式是多线程还是单线程。当以多线程的方式执行步骤S304和S305时，将从线程池中获取线程，然后以异步多线程的方式执行步骤S304和S305；当以单线程的方式执行步骤S304和S305时，将循环执行步骤S304和S305。

在步骤S306，向浏览器返回模块HTML代码。当浏览器接收到页面结构HTML代码和模块HTML代码之后，浏览器对页面结构HTML代码和模块HTML代码进行解析以在显示器上显示与页面结构HTML代码和模块HTML代码相对应的页面。

根据本发明的实施例用于基于多维度多数据源渲染来生成动态页面的装置包括第一解析模块、第二解析模块、第三解析模块、第一获取模块、第一渲染模块、第一组合模块、第二组合模块以及第一传输模块。

第一解析模块被配置为对渲染请求进行解析以确定渲染维度，所述渲染维度包括页面维度、布局维度和模块维度；第二解析模块被配置为当确定渲染维度是页面维度时，对页面中的布局进行解析以获得布局参数；第三解析模块被配置为根据所述布局参数对各个布局中的模块进行解析以获得模块标识；第一获取模块被配置为根据模块标识从多个数据源中的相应数据源获取模块数据和模块模板；第一渲染模块被配置为根据所述模块数据和所述模块模板对各个模块进行渲染以生成相应的模块超文本链接标示语言HTML代码；第一组合模块被配置为对生成的模块HTML代码进行组合以生成布局HTML代码；第二组合模块被配置为对生成的布局HTML代码进行组合以生成页面HTML代码；以及第一传输模块被配置为向浏览器返回所述页面HTML代码。

此外，所述装置还可以包括：第四解析模块、第二传输模块、第二获取模块、第三获取模块、第二渲染模块、第三组合模块、以及第三传输模块。

第四解析模块被配置为当确定渲染维度是布局维度时，对页面结构文件进行解析以获得页面结构HTML代码；第二传输模块被配置为向浏览器返回所述页面结构HTML代码；第二获取模块被配置为从数据库获取布局参数，并且根据所述布局参数对各个布局中的模块进行解析以获得模块标识；第三获取模块被配置为根据模块标识从多个数据源中的相应数据源获取模块数据和模块模板；第二渲染模块被配置为根据所述模块数据和所述模块模板对各个模块进行渲染以生成相应的模块HTML代码；第三组合模块被配置为对生成的模块HTML代码进行组合以生成布局HTML代码；以及第三传输模块被配置为向浏览器返回所述布局HTML代码。

所述装置还可以包括：第五解析模块、第四传输模块、第四获取模块、第五获取模块、第三渲染模块以及第五传输模块。

第五解析模块被配置为当确定渲染维度是模块维度时，对页面结构文件进行解析以获得页面结构HTML代码；第四传输模块被配置为向浏览器返回所述页面结构HTML代码；第四获取模块被配置为从数据库获取模块参数，并且对所述模块参数进行解析以获得模块标识；第五获取模块被配置为根据模块标识从多个数据源中的相应数据源获取模块数据和模块模板；第三渲染模块被配置为根据所述模块数据和所述模块模板对各个模块进行渲染以生成相应的模块HTML代码；以及第五传输模块被配置为向浏览器返回所述模块HTML代码。

该装置与方法100相对应。以上对方法100的具体描述和解释同样适用于该装置，在此不再赘述。

本发明的技术方案已经应用于京东活动/店铺装修平台(jshop)和移动店铺装修平台(PandaCube)，成功地为个性化店铺页面装修提供多数据源服务，极大提升页面组装和业务数据接入效率。多维度的页面渲染方式在不同的场景下得到应用，例如，整页面渲染方式在页面浏览时得到应用，页面结构与布局渲染或模块渲染相结合的方式在装修页面时得到应用，从而加快页面打开速度，极大的提升用户体验。

以上的详细描述通过使用示意图、流程图和/或示例，已经阐述了检查方法和系统的众多实施例。在这种示意图、流程图和/或示例包含一个或多个功能和/或操作的情况下，本领域技术人员应理解，这种示意图、流程图或示例中的每一功能和/或操作可以通过各种结构、硬件、软件、固件或实质上它们的任意组合来单独和/或共同实现。在一个实施例中，本发明的实施例所述主题的若干部分可以通过专用集成电路(ASIC)、现场可编程门阵列(FPGA)、数字信号处理器(DSP)、或其他集成格式来实现。然而，本领域技术人员应认识到，这里所公开的实施例的一些方面在整体上或部分地可以等同地实现在集成电路中，实现为在一台或多台计算机上运行的一个或多个计算机程序(例如，实现为在一台或多台计算机系统上运行的一个或多个程序)，实现为在一个或多个处理器上运行的一个或多个程序(例如，实现为在一个或多个微处理器上运行的一个或多个程序)，实现为固件，或者实质上实现为上述方式的任意组合，并且本领域技术人员根据本公开，将具备设计电路和/或写入软件和/或固件代码的能力。此外，本领域技术人员将认识到，本公开所述主题的机制能够作为多种形式的程序产品进行分发，并且无论实际用来执行分发的信号承载介质的具体类型如何，本公开所述主题的示例性实施例均适用。信号承载介质的示例包括但不限于：可记录型介质，如软盘、硬盘驱动器、紧致盘(CD)、数字通用盘(DVD)、数字磁带、计算机存储器等；以及传输型介质，如数字和/或模拟通信介质(例如，光纤光缆、波导、有线通信链路、无线通信链路等)。

虽然已参照几个典型实施例描述了本发明，但应当理解，所用的术语是说明和示例性、而非限制性的术语。由于本发明能够以多种形式具体实施而不脱离发明的精神或实质，所以应当理解，上述实施例不限于任何前述的细节，而应在随附权利要求所限定的精神和范围内广泛地解释，因此落入权利要求或其等效范围内的全部变化和改型都应为随附权利要求所涵盖。

Claims

1.一种基于多维度多数据源渲染来生成动态页面的方法，所述方法包括：

对生成的模块HTML代码进行组合以生成布局HTML代码；

对生成的布局HTML代码进行组合以生成页面HTML代码；以及

向浏览器返回所述页面HTML代码。

2.根据权利要求1所述的方法，其中，在接收到所述页面HTML代码之后，所述浏览器对所述页面HTML代码进行解析以在显示器上显示与所述页面HTML代码相对应的页面。

3.根据权利要求1所述的方法，还包括：

向浏览器返回所述页面结构HTML代码；

对生成的模块HTML代码进行组合以生成布局HTML代码；以及

向浏览器返回所述布局HTML代码。

4.根据权利要求3所述的方法，其中，在接收到所述页面结构HTML代码和所述布局HTML代码之后，所述浏览器对所述页面结构HTML代码和所述布局HTML代码进行解析以在显示器上显示与所述页面结构HTML代码和所述布局HTML代码相对应的页面。

5.根据权利要求1所述的方法，还包括：

向浏览器返回所述页面结构HTML代码；

向浏览器返回所述模块HTML代码。

6.根据权利要求5所述的方法，其中，在接收到所述页面结构HTML代码和所述模块HTML代码之后，所述浏览器对所述页面结构HTML代码和所述模块HTML代码进行解析以在显示器上显示与所述页面结构HTML代码和所述模块HTML代码相对应的页面。

7.一种基于多维度多数据源渲染来生成动态页面的装置，所述装置包括：

第一传输模块，被配置为向浏览器返回所述页面HTML代码。

8.根据权利要求7所述的装置，其中，在接收到所述页面HTML代码之后，所述浏览器对所述页面HTML代码进行解析以在显示器上显示与所述页面HTML代码相对应的页面。

9.根据权利要求7所述的装置，还包括：

第三传输模块，被配置为向浏览器返回所述布局HTML代码。

10.根据权利要求9所述的装置，其中，在接收到所述页面结构HTML代码和所述布局HTML代码之后，所述浏览器对所述页面结构HTML代码和所述布局HTML代码进行解析以在显示器上显示与所述页面结构HTML代码和所述布局HTML代码相对应的页面。

11.根据权利要求7所述的装置，还包括：

第五传输模块，被配置为向浏览器返回所述模块HTML代码。

12.根据权利要求11所述的装置，其中，在接收到所述页面结构HTML代码和所述模块HTML代码之后，所述浏览器对所述页面结构HTML代码和所述模块HTML代码进行解析以在显示器上显示与所述页面结构HTML代码和所述模块HTML代码相对应的页面。