页面处理方法及其系统与流程

本申请涉及计算机技术领域，尤其涉及一种页面处理方法及其系统。

背景技术：

通常而言，在移动客户端屏幕展示区域有限的情况下，会采用个性化的算法，根据用户的访问习惯和个人信息、地理位置等多个维度进行计算，将不同的数据返回给用户展示，由此实现千人千面的页面展示方式。

虽然客户端页面涉及的业务种类及数量众多，但是在页面的设计上，通常是固化为几种方式给到业务，比如：图片、图片+文字、文字等。现有技术中只能通过丰富模板的方式去提供丰富的选择权给用户。

现有技术的缺点很明显的在于需要维持一个繁重的个性化投放系统和客户端页面模块，其服务端依赖的外部服务和客户端编码上都非常的复杂，尤其是客户端的页面编码上，如何既满足不同的页面展示样式需求，又要满足不同的业务数据需求，一直是客户端开发需要解决的技术问题。

技术实现要素：

本申请的主要目的在于提供一种页面处理方法及其系统，以克服现有技术中存在的上述问题。

根据本申请实施例提供一种页面处理方法，其包括：获取客户端页面的多个组件的视图模板描述信息和数据描述信息；提供数据容器和页面容器；通过所述数据容器向对应的数据网关请求与组件的数据描述信息对应的业务数据；接收所述业务数据；由所述页面容器根据所述视图模板描述信息加载组件，并根据所述业务数据对加载的组件进行渲染处理。

其中，所述视图模板描述信息包括：展示位置信息、展示样式信息；所述数据描述信息包括：展示数据的获取地址信息、展示数据的格式信息。

其中，所述通过所述数据容器向对应的数据网关请求与组件的数据描述信息对应的业务数据的步骤，包括：通过所述数据容器将所述展示数据的获取地址信息及所述展示数据的格式信息发送至对应的数据网关，由所述数据网关根据所述展示数据的获取地址信息及所述展示数据的格式信息向服务端请求所述业务数据。

其中，将多个组件的数据描述信息封装为一个批量数据请求信息发送至对应的数据网关，其中每个组件的数据描述信息中携带有对应组件的标识信息；通过所述数据网关接收服务端发送的所述业务数据，根据其中携带的标识信息将所述业务数据返回至对应的组件进行渲染处理。

其中，还包括：将接收到的所述业务数据在客户端所在的终端进行缓存。

其中，还包括：获取组件的数据与视图模板之间的绑定关系；当所述服务端的业务数据发生变更时，根据所述数据与视图模板之间的绑定关系将变更后的业务数据推送至对应的组件进行渲染处理。

其中，还包括：获取客户端页面的待展示组件的列表信息，根据所述列表信息对客户端页面的组件进行渲染处理。

根据本申请实施例还提供一种页面处理系统，其包括：获取模块，用于获取客户端页面的多个组件的视图模板描述信息和数据描述信息；业务数据请求模块，用于通过提供的数据容器向对应的数据网关请求与组件的数据描述信息对应的业务数据；接收模块，用于通过所述数据网关接收所述业务数据；渲染模块，用于由提供的页面容器根据所述视图模板描述信息加载组件，并根据所述业务数据对加载的组件进行渲染处理。

其中，所述视图模板的描述信息包括：展示位置信息、展示样式信息；所述数据描述信息包括：展示数据的获取地址信息、展示数据的格式信息。

其中，所述业务数据请求模块，还用于通过所述数据容器将所述展示数据的获取地址信息及所述展示数据的格式信息发送至对应的数据网关，由所述数据网关根据所述获取地址信息及所述展示数据的格式信息向服务端请求所述业务数据。

其中，所述业务数据请求模块，还用于将多个组件的数据描述信息封装为一个批量数据请求信息发送至对应的数据网关，其中每个组件的数据描述信息中携带有对应组件的标识信息；所述接收模块，还用于通过所述数据网关接收服务端发送的所述业务数据，根据其中携带的标识信息将所述业务数据返回至对应的组件进行渲染处理。

其中，还包括：缓存模块，用于将接收到的所述业务数据在客户端所在的终端进行缓存。

其中，所述获取模块，还用于获取组件的数据与视图模板之间的绑定关系；所述渲染模块，还用于当所述服务端的业务数据发生变更时，根据所述数据与视图模板之间的绑定关系将变更后的业务数据推送至对应的组件进行渲染操作。

其中，所述获取模块，还用于获取客户端页面的待展示组件的列表信息；所述渲染模块，还用于根据所述列表信息对客户端页面的组件进行渲染处理。

根据本申请实施例，通过提供页面容器和数据容器，能够实现组件以插件式的方式插入到容器中，页面容器负责管理组件的渲染和数据需求等，从而以较低的开发成本即满足了大量的业务数据投放和个性化数据需求。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例的页面处理方法的流程图；

图2是根据本申请实施例的页面渲染方法的流程图；

图3是根据本申请实施例的请求业务数据的方法的流程图；

图4是根据本申请一个实施例的系统的结构框图；

图5是根据本申请另一实施例的系统的结构框图。

具体实施方式

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

图1是根据本申请实施例的页面处理方法的流程图，如图1所示，所述方法包括：

步骤s102，获取客户端页面的多个组件的视图模板描述信息和数据描述信息。

在本申请实施例中，客户端可以通过数据投放系统获取客户端页面的待展示组件的视图模板描述信息和数据描述信息。具体而言，客户端向数据投放系统发送个性化数据请求，数据投放系统将与个性化数据请求匹配的个性化数据以及组件的列表信息返回给客户端，其中所述个性化数据以及组件的列表信息可以包括每个组件的展示位置、展示样式、展示的数据以及数据格式等信息。

具体而言，视图模板(template)描述信息：描述该组件的展示类型(展示样式)，例如组件的展示类型可以是图片、文字、按钮、或以上类型的组合；

数据(data)描述信息：描述该组件所需展示的业务数据以及数据格式。进一步地，数据描述信息还包括有获取组件所需展示的业务数据所依赖的数据网关信息；

在本申请的一个实施例中，还可以获取组件的数据与视图之间的绑定关系。数据与视图之间的绑定关系描述组件的视图模板与视图模板展示数据之间的关联关系。当数据发生变更时，根据数据和视图之间的绑定关系可以实现页面视图的局部精准更新。

步骤s104，提供数据容器和页面容器。

其中，所述数据容器负责提供数据给页面容器中的组件，并负责数据请求、数据缓存、数据返回等链路行为。所述页面容器负责统一管理页面的组件以及管理渲染机制和用户界面机制等。

步骤s106，通过所述数据容器向对应的数据网关请求与组件的数据描述信息对应的业务数据。

具体地，组件的数据描述信息中包括有获取所需业务数据所依赖的数据网关信息，数据容器直接向对应的数据网关请求所需的业务数据。

步骤s108，通过所述数据网关接收所述业务数据；

步骤s110，由所述页面容器根据所述视图模板描述信息加载组件，并根据所述业务数据对加载的组件进行渲染处理。

其中，所述页面容器根据组件的视图模板描述信息以及返回的业务数据对组件进行渲染处理。

根据本申请实施例，组件通过统一规范的方式去描述对于模板的需求和数据的需求，而不需要关心页面本身的情况，由页面容器来负责统一的渲染处理。此外，页面容器还负责创建页面和关闭页面的页面生命周期管理。

根据本申请实施例，通过提供页面容器和数据容器，能够实现组件以插件式的方式插入到容器中，页面容器负责管理组件的渲染和数据需求等，从而以较低的开发成本即满足了大量的业务数据投放和个性化数据需求。

下面结合图2详细描述根据本申请实施例的页面渲染方法，如图2所示，包括以下步骤：

步骤s202，通过向数据投放系统发送个性化数据请求，可以获取到客户端页面待展示的组件的详细描述信息。

数据投放系统也可称为个性化数据投放系统，其具有投放个性化业务数据和提供个性化业务数据给客户端的能力。由于本申请不涉及数据投放系统具体架构方式的设计，此处不再赘述。

其中，所述个性化数据请求可以包括：客户端所在终端的网络情况、机型、位置、操作系统版本信息、首页标识、关联的业务、用户访问习惯、个人属性信息等。

步骤s204，数据投放系统将与个性化数据请求匹配的个性化数据以及组件的列表信息返回给客户端，其中所述个性化数据以及组件的列表信息可以包括每个组件的展示位置、展示样式、展示的数据以及数据格式等信息。

其中，数据投放系统投放的数据根据上述个性化数据请求中包含的多维度的个性化数据进行计算而确定。

步骤s206，客户端页面接收到组件的描述信息后，发起页面渲染。

步骤s208，响应页面发起的渲染，页面容器调用数据容器的接口，向数据容器批量请求所需的数据。具体而言，根据数据描述信息中的展示数据的获取地址信息及展示数据的格式信息，通过所述数据容器向对应的数据网关请求对应的业务数据。

步骤s210，数据容器返回所述业务数据，数据容器可以采用一次统一返回或者多次分批的方式来返回数据。

步骤s212，由所述页面容器根据所述视图模板描述信息加载组件，并根据所述业务数据对加载的组件进行渲染处理。具体而言，页面容器根据组件的模板描述部分实现为具体的视图，将通过数据容器获取的业务数据发送给组件进行渲染处理，这样组件就成为了可以直接展示给用户的视图。

下面结合图3描述根据本申请实施例的通过数据容器向数据网关请求业务数据的方法，如图3所示，包括：

步骤302，获取客户端页面中所有组件的描述信息，其中组件的描述信息包括：数据描述信息和视图模板描述信息。

步骤304，将每一个组件的数据描述信息封装为一个子数据请求，并将所有的子数据请求封装为一个批量数据请求，其中每个组件的子数据请求中携带有对应组件的标识信息。

由于请求采用批量的形式，为了将批量请求的返回能对应到每一个发起者组件，所以每一个子数据请求都需要携带组件的识别信息，此处采用组件id的方式进行区分。

步骤306，将批量数据请求发送给对应的数据网关，由所述数据网关根据对应组件的展示数据的获取地址信息及展示数据的格式信息向服务端请求所述业务数据。

步骤308，服务端维护有组件的视图模板所需的数据信息，服务端依次调用每个子数据请求对应的业务数据并且封装返回给所述数据网关，数据网关再将所述业务数据返回给数据容器。

步骤310，数据容器等待所有请求执行完毕统一封装返回业务数据。

在本步骤中，还可以在每一个子数据请求执行完毕后将对应的业务数据直接返回给客户端，本申请对此不进行限制。

步骤312，根据组件id将业务数据返回给对应的组件进行渲染处理，流程结束。

需要说明，每一个组件的数据都支持缓存，在数据容器中将采用统一的缓存管理机制来应对每一个组件的缓存需求，这个缓存读写过程对于上层组件而言是透明的，组件只需要声明缓存有效时长即可，(如果还在有效期)下一次的请求可以直接使用，从而避免每一次都去请求数据，如果声明为0则意味着不可以被缓存。

在本申请的一个实施例中，组件所展示的数据并不是一成不变的，当服务端数据发生变化的时候，可以通过主动通知的方式，通知客户端进行刷新。具体地，组件容器将属性为动态组件的组件向服务端发起订阅消息请求。服务端建立并维持组件的数据与视图模板之间的绑定关系，当服务端推送消息到达时(比如push、长链接通道的消息等)，通过查询绑定关系，可以精确的将发生变化的业务数据推送至对应的组件，页面容器对页面局部视图进行自动刷新(渲染处理)。

在描述根据本申请实施例的页面处理系统之前，先结合图4介绍客户端、服务端、以及数据投放系统之间的关系。如图4所示，客户端41向数据投放系统42发送个性化数据请求，从而获取到客户端页面待展示的组件的描述信息，所述描述信息至少包括：视图模板描述信息和数据描述信息。客户端页面的待展示组件可以是数据投放系统42通过个性化计算后的数据投放结果，不同的用户看到的组件的内容可以都不相同。

页面容器411和数据容器412布置在客户端41。数据容器412通过数据网关(未示出)向服务端43请求与组件的数据描述信息对应的业务数据。页面容器411发起页面渲染，根据所述视图模板描述信息以及所述业务数据对组件进行渲染处理。也就是说，数据容器412负责提供数据给页面容器中的组件，并负责数据请求、数据缓存、数据返回等链路行为。页面容器411负责统一管理页面的组件以及管理渲染机制和用户界面机制等。

参考图5，是根据本申请实施例的页面处理系统50的结构框图，其包括：

获取模块51，用于获取客户端页面的多个组件的视图模板描述信息和数据描述信息。

业务数据请求模块52，用于通过提供的数据容器向对应的数据网关请求与组件的数据描述信息对应的业务数据。

接收模块53，用于接收所述业务数据。

渲染模块54，用于由提供的页面容器根据所述视图模板描述信息加载组件，并根据所述业务数据对加载的组件进行渲染处理。

其中，所述数据描述信息包括：展示数据的获取地址信息、展示数据的格式信息，所述视图模板描述信息包括：展示位置信息、展示样式信息。

在一个实施例中，所述业务数据请求模块52，还用于通过所述数据容器将所述展示数据的获取地址信息及所述展示数据的格式信息发送至对应的数据网关，由所述数据网关根据所述获取地址信息及所述展示数据的格式信息向服务端请求所述业务数据。

在一个实施例中，所述业务数据请求模块52，还用于将多个组件的数据描述信息封装为一个批量数据请求信息发送至对应的数据网关，其中每个组件的数据描述信息中携带有对应组件的标识信息。所述接收模块53，还用于通过所述数据网关接收所述服务端发送的所述业务数据，根据其中携带的标识信息将所述业务数据返回至对应的组件进行渲染处理。

在一个实施例中，所述系统50还包括：缓存模块55，用于将所述接收模块53接收到的业务数据进行缓存。

在一个实施例中，所述获取模块51，还用于获取组件的数据与视图模板之间的绑定关系；所述渲染模块54，还用于当所述服务端的业务数据发生变更时，根据所述数据与视图模板之间的绑定关系将变更后的业务数据推送至对应的组件进行渲染操作。

在一个实施例中，所述获取模块51还用于获取客户端页面的待展示组件的列表信息；所述渲染模块54根据所述列表信息对客户端页面的组件进行渲染处理。

本申请的方法的操作步骤与系统的结构特征对应，可以相互参照，不再一一赘述。

综上所述，根据本申请实施例，通过提供页面容器和数据容器，能够实现组件以插件式的方式插入到容器中，数据容器负责请求组件待展现的业务数据，页面容器负责管理组件的渲染，从而以较低的开发成本即满足了大量的业务数据投放和个性化数据需求。对于数据投放系统而言，在前端页面展现上不需要关心页面该使用哪些数据来进行渲染，在后端系统服务上，也不需要关心需要依赖哪些后台服务接口，而是通过标准的数据描述的方式动态调用业务数据。

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

在一个典型的配置中，计算设备包括一个或多个处理器(cpu)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flashram)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd-rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitorymedia)，如调制的数据信号和载波。

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

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。