CN112100550A - 一种页面构建方法和装置 - Google Patents

Abstract

本发明公开了一种页面构建方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：接收页面加载请求，获取与页面加载请求相对应的格式数据并解析，得到多个节点的节点数据；根据各节点的节点标识，确定各节点之间的层级关系，以构建节点解析树；确定节点解析树中根节点到各叶子节点的节点路径，按照所确定的节点路径对节点数据进行绘制，以得到页面并显示。该实施方式能够根据数据的动态变化生成不同的页面，无需重启服务端或清除客户端缓存，满足用户个性化需求，减少用户等待的时间，提升用户体验和用户粘性。

Description

一种页面构建方法和装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种页面构建方法和装置。

背景技术

H5是W3C(万维网联盟)的HTML工作组发布的第五代HTML正式标准。H5页面拥有跨平台性、高适配性以及开发体验好等优势，因此在移动领域有着广泛的应用。

目前页面(可不限于是H5)大多通过异步渲染的方式来呈现，例如基于MVC(Model-View-Controller，模型-视图-控制器)架构构建，具体构建过程如下所示：

1)客户端(浏览器或其他移动设备)发起页面构建请求至服务端，服务端调用Model层查询数据；

2)所查询的数据通过后台Controller进行处理加工，生成满足用户需求的数据；

3)提取View模板，将业务数据和已经开发好的页面片段生成为页面，并返回至客户端进行解析显示。

在实现本发明的过程中，发明人发现现有技术至少存在如下问题：

View部分的工作通常需要事先确定页面的样式，即要先开发对应模板，一旦模板开发后往往不容易修改，需要重启服务端或者清除缓存后才可以将新模板更新至客户端。该过程不仅费时费力，而且存在执行效率低、页面样式及功能单一的缺陷，特别是对实时性要求较高的页面，往往不能满足用户的个性化需求。

发明内容

有鉴于此，本发明实施例提供一种页面构建方法和装置，至少能够解决现有技术中模板修改不易，页面功能单一，页面更新耗时耗力的缺陷。

为实现上述目的，根据本发明实施例的一个方面，提供了一种页面构建方法，包括：

接收页面加载请求，获取与所述页面加载请求相对应的格式数据并解析，得到多个节点的节点数据；

根据各节点的节点标识，确定各节点之间的层级关系，以构建节点解析树；

确定所述节点解析树中根节点到各叶子节点的节点路径，按照所确定的节点路径对节点数据进行绘制，以得到页面并显示。

可选的，所述构建节点解析树，包括：通过格式转换方式，对各节点的节点数据和层级关系进行格式转换，得到各节点的格式对象；对所述格式对象进行排列，以构建所述节点解析树。

可选的，所述根据各节点的节点标识，确定各节点之间的层级关系，包括：

根据根节点的标识，确定与所述根节点相关联的子节点，建立所述根节点和所述子节点之间的父子关系；

根据所述子节点的标识，确定与所述子节点相关联的孩子节点，建立所述子节点和所述孩子节点之间的父子关系；

重复上述过程，直至所述子节点或所述孩子节点为叶子节点。

可选的，还包括：在解析所述格式数据的过程中，若出现解析异常情况，则确定解析所述格式数据失败，并提取异常兜底页进行显示。

可选的，在所述接收页面加载请求之前，还包括：接收页面模板获取请求，传输所述页面模板获取请求至服务端，之后接收所述服务端返回的多个页面模板；

接收对所述多个页面模板中的一个页面模板的选择请求，显示所选择的页面模板；

接收所述页面模板的输入数据，传输所述页面模板和所述输入数据至服务端，以通过所述服务端对所述页面模板的配置数据和所述输入数据进行整合和格式转换，得到与所述页面相对应的格式数据。

可选的，在所述显示所选择的页面模板之后，还包括：响应于对所述页面模板中配置选项的编辑操作，得到编辑后的页面模板。

可选的，所述格式数据为JSON数据，所述格式对象为Javascript对象。

为实现上述目的，根据本发明实施例的另一方面，提供了一种页面构建装置，包括：

数据解析模块，用于接收页面加载请求，获取与所述页面加载请求相对应的格式数据并解析，得到多个节点的节点数据；

解析树构建模块，用于根据各节点的节点标识，确定各节点之间的层级关系，以构建节点解析树；

页面构建模块，用于确定所述节点解析树中根节点到各叶子节点的节点路径，按照所确定的节点路径对节点数据进行绘制，以得到页面并显示。

可选的，所述解析树构建模块，用于：通过格式转换方式，对各节点的节点数据和层级关系进行格式转换，得到各节点的格式对象；对所述格式对象进行排列，以构建所述节点解析树。

可选的，所述解析树构建模块，用于：根据根节点的标识，确定与所述根节点相关联的子节点，建立所述根节点和所述子节点之间的父子关系；

根据所述子节点的标识，确定与所述子节点相关联的孩子节点，建立所述子节点和所述孩子节点之间的父子关系；

重复上述过程，直至所述子节点或所述孩子节点为叶子节点。

可选的，还包括异常处理模块，用于：在解析所述格式数据的过程中，若出现解析异常情况，则确定解析所述格式数据失败，并提取异常兜底页进行显示。

可选的，还包括格式数据生成模块，用于：

接收页面模板获取请求，传输所述页面模板获取请求至服务端，之后接收所述服务端返回的多个页面模板；

接收对所述多个页面模板中的一个页面模板的选择请求，显示所选择的页面模板；

接收所述页面模板的输入数据，传输所述页面模板和所述输入数据至服务端，以通过所述服务端对所述页面模板的配置数据和所述输入数据进行整合和格式转换，得到与所述页面相对应的格式数据。

可选的，所述格式数据生成模块，用于：响应于对所述页面模板中配置选项的编辑操作，得到编辑后的页面模板。

可选的，格式数据为JSON数据，所述格式对象为Javascript对象。

为实现上述目的，根据本发明实施例的再一方面，提供了一种页面构建电子设备。

本发明实施例的电子设备包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现上述任一所述的页面构建方法。

为实现上述目的，根据本发明实施例的再一方面，提供了一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现上述任一所述的页面构建方法。

根据本发明所述提供的方案，上述发明中的一个实施例具有如下优点或有益效果：能够根据数据的动态变化生成不同的页面，通过服务端将页面样式和结构数据抽象化，客户端获取服务端生成的格式数据后实时解析渲染，无需重启服务端或清除客户端缓存，满足功能多样性，降低了开发成本，减少用户等待的时间，进而提高用户体验和用户粘性。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明实施例的一种页面构建方法的主要流程示意图；

图2是本发明实施例中根容器、容器和元素之间的关系示意图；

图3是根据本发明实施例的一种可选的页面构建方法的流程示意图；

图4是根据本发明实施例的另一种可选的页面构建方法的流程示意图；

图5是根据本发明实施例的一种具体地页面构建方法的流程示意图；

图6是根据本发明实施例的一种页面构建装置的主要模块示意图；

图7是本发明实施例中DSL生成器、DSL数据解析器和DSL视图绘制器的展示框图；

图8是本发明实施例可以应用于其中的示例性系统架构图；

图9是适于用来实现本发明实施例的移动设备或服务器的计算机系统的结构示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

需要说明的是，本发明实施例主要针对于一定时长内需依据不同需求呈现不同页面结构的网站。以电商活动页为例，经常会有促销活动，这些活动通常需借助网页进行宣传，而不同活动的网页功能、样式都是不同的。

特定领域语言(Domain Specific Language，简称DSL)，为聚焦于特定应用领域的计算机语言。其基本思想是“求专不求全”，区别于通用目的语言可以涵盖目标范围的一切软件问题，而是专门针对某一特定问题的计算机语言。

对于DSL，本发明可以将其设计为所需语言使用。考虑到Javascript(通常简写为JS)是浏览器天然支持的语言、JSON(JavaScript Object Notation，数据交换语言)的普适性，因此，本发明主要选择将DSL设计为Javascript可解析的JSON语言。

参见图1，示出的是本发明实施例提供的一种页面构建方法的主要流程图，包括如下步骤：

S101：接收页面加载请求，获取与所述页面加载请求相对应的格式数据并解析，得到多个节点的节点数据；

S102：根据各节点的节点标识，确定各节点之间的层级关系，以构建节点解析树；

S103：确定所述节点解析树中根节点到各叶子节点的节点路径，按照所确定的节点路径对节点数据进行绘制，以得到页面并显示。

本发明主要包括三部分：DSL生成器、DSL数据解析器、DSL视图绘制器；其中，

1)DSL生成器主要作用于服务端，用于根据用户在客户端对页面模板的选择和所输入的数据，生成格式数据；例如，JSON数据。

2)DSL数据解析器作用于客户端，主要用于解析由DSL生成器产生的格式数据，并构建节点解析树；

3)DSL视图绘制器同样作用于客户端，主要用于将DSL数据解析器生成的节点解析树按照节点层级关系，生成页面并渲染到浏览器中进行显示。

上述实施方式中，对于步骤S101，用户在客户端可以输入网址信息、点击网页链接方式，查看所需页面。

客户端响应于用户的输入网址或点击网页链接操作，发送相应页面加载请求至服务端，以获取与所加载的页面相对应的格式数据。对于服务端中生成格式数据的描述，具体参见后续图4描述。

进一步的，虽格式数据也可以缓存于客户端中，但当页面发生变化时，需要对客户端缓存中的格式数据进行清空及更新，操作较为复杂，耗时较长。因此，本发明主要选择将格式数据存储在服务端中，客户端处理页面加载请求时，需从服务端中获取格式数据。

客户端中的DSL数据解析器读取格式数据，将其分解为三个独立数据：dslRoot、dslMap、dslData；其中，dslRoot用于定义页面根容器(容器：页面模板布局与该模板交互方式的一种封装)的基本属性，dslMap用于定义各个容器或元素的样式，dslData用于存储数据。

dslRoot、dslMap和dslData之间互相有线索联系，以dslRoot为入口，可以在dslMap中找到样式，在dslData中找到数据，例如：

dslRoot:{“dslId”:“AAA”}

dslMap:{“AAA”:{...}}

dslData:{“AAA”:{...}}

其参数的具体含义属于技术细节范畴，可以根据实际情况来开发。

对于网页，通常由解析树所构成，而解析树中各个节点都是由网页的属性所构成。为便于后续描述，对于根容器、容器和元素，可分别对应于根节点、子节点(孩子节点)和叶子节点。因此，解析格式数据所得到的就是多个节点的节点数据。

对于步骤S102，dslRoot用于定义页面根节点的基本属性，从中可以获取根节点的ID。

通过根节点的ID，可以确定与根节点直接关联的子节点。若与子相关联的有多个孩子节点，则需继续确定孩子节点、孩子节点的孩子节点，直至最后一个孩子节点为叶子节点，即元素时停止。最终生成一个能够描述节点层级关系的节点解析树iTree。

节点解析树iTree的第一个节点是根节点，后续依次有子节点、孩子节点，末梢是叶子节点，对应于容器、元素。具体参见图2所示：

1)根节点：对应于根容器

根容器是最外层容器，一般而言只有一个根容器；根容器与容器的区别在于根容器是起点，其他容器和元素都存储于根容器的内部，形成嵌套关系。

2)子节点、孩子节点：对应于容器

容器是枝干分叉(类似于树枝上的小树枝)，容器可以嵌套另一个容器，形成父子关系；并列的容器之间存在兄弟关系。

3)叶子节点：主要对应于元素

元素是最小的单元，不可嵌套容器和元素，只能被嵌套在根容器或容器内。另外，容器也可以不嵌套任何东西而单独存在。

对于步骤S103，节点解析树会交由DSL视图绘制器做进一步处理。

DSL视图绘制器的主要功能，是将DSL数据解析器生成的节点解析树iTree，按照节点之间的层级关系，生成最终页面并渲染到浏览器中进行显示。

DSL视图绘制器读取各节点的节点数据，如样式信息、节点属性、节点点击事件等。其中，节点点击事件应用于网页HTML中，可以对真实DOM节点绑定事件，这样用户点击该节点后可以做一些交互操作，例如页面上的一个按钮。

在该过程中，可能需要一些插件代码来处理相关部分内容。目前已有以下几种插件：

表1插件举例

插件最重要的功能就是能在绘制页面的过程，处理各自划分的逻辑，互相之间不会影响，实现热拔插的效果。也可以对插件进行扩展，实现对页面的特殊化操作，如信息埋点、收集环境信息。

由上可知，节点解析树是与节点数据相关联的，而节点数据又与用户输入的数据相对应。当用户输入的数据发生变更时，所得节点解析树是不一样的，相应所显示的页面也是有区别的，体现了页面变更的实时性。

上述实施例所提供的方法，通过服务端将页面样式和结构数据抽象化，客户端获取格式数据后实时解析渲染，无需重启服务器或清除缓存，即可快速生成满足个性化需求的页面，满足功能多样性。

参见图3，示出了根据本发明实施例的一种可选的页面构建方法流程示意图，包括如下步骤：

S301：接收页面加载请求，获取与所述页面加载请求相对应的格式数据并解析，得到多个节点的节点数据；

S302：根据各节点的节点标识，确定各节点之间的层级关系；

S303：通过格式转换方式，对各节点的节点数据和层级关系进行格式转换，得到各节点的格式对象；

S304：对所述格式对象进行排列，以构建所述节点解析树；

S305：确定所述节点解析树中根节点到各叶子节点的节点路径，按照所确定的节点路径对节点数据进行绘制，以得到页面并显示。

上述实施方式中，对于步骤S301、S302和S305可分别参见图1所示描述，在此不再赘述。

上述实施方式中，对于步骤S303，对于容器、元素等节点的样式信息，可以根据其ID，从dslMap中获取，具体参见表2所示：

表2容器或元素的样式信息

因为应用程序通常会有分支，通过对各容器、元素的样式获取，可以对其进行区别，方便后续处理操作。

对于容器、元素等节点的数据信息获取，可以依据其数据取值路径valueRefer，从dslData中获取，具体参见表3所示：

表3数据源对象

序号	字段	类型	备注
				1	key	字符串	数据源id，用于唯一识别数据对象
2	xxx(自定义)	任意类型	具体值由valueRefer确定

对每个节点的信息进行样式函数计算，得到一个能够记录该节点信息的JS对象，简称vnode(virtual node，虚拟节点)。该虚拟节点包含了节点的文本信息(例如名称)、样式信息、孩子节点信息(例如节点标识)，进一步的还可以包括所关联的父节点信息。

JS对象中除了存储上述信息外，还可以存储器孩子节点的位置信息(在计算机中，存放的是孩子节点JS对象的内存地址)，而孩子节点的JS对象中也同样存储了它的孩子节点的位置信息。当后续需要绘制页面时候，可以通过该位置信息，快速获取孩子节点的数据信息，提高页面绘制速度。

这里的JS对象，主要放置于客户端的内存中，便于在后续整个页面存活期间内的随取随用。

对于步骤S304，每个JS对象中都存储有该节点的从属关系，例如父子关系、兄弟关系等(主要是父子关系)，所有JS对象组合在一起，可以展现所有节点之间的从属关系。

因此，通过这些关系对JS对象进行拼凑，得到一个能够描述节点层级关系且绑定节点数据信息的节点解析树。节点解析树中，树根就是根节点的JS对象，树的叶子节点(即末梢)都是一个个元素节点或容器节点。

本发明还可以对JS对象进行修改，随着节点新的变化，相应绘制的页面也会随之呈现动态变化，可能出现前一刻和当前分别呈现给用户的界面不相同的情况，增强用户使用的新鲜感。

上述实施例所提供的方法，通过将节点信息做样式化处理，可以基于JS对象构建节点解析树，使得所得节点解析树既可以描述节点层级关系、又可以绑定节点信息，提高了后续页面绘制速度。

参见图4，示出了根据本发明实施例的另一种可选的页面构建方法流程示意图，包括如下步骤：

S401：接收页面模板获取请求，传输页面模板获取请求至服务端，之后接收服务端返回的多个页面模板；

S402：接收对多个页面模板中的一个页面模板的选择请求，显示所选择的页面模板；

S403：接收页面模板的输入数据，传输页面模板和输入数据至服务端，以通过服务端对页面模板的配置数据和输入数据进行整合和格式转换，得到与页面相对应的格式数据。

上述实施方式中，对于步骤S401，可以提供“页面模板”的界面或选项，客户端响应于用户对该界面或选项的点击操作，发送页面模板获取请求至服务端。

客户端本身不存储页面模板，这些都仍存储于服务端中，因此，服务端将页面模板传输至客户端。

这里的页面模板可以针对于不同业务类型、不同业务领域预先创建并存储于服务端中。服务端可以根据页面构建请求所包含的业务类型、或者所包含的关键字，提供相应的业务模板并发送至客户端，以供用户预览并选择。

对于步骤S402，用户可以在客户端界面对页面模板进行选择，之后客户端会在界面显示所选择的页面模板。例如，虚化其他业务模板，仅显示页面模板1；或放大所选择的页面模板(例如全屏显示)。

不同用户对于同一页面模板的需求不同，因此，本发明中的页面模板具有可编辑的功能，用户可以点击页面模板中的“编辑”选项，切换进入模板编辑界面。在该界面中，用户可以删减、增加、复制黏贴、拖拽部分配置选项，以得到用户自己期望的页面配置。

对于步骤S403，页面模板中设置有多个选项，用户可以在这些选项中输入所需使用的数据，例如图片、文字、视频等。

对于数据输入，开发人员或者运营人员可以提供数据输入入口，例如CMS(ContentManagement System，内容管理系统)、后台系统界面等来协助操作，但CMS等操作界面不在本发明讨论范围内，本发明对此不做具体阐述。

对于服务端，可以基于该页面模板的配置信息和用户输入的数据，生成格式数据，这里用到了DSL生成器。

DSL生成器的主要功能，是分析页面模板的配置选项，确定根容器、容器、元素等因素，建立针对于这些因素的对于用户所输入数据的获取路径，组合这些信息，生成Javascript可解析的格式数据。

这里简述格式数据的基本组成部分：

1)dslRoot

定义页面根容器的基本属性，如根容器的类型、样式信息、所关联的数据源。如表4所示：

表4根容器的基本属性

序号	字段	类型	备注
				1	key	字符串	根容器id
2	valueRefer	字符串	根容器关联的数据源
				3	type	字符串	根容器类型，如滑动、轮播等
4	style	JS对象	样式信息

2)dslMap

样式集合，定义了各个容器或元素的个性化样式，具体参见图3中表2描述。

个性化样式主要是基于用户所输入的数据、用户所编辑的页面模板生成。这部分可以是用户在配置界面自己设置，也可以是开发人员或运营人员根据用户需求设置，本发明对此不做限制。

3)dslData

数据源对象，根容器以及各个容器、元素所消耗的数据都从dslData中获取，寻址的方式则通过容器或元素的valueRefer字段进行查询，具体参见图3中表3描述。

以上定义了DSL生成器所需使用的三个基本部分，最终三个部分可以整合为一份格式数据，并传输给客户端的DSL数据解析器进行解析，具体参见图1～图3描述。

进一步的，这三部分数据也可以分开进行整合；例如，dslRoot由A服务生成，dslMap由B服务生成，dslData由C服务生成，这需要依赖微服务架构进行处理，此时这三部分数据是一个个进行分发的。

本发明主要选择将dslRoot、dslMap和dslData这三部分数据整合到一个格式数据中，是因为dslRoot+dslMap+dslData经过本过程，可以最后生成一个页面。

上述实施例所提供的方法，不需要依据用户需求编写特定的页面模板，通过服务端将用户需求数据化，避免了重启服务器、清理客户端缓存以更新客户端界面的操作；基于用户对数据的变更，也可以实现格式数据的变更操作，具有实时更新的效果。

参见图5，示出了根据本发明实施例的一具体地页面构建方法流程示意图，包括如下步骤：

S501：接收页面模板获取请求，传输页面模板获取请求至服务端，之后接收服务端返回的多个页面模板；

S502：接收对多个页面模板中的一个页面模板的选择请求，显示所选择的页面模板；

S503：接收页面模板的输入数据，传输页面模板和输入数据至服务端；

S504：通过服务端对页面模板的配置数据和输入数据进行整合和格式转换，得到与页面相对应的格式数据；

S505：接收页面加载请求，获取与页面加载请求相对应的格式数据并解析；

S506：在解析格式数据的过程中，若出现解析异常情况，则确定解析格式数据失败，并提取异常兜底页进行显示；

S507：若解析格式数据正常，则得到多个节点的节点数据；

S508：根据各节点的节点标识，确定各节点之间的层级关系；

S509：通过格式转换方式，对各节点的节点数据和层级关系进行格式转换，得到各节点的格式对象；

S510：对格式对象进行排列，以构建节点解析树；

S511：确定节点解析树中根节点到各叶子节点的节点路径，按照所确定的节点路径对节点数据进行绘制，以得到页面并显示。

上述实施方式中，对于步骤S501～S504可参见图4所示描述，步骤S505、S507～S511可参见图1～图3所示描述，在此不再赘述。

上述实施方式中，对于步骤S506，在解析格式数据的过程中，若出现解析异常情况，可以显示异常兜底页，同时上传数据异常信息至服务端以通知开发人员。

这里的解析异常，可能是由于配置错误、或者遇到了不可解析的字符(反序列化的时候会遇到)、或者网络异常导致数据不完整等，引起的格式数据无法正常解析。如果客户端(浏览器或其他移动设备)使用了这种异常数据，会导致页面不可以正常展示甚至崩溃。

其中，序列化是将数据结构或对象转换成字符串形式，而字符串形式的数据是方便在网络中进行传输的(具体到计算机底层则会将字符串变为了二进制)，几乎所有程序语言都支持识别字符串类型。反序列化可视为是序列化的逆过程，以将在序列化过程中所生成的字符串，转换成数据结构或者对象，方便具体程序语言去处理。

这里的异常兜底页是一种针对异常显示提示文案的页面，用于提醒客户端的用户当前页面出现了异常(例如404等)，可视为是网页的友好行为。

对于步骤S510，在解析JS对象生成节点解析树的过程中，若存在解析JS对象失败的情况，同样可以显示异常兜底页。

进一步的，若该异常为一个较小的异常，对整体界面影响较小，此时也可以将其归置于异常情况中、或者忽略并继续渲染页面。但若异常次数较多，表明整个页面显示会异常，也可以提取异常兜底页进行显示。

对于步骤S511，在绘制节点数据生成页面的同时，DSL视图绘制器还可以有其他功能：

1)提取公共样式

通常页面上可能一些节点虽标识不一、但样式相似，这样可以把这部分样式提取出来，作为公共样式只输出一份，便于多个节点复用，以尽可能节省服务端和客户端的空间占用量。但若样式是某些节点所特有的，则需要特殊进行处理，例如图片和文本。

由于单个节点的style样式是在其vnode中，还没有提现到真实DOM中(在HTML中有style标签)，因此，对于公共样式需要单独生成一个style节点插入到指定容器中，这样样式即可被复用。

这里的指定容器可以是根容器或者某个分叉容器。根容器处于解析树的根部，适用于大部分节点样式一致的情况下，提高样式获取效率；但若公共样式只支持一个分叉使用，也可以将其放置于该分叉的第一个容器或者其中一个容器中。

2)初始化功能性容器

在绘制页面完成后，也可以初始化具有功能性的容器。例如，对于播放视频功效的轮播容器，可以实现容器内部元素的左右轮播、左右/上下滑动效果。

该功能性容器可以是事先已经完成的技术。例如，设置浏览器的运行环境、变量的初始化等，这些虽是程序语言层面的初始化，但主要由客户端浏览器所完成的。

3)懒加载图片

若容器中包含了图片元素，DSL视图绘制器会对图片进行懒加载(即，系统的瓶颈常在于系统的响应速度)操作，以保证对页面的快速渲染，增强首屏能力。

本发明实施例所提供的方法，具有以下实施效果：

1)提供可编辑的页面模板，满足用户的个性化需求；

2)通过服务端，对页面模板和用户输入的数据进行格式转换，得到格式数据。当客户端界面有页面加载请求时，直接传输该格式数据至客户端即可，无论界面是否有更新，都无需重启服务端或清理客户端缓存操作；

3)格式数据与用户输入的数据、用户操作的页面模板相关；通过修改输入的数据，即可实现客户端界面中页面的更新，降低了对人力和时间的消耗。

本发明实施例所提供的方法，能够根据数据的动态变化生成不同页面，通过服务端将页面样式和结构数据抽象化，客户端获取服务端生成的格式数据后实时解析渲染，无需重启服务端或清除客户端缓存，且满足功能多样性，降低了开发成本，减少用户等待的时间，提高用户体验和用户粘性。

参见图6，示出了本发明实施例提供的一种页面构建装置600的主要模块示意图，包括：

数据解析模块601，用于接收页面加载请求，获取与所述页面加载请求相对应的格式数据并解析，得到多个节点的节点数据；

解析树构建模块602，用于根据各节点的节点标识，确定各节点之间的层级关系，以构建节点解析树；

页面构建模块603，用于确定所述节点解析树中根节点到各叶子节点的节点路径，按照所确定的节点路径对节点数据进行绘制，以得到页面并显示。

可选的，所述解析树构建模块602，用于：

通过格式转换方式，对各节点的节点数据和层级关系进行格式转换，得到各节点的格式对象；

对所述格式对象进行排列，以构建所述节点解析树。

可选的，所述解析树构建模块602，用于：

根据根节点的标识，确定与所述根节点相关联的子节点，建立所述根节点和所述子节点之间的父子关系；

根据所述子节点的标识，确定与所述子节点相关联的孩子节点，建立所述子节点和所述孩子节点之间的父子关系；

重复上述过程，直至所述子节点或所述孩子节点为叶子节点。

可选的，还包括异常处理模块604(图中未标出)，用于：

在解析所述格式数据的过程中，若出现解析异常情况，则确定解析所述格式数据失败，并提取异常兜底页进行显示。

可选的，还包括格式数据生成模块605(图中未标出)，用于：

接收页面模板获取请求，传输所述页面模板获取请求至服务端，之后接收所述服务端返回的多个页面模板；

接收对所述多个页面模板中的一个页面模板的选择请求，显示所选择的页面模板；

接收所述页面模板的输入数据，传输所述页面模板和所述输入数据至服务端，以通过所述服务端对所述页面模板的配置数据和所述输入数据进行整合和格式转换，得到与所述页面相对应的格式数据。

可选的，所述格式数据生成模块605(图中未标出)，用于：

响应于对所述页面模板中配置选项的编辑操作，得到编辑后的页面模板。

可选的，格式数据为JSON数据，所述格式对象为Javascript对象。

另外，在本发明实施例中所述的页面构建装置的具体实施内容，在上面所述方法中已经详细说明了，故在此重复内容不再说明。

参见图7，示出了本发明实施例中DSL生成器、DSL数据解析器和DSL视图绘制器的展示框图700；

1)DSL生成器701，主要作用于服务端，用于生成格式数据，该格式数据包括记录根容器属性的dslRoot、记录容器和元素样式信息的dslMap、记录数据源的dslData；

2)DSL数据解析器702，作用于客户端，用于解析从服务端获取的格式数据、生成记录节点信息的格式对象、解析格式对象以构建节点解析树；

3)DSL视图绘制器703，作用于客户端，用于根据节点解析树绘制页面、提取页面中的公共样式、初始化功能性容器以及图片懒加载等。只要下发的数据的实时变更的，那么所构建的页面也是实时变化的。

图8示出了可以应用本发明实施例的页面构建页面构建示例性系统架构800。

如图8所示，系统架构800可以包括终端设备801、802、803，网络804和服务器805(仅仅是示例)。网络804用以在终端设备801、802、803和服务器805之间提供通信链路的介质。网络804可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备801、802、803通过网络804与服务器805交互，以接收或发送消息等。终端设备801、802、803上可以安装有各种通讯客户端应用。

终端设备801、802、803可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器805可以是提供各种服务的服务器，例如对用户利用终端设备801、802、803所浏览的购物类网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的产品信息查询请求等数据进行分析等处理，并将处理结果反馈给终端设备。

需要说明的是，本发明实施例所提供的页面构建方法一般由服务器805执行，相应地，页面构建装置一般设置于服务器805中。

应该理解，图8中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

下面参考图9，其示出了适于用来实现本发明实施例的终端设备的计算机系统900的结构示意图。图9示出的终端设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图9所示，计算机系统900包括中央处理单元(CPU)901，其可以根据存储在只读存储器(ROM)902中的程序或者从存储部分908加载到随机访问存储器(RAM)903中的程序而执行各种适当的动作和处理。在RAM 903中，还存储有系统900操作所需的各种程序和数据。CPU 901、ROM 902以及RAM 903通过总线904彼此相连。输入/输出(I/O)接口905也连接至总线904。

以下部件连接至I/O接口905：包括键盘、鼠标等的输入部分906；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分907；包括硬盘等的存储部分908；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分909。通信部分909经由诸如因特网的网络执行通信处理。驱动器910也根据需要连接至I/O接口905。可拆卸介质911，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器910上，以便于从其上读出的计算机程序根据需要被安装入存储部分908。

特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分909从网络上被下载和安装，和/或从可拆卸介质911被安装。在该计算机程序被中央处理单元(CPU)901执行时，执行本发明的系统中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括数据解析模块、解析树构建模块和页面构建模块。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定，例如，页面构建模块还可以被描述为“通过节点解析树构建网页的模块”。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：

接收页面加载请求，获取与所述页面加载请求相对应的格式数据并解析，得到多个节点的节点数据；

根据各节点的节点标识，确定各节点之间的层级关系，以构建节点解析树；

确定所述节点解析树中根节点到各叶子节点的节点路径，按照所确定的节点路径对节点数据进行绘制，以得到页面并显示。

根据本发明实施例的技术方案，能够根据数据的动态变化而生成不同页面，通过服务端将页面样式和结构数据抽象化，客户端获取服务端生成的格式数据后实时解析渲染，无需重启服务端或清除客户端缓存，且满足功能多样性，降低了开发成本，减少用户等待的时间，进而提高用户体验和用户粘性。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (10)

1.一种页面构建方法，其特征在于，包括：

接收页面加载请求，获取与所述页面加载请求相对应的格式数据并解析，得到多个节点的节点数据；

根据各节点的节点标识，确定各节点之间的层级关系，以构建节点解析树；

确定所述节点解析树中根节点到各叶子节点的节点路径，按照所确定的节点路径对节点数据进行绘制，以得到页面并显示。

2.根据权利要求1所述的方法，其特征在于，所述根据各节点的节点标识，确定各节点之间的层级关系，包括：

根据根节点的标识，确定与所述根节点相关联的子节点，建立所述根节点和所述子节点之间的父子关系；

根据所述子节点的标识，确定与所述子节点相关联的孩子节点，建立所述子节点和所述孩子节点之间的父子关系；

重复上述过程，直至所述子节点或所述孩子节点为叶子节点。

3.根据权利要求1所述的方法，其特征在于，所述构建节点解析树，包括：

通过格式转换方式，对各节点的节点数据和层级关系进行格式转换，得到各节点的格式对象；

对所述格式对象进行排列，以构建所述节点解析树。

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

在解析所述格式数据的过程中，若出现解析异常情况，则确定解析所述格式数据失败，并提取异常兜底页进行显示。

5.根据权利要求1所述的方法，其特征在于，在所述接收页面加载请求之前，还包括：

接收页面模板获取请求，传输所述页面模板获取请求至服务端，之后接收所述服务端返回的多个页面模板；

接收对所述多个页面模板中的一个页面模板的选择请求，显示所选择的页面模板；

接收所述页面模板的输入数据，传输所述页面模板和所述输入数据至服务端，以通过所述服务端对所述页面模板的配置数据和所述输入数据进行整合和格式转换，得到与所述页面相对应的格式数据。

6.一种页面构建装置，其特征在于，包括：

数据解析模块，用于接收页面加载请求，获取与所述页面加载请求相对应的格式数据并解析，得到多个节点的节点数据；

解析树构建模块，用于根据各节点的节点标识，确定各节点之间的层级关系，以构建节点解析树；

页面构建模块，用于确定所述节点解析树中根节点到各叶子节点的节点路径，按照所确定的节点路径对节点数据进行绘制，以得到页面并显示。

7.根据权利要求6所述的装置，其特征在于，所述解析树构建模块，用于：

根据根节点的标识，确定与所述根节点相关联的子节点，建立所述根节点和所述子节点之间的父子关系；

根据所述子节点的标识，确定与所述子节点相关联的孩子节点，建立所述子节点和所述孩子节点之间的父子关系；

重复上述过程，直至所述子节点或所述孩子节点为叶子节点。

8.根据权利要求6所述的装置，其特征在于，所述解析树构建模块，用于：

通过格式转换方式，对各节点的节点数据和层级关系进行格式转换，得到各节点的格式对象；

对所述格式对象进行排列，以构建所述节点解析树。

9.一种电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-5中任一所述的方法。

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

Images