CN113987385A - 一种页面渲染方法及装置 - Google Patents

Abstract

本发明公开了一种页面渲染方法及装置，包括：前端基于页面元素的事件触发指令，获取事件触发指令对应的第一事件组件；基于第一事件组件调用的上报函数，得到第一事件组件的事件任务信息；其中，上报函数以页面元素的任务对象中的事件任务信息为变量；事件任务信息用于指示事件组件对应的各子任务及执行顺序；在确定事件任务信息中任一子任务需调用中间服务器时，将子任务发送至中间服务器；基于中间服务器得到子任务的执行结果，根据执行结果修改第二事件组件；基于第二事件组件进行渲染显示。以此减少了事件组件的执行代码，简化了事件组件的内容，只保留事件组件的渲染功能，进而提升事件组件的复用性，降低事件组件的维护与管理难度。

Description

一种页面渲染方法及装置

技术领域

本发明涉及金融科技(Fintech)领域，尤其涉及一种页面渲染方法及装置。

背景技术

随着计算机技术的发展，越来越多的技术(例如：区块链、云计算或大数据)应用在金融领域，传统金融业正在逐步向金融科技转变，大数据技术也不例外，但由于金融、支付行业的安全性、实时性要求，也对大数据的页面渲染技术提出了更高的要求。

现有技术中，前端的页面可视化搭建，一般是由管理台提供可视化编辑前端页面的功能实现的。具体的，管理台提供可视化的页面组件，由研发人员选择需要在前端渲染的页面组件(如按钮组件、输入框组件等)，从而根据前端渲染框架(如vue、react等)确定出待渲染页面元素的JSON(JavaScript Object Notation，JS对象简谱)对象数组。

得到前端显示的页面元素的一般为前端向后台服务器发送请求，接收后台服务器返回的JSON对象，根据JSON对象确定页面组件，执行页面组件中的执行函数，以此将页面组件渲染为页面元素。

但是现有技术中存在的问题在于，页面组件之间是相互隔离的，无法通讯与交互，且业务逻辑的执行代码全部冗余在页面组件内，也就是说，页面组件内包括多个业务逻辑的执行代码，以实现执行不同的业务逻辑，从而在前端渲染为不同业务逻辑的页面元素，因此导致页面组件的代码复杂、繁多，不易维护与管理。

发明内容

本发明实施例提供一种页面渲染方法及装置，用于减少页面组件的执行代码，简化页面组件的内容，提升页面组件的复用性，降低页面组件的维护与管理难度。

第一方面，本发明实施例提供一种页面渲染方法，包括：

前端基于页面元素的事件触发指令，获取所述事件触发指令对应的第一事件组件；

所述前端基于所述第一事件组件调用的上报函数，得到所述第一事件组件的事件任务信息；其中，所述上报函数以所述页面元素的任务对象中的事件任务信息为变量；所述事件任务信息用于指示事件组件对应的各子任务及执行顺序；

所述前端在确定所述事件任务信息中任一子任务需调用中间服务器时，将所述子任务发送至中间服务器；

所述前端基于所述中间服务器得到所述子任务的执行结果，根据所述执行结果修改第二事件组件；

所述前端基于所述第二事件组件进行渲染显示。

上述技术方案中，事件组件包括事件任务信息，其中事件任务信息指示了事件组件对应的各子任务及执行顺序，用于渲染显示，因为对于需要调用中间服务器的子任务，子任务的执行过程以及确定子任务的执行结果是由中间服务器完成的，相当于事件任务的执行代码设置于中间服务器，以此减少了事件组件的执行代码，进而简化了事件组件的内容，只保留了事件组件的渲染功能，进而提升了事件组件的复用性，降低了事件组件的维护与管理难度。

可选的，事件组件通过如下方式获得，包括：

获取页面元素的任务对象；其中，所述任务对象配置有事件任务名和事件任务信息的对应关系；

基于所述任务对象，形成具有事件组件的上报函数的控制对象；所述上报函数以所述事件任务信息作为变量；

将所述控制对象加入所述页面对象的组件参数；

基于所述页面对象的组件参数和所述页面对象的组件样式，构建事件组件。

上述技术方案中，事件组件是根据控制对象、页面对象的组件参数和页面对象的组件样式构建的，其中，控制对象用于表征事件任务信息，不具备具体的执行代码，页面对象的组件参数和页面对象的组件样式用于对事件组件进行渲染显示，因此任务的执行代码并未设置于事件组件中，以此减少了事件组件的执行代码，简化了事件组件的内容，只保留了事件组件的渲染功能，进而提升了事件组件的复用性，降低了事件组件的维护与管理难度。

可选的，述前端在确定所述事件任务信息中任一子任务需调用中间服务器时，将所述子任务发送至中间服务器，包括：

所述前端若确定第i子任务的调用类型为请求类型，则将第i子任务的信息以及第i-1子任务的执行结果发送至所述中间服务器；所述第i-1子任务为所述第i子任务的前一个子任务。

上述技术方案中，通过子任务的调用类型确定是否需要将子任务发送至中间服务器，减少与中间服务器交互，节省计算资源；通过将第i-1子任务的执行结果发送至中间服务器，以使中间服务器确定第i子任务的执行结果，保证第i子任务的执行结果准确性和实时性。

可选的，所述前端基于所述中间服务器得到所述子任务的执行结果，包括：

所述前端在确定所述子任务为script请求，则从所述中间服务器得到所述子任务的任务指令，并基于所述任务指令确定所述子任务的执行结果；

所述前端在确定所述子任务为exec请求，则从所述中间服务器得到所述子任务的执行结果。

上述技术方案中，根据不同的请求类型，前端直接得到子任务的任务指令或执行结果，若前端得到子任务的任务指令，可以根据事件任务信息(如第i-1子任务的执行结果、第i子任务的初始参数等)得到对应的执行结果(如页面弹窗提示，回到页面顶部等)，以此减少中间服务器的计算量，防止中间服务器计算拥堵。

可选的，所述从所述中间服务器得到所述子任务的任务指令，并基于所述任务指令确定所述子任务的执行结果，包括：

所述前端接收所述子任务的任务指令对应的字符串；

所述前端使用预设函数，将所述字符串转换为任务指令并存储；

所述前端根据所述任务指令、第i-1子任务的执行结果和第i子任务的初始输入参数确定第i子任务的执行结果。

上述技术方案中，前端与中间服务器之间的任务指令传输是由字符串的形式进行传输的，以提升数据传输效率，通过将任务指令并存储，以使前端执行第i子任务之后的任务时，若命中存储的任务指令，则不需要访问中间服务器，以此减少与中间服务器的交互，减少中间服务器的计算量，防止中间服务器计算拥堵。

可选的，将所述子任务发送至中间服务器之前，还包括：

所述前端确定未存储所述子任务的任务指令。

上述技术方案中，前端若确定存储由子任务的任务指令，则不需要访问中间服务器，以此减少与中间服务器的交互，减少中间服务器的计算量，防止中间服务器计算拥堵。

可选的，所述方法还包括：

所述前端确定第i子任务的调用类型为触发类型，则根据所述第i子任务指示的待调用事件组件的唯一标识，确定调用函数；

所述前端基于所述调用函数，调用所述待调用事件组件。

上述技术方案中，前端在确定第i子任务的调用类型为触发类型时，则需要调用其他事件组件，也就是待调用事件组件，从而实现事件组件与事件组件之间的交互，提升调用事件组件的灵活性。

第二方面，本发明实施例提供一种页面渲染方法，包括：

中间服务器接收前端基于页面元素的事件触发指令，发送的事件组件的子任务；所述子任务为事件任务信息中需调用中间服务器的子任务；所述事件任务信息是基于所述事件组件调用的上报函数得到的；所述上报函数以所述页面元素的任务对象中的事件任务信息为变量；所述事件任务信息用于指示事件组件对应的各子任务及执行顺序；

所述中间服务器向所述前端反馈所述子任务的任务指令或所述子任务的执行结果。

上述技术方案中，由中间服务器对子任务进行业务逻辑执行，确定子任务的执行结果，相当于事件任务的执行代码设置于中间服务器，以此减少了事件组件的执行代码，进而简化了事件组件的内容，只保留了事件组件的渲染功能，进而提升了事件组件的复用性，降低了事件组件的维护与管理难度。

可选的，所述中间服务器存储有各子任务的任务指令；

所述中间服务器向所述前端反馈所述子任务的任务指令或所述子任务的执行结果，包括：

所述中间服务器确定所述子任务为script请求，则将所述子任务的任务指令转换为字符串，将所述字符串发送至所述前端；

所述中间服务器确定所述子任务为exec请求，则根据所述子任务的任务指令调用后台服务器，得到所述子任务的执行结果，并将所述子任务的执行结果返回至所述前端；所述后台服务器存储于各exec请求的任务指令的执行结果。

上述技术方案中，根据不同的请求类型，中间服务器反馈子任务的任务指令或执行结果；对于子任务的任务指令，由前端根据子任务的任务指令、事件任务信息(如第i-1子任务的执行结果、第i子任务的初始参数等)得到对应的执行结果(如页面弹窗提示，回到页面顶部等)，以此减少中间服务器的计算量，防止中间服务器计算拥堵。

第三方面，本发明实施例提供一种页面渲染装置，包括：

获取模块，用于基于页面元素的事件触发指令，获取所述事件触发指令对应的第一事件组件；

处理模块，用于基于所述第一事件组件调用的上报函数，得到所述第一事件组件的事件任务信息；其中，所述上报函数以所述页面元素的任务对象中的事件任务信息为变量；所述事件任务信息用于指示事件组件对应的各子任务及执行顺序；

在确定所述事件任务信息中任一子任务需调用中间服务器时，将所述子任务发送至中间服务器；

基于所述中间服务器得到所述子任务的执行结果，根据所述执行结果修改第二事件组件；

基于所述第二事件组件进行渲染显示。

可选的，事件组件通过如下方式获得，包括：

所述处理模块控制获取模块获取页面元素的任务对象；其中，所述任务对象配置有事件任务名和事件任务信息的对应关系；

所述处理模块基于所述任务对象，形成具有事件组件的上报函数的控制对象；所述上报函数以所述事件任务信息作为变量；

将所述控制对象加入页面对象的组件参数；

基于所述页面对象的组件参数和所述页面对象的组件样式，构建事件组件。

可选的，所述处理模块具体用于：

若确定第i子任务的调用类型为请求类型，则将第i子任务的信息以及第i-1子任务的执行结果发送至所述中间服务器；所述第i-1子任务为所述第i子任务的前一个子任务。

可选的，所述处理模块具体用于：

在确定所述子任务为script请求，则从所述中间服务器得到所述子任务的任务指令，并基于所述任务指令确定所述子任务的执行结果；

在确定所述子任务为exec请求，则从所述中间服务器得到所述子任务的执行结果。

可选的，所述处理模块具体用于：

接收所述子任务的任务指令对应的字符串；

使用预设函数，将所述字符串转换为任务指令并存储；

根据所述任务指令、第i-1子任务的执行结果和第i子任务的初始输入参数确定第i子任务的执行结果。

可选的，所述处理模块还用于：

将所述子任务发送至中间服务器之前，确定未存储所述子任务的任务指令。

可选的，所述处理模块还用于：

确定第i子任务的调用类型为触发类型，则根据所述第i子任务指示的待调用事件组件的唯一标识，确定调用函数；

基于所述调用函数，调用所述待调用事件组件。

第四方面，本发明实施例提供一种页面渲染装置，包括：

接收单元，用于接收前端基于页面元素的事件触发指令，发送的事件组件的子任务；所述子任务为事件任务信息中需调用中间服务器的子任务；所述事件任务信息是基于所述事件组件调用的上报函数得到的；所述上报函数以所述页面元素的任务对象中的事件任务信息为变量；所述事件任务信息用于指示事件组件对应的各子任务及执行顺序；

处理单元，向所述前端反馈所述子任务的任务指令或所述子任务的执行结果。

可选的，所述处理单元具体用于：

确定所述子任务为script请求，则将所述子任务的任务指令转换为字符串，将所述字符串发送至所述前端；

确定所述子任务为exec请求，则根据所述子任务的任务指令调用后台服务器，得到所述子任务的执行结果，并将所述子任务的执行结果返回至所述前端；所述后台服务器存储于各exec请求的任务指令的执行结果。

第五方面，本发明实施例还提供一种计算机设备，包括：

存储器，用于存储程序指令；

处理器，用于调用所述存储器中存储的程序指令，按照获得的程序执行上述页面渲染方法。

第六方面，本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可执行指令，所述计算机可执行指令用于使计算机执行上述页面渲染方法。

附图说明

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

图1为本发明实施例提供的一种确定DOM元素的示意图；

图2为本发明实施例提供的一种执行业务逻辑的示意图；

图3为本发明实施例提供的一种系统架构示意图；

图4为本发明实施例提供的一种页面渲染方法的流程示意图；

图5为本发明实施例提供的一种任务对象的示意图；

图6为本发明实施例提供的一种事件组件的示意图；

图7为本发明实施例提供的一种调用上报函数的流程示意图；

图8为本发明实施例提供的一种确定执行结果的示意图；

图9为本发明实施例提供的一种确定执行结果的示意图；

图10为本发明实施例提供的一种调用待调用事件组件的示意图；

图11为本发明实施例提供的一种页面渲染方法的流程示意图；

图12为本发明实施例提供的一种页面渲染方法；

图13为本发明实施例提供的一种页面渲染装置的结构示意图；

图14为本发明实施例提供的一种页面渲染装置的结构示意图。

具体实施方式

为了使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明作进一步地详细描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。

现有技术中，页面中显示的页面元素(如按钮、输入框等)是由研发人员通过管理台提供的功能实现的，例如，管理台提供可视化编辑营销活动页面的页面组件，提交后在客户端的活动页展示将与管理台配置的一致。

其中，页面组件是一个模块化并能够渲染成元素的框架定义的代码文件，可以通过vue或react等前端主流框架的执行函数渲染出DOM(Document Object Model，文档对象模型)元素。

页面组件通过JSON对象抽象出来，以可视化的方式在管理台上配置(如拖拽、表单修改)JSON对象，JSON对象内部存在三个主要属性去映射组件。分别为tag(标签)属性，用于标识页面组件；style(样式)属性，用于表示页面组件在前端渲染时的样式(正方形、圆形等)；props(支持者)属性，用于提供页面组件渲染时的逻辑执行参数(如弹出窗口中的标题文案、跳转页面等)。

对于前端渲染页面组件的过程，以vue框架为例，包括如下步骤；

S1、遍历各JSON对象，解析各JSON对象的tag属性、style属性和props属性的参数。

S2、前端根据自身存储的“tag属性参数与页面组件映射”的集合，通过JSON对象的tag属性参数命中前端上的页面组件，页面组件中包括业务逻辑的执行代码，将style属性和props属性的参数传入页面组件，得到DOM元素。

S3、根据DOM元素显示页面元素。

进一步地，图1示例性的示出了一种确定DOM元素的示意图，如图1所示，通过将style属性和props属性的参数传入页面组件，得到“按钮”元素，并肩“按钮”渲染显示于前端。

在前端渲染显示页面组件之后，用户通过触发对应的页面元素发起任务事件，任务事件会映射到页面组件的执行代码，进而确定出执行结果。具体的，图2为本发明实施例示例性示出了一种执行业务逻辑的示意图，如图2所示，任务事件触发代码函数定义了一个请求中间服务器服务的方法，并请求回调中间服务器服务的执行结果，然后再得到执行结果之后更新页面组件或触发其他页面组件内部定义的机制，最后更新前端的页面元素。

但在上述的现有技术中，存在的问题在于：

第一，进行渲染的页面组件之间是相互隔离的，不同页面组件之间无法交互自身的方法，也就是说，无法在A1页面组件的执行方法中，调用A2页面组件的方法；

第二、页面组件的事件任务的业务逻辑执行代码集成在页面组件内，为了满足一个页面组件在不同业务场景下的实现，就需要将不同的业务逻辑执行代码全部写入页面组件，例如，页面组件对应“按钮”页面元素，对于B1活动，“按钮”的业务逻辑为跳转，对于B2活动，“按钮”的业务逻辑为抽奖，因此，需要将两种业务逻辑全部写入在页面组件内，随着业务逻辑的增加，页面组件内的业务逻辑执行代码也会随之增加，久而久之，导致页面组件内的代码繁多、复杂，不易维护，性能降低；

第三、基于上述技术问题，因为页面组件中包括多个业务逻辑的执行代码，因此同一页面组件会应用于不同活动的前端页面，若对该页面组件的业务逻辑进行调整时，需要考虑对使用该页面组件的前端页面的影响和兼容，导致前端页面维护难度大。

因此，现需要一种页面的渲染方法，使页面组件中不包括业务逻辑的执行代码，简化页面组件的内容，提升页面组件的复用性，降低页面组件的维护与管理难度。

图3示例性的示出了本发明实施例所适用的一种系统架构，该系统架构包括前端服务器310、数据中心320、控制层330、中间服务器340、后台服务器350。

其中，前端服务器310用于对事件组件进行渲染显示，也就是说在前端显示事件组件对应的页面元素，以使用户点击使用，触发事件触发指令，前端可以为移动终端的页面，如手机、笔记本电脑的页面等。

数据中心320，用于提供事件组件的属性参数，如tag属性、style属性、props属性和events(事件)属性参数等。

控制层330，用于劫持页面元素对应的页面对象的style属性和props属性参数，然后基于任务对象，形成具有事件组件的上报函数的控制对象，将控制对象加入页面对象的组件参数；基于页面对象的组件参数(props参数)和页面对象的组件样式(style参数)，构建事件组件。

中间服务器340，用于根据子任务的任务名确定子任务的任务指令，并根据子任务的请求类型和任务指令将任务指令发送至控制层330，或请求后台服务器350。

后台服务器350，用于基于子任务的任务指令确定执行结果，并返回至中间服务器340。

其中，前端服务器310、数据中心320和控制层330属于前端，中间服务器340和后台服务器350属于后端。

在本发明实施例中，数据中心320存储的事件组件的属性参数与前端310渲染显示的页面元素的参数是双向数据绑定的；其中，双向数据绑定指的是将参数的数据和页面元素绑定，改变数据自动触发页面元素重新渲染，而页面元素的事件调用也可以触发参数的数据修改，例如，参数用于表征标题文字，现将参数的数据“是”修改为“否”，则在页面元素上显示的文字由“是”重新渲染为“否”；反向的，若在页面元素上，将显示的文字由“是”修改为“否”，则对应的参数的数据中，“是”修改为“否”。

通过将数据中心320与页面元素进行双向数据绑定，使事件组件开发完成之后的代码是动态的，可以根据页面元素实现对事件组件的底层逻辑代码进行修改，提高事件组件的灵活性。

需要说明的是，上述图3所示的结构仅是一种示例，本发明实施例对此不做限定。

基于上述描述，图4示例性的示出了本发明实施例提供的一种页面渲染方法的流程示意图，该流程可由页面渲染装置执行。

如图4所示，该流程具体包括：

步骤410，前端基于页面元素的事件触发指令，获取所述事件触发指令对应的第一事件组件。

本发明实施例中，事件触发指令包括事件组件的唯一标识，如事件组件的id，用于对应第一事件组件。

步骤420，所述前端基于所述第一事件组件调用的上报函数，得到所述第一事件组件的事件任务信息。

本发明实施例中，上报函数以页面元素的任务对象中的事件任务信息为变量；事件任务信息用于指示事件组件对应的各子任务及执行顺序。

步骤430，所述前端在确定所述事件任务信息中任一子任务需调用中间服务器时，将所述子任务发送至中间服务器。

本发明实施例中，子任务包括调用类型，根据调用类型确定子任务是否需要调用中间服务器。

步骤440，所述前端基于所述中间服务器得到所述子任务的执行结果，根据所述执行结果修改第二事件组件。

本发明实施例中，前端将子任务发送至中间服务器之后，由中间服务器确定子任务的任务指令，并根据任务指令确定子任的执行结果。

步骤450，所述前端基于所述第二事件组件进行渲染显示。

在步骤410中，事件组件包括唯一标识，现有技术方案中页面组件的唯一标识是中间服务器生成的，本发明实施例中，事件组件的唯一标识是由前端生成的，如32位唯一标识uuid；以此可以在前端将各事件组件建立关联关系，也就是说，可以通过调用函数指向其他事件组件，实现在前段对任一事件组件的调用。

在步骤420中，事件组件是通过构建的上报函数建立的。具体的，获取页面元素的任务对象；其中，所述任务对象配置有事件任务名和事件任务信息的对应关系；基于所述任务对象，形成具有事件组件的上报函数的控制对象；所述上报函数以所述事件任务信息作为变量；将所述控制对象加入页面对象的组件参数；基于所述页面对象的组件参数和所述页面对象的组件样式，构建事件组件。

其中，任务对象为events的字段，图5为本发明实施例示例性的示出了一种任务对象的示意图，如图5所示，events是一个“key(键)-value(值)”形式的映射，用于表征事件任务名和事件任务信息的对应关系；其中，key为事件任务名，value为事件任务信息。

控制对象是基于任务对象，以事件任务信息作为变量生成上报函数，基于上报函数和事件任务名和事件任务信息的对应关系确定控制对象；事件组件是基于加入控制对象后的页面对象的组件参数(props属性参数)和页面对象的组件样式(style属性参数)形成的。

图6示例性的示出一种事件组件的示意图，如图6所示，通过建立controllers(控制对象)，将controllers和props合并，结合style生成事件组件。其中，上报函数封装了调用控制层的方法，用户在前端服务器触发事件触发指令之后，前端服务器调用上报函数，将事件任务信息上报至控制层。

在一种可实施的方式中，事件组件预先设置于前端中，如图6所示，通过页面元素的JSON对象(包括tag属性、style属性、props属性和events属性的参数)，映射到前端存储的事件组件。

在另一种可实施的方式中，前端获取到页面元素的事件触发指令之后，基于页面元素的任务对象，实时的确定事件组件。

为了更好的阐述上述技术方案，图7为本发明实例性示出的一种调用上报函数的流程示意图，如图7所示的流程包括：

步骤710，触发事件触发指令；

用户点击前端中的“按钮”，触发“按钮”时间触发指令；触发指令包括“按钮”事件组件id。

步骤720，调用上报函数。

前端基于“按钮”事件组件id确定对应的“按钮”事件组件，执行“按钮”事件组件的上报函数。

步骤730，将事件任务信息上传至控制层。

“按钮”事件组件中包括“按钮”事件任务信息(如确定抽奖次数、抽奖、确定抽奖结果等)，将“按钮”事件任务信息上传至控制层。

进一步的，事件任务信息是由多个子任务信息按照数组形式生成的；数组形式用于表征所述多个子任务的执行顺序；例如，actions(事件任务数组)包括action(子任务)1、action2、和action3。

针对任一子任务，子任务信息包括code(任务名)、type(调用类型)和initialParam(初始输入参数)；其中，调用类型包括dispatch(请求类型)和call(触发类型)；触发类型包括待调用事件组件的唯一标识。

在步骤430中，前端的控制层会按照数组的顺序依次执行子任务，针对任一子任务，先确定子任务的调用类型，然后确定是否需要将子任务信息和param(前一子任务的执行结果)发送至中间服务器。

示例性的，前端若确定第i子任务的调用类型为请求类型，则将第i子任务的信息以及第i-1子任务的执行结果发送至中间服务器；第i-1子任务为第i子任务的前一个子任务。

进一步地，请求类型包括script请求或exec请求；所述前端在确定所述子任务为script请求，则从所述中间服务器得到所述子任务的任务指令，并基于所述任务指令确定所述子任务的执行结果；所述前端在确定所述子任务为exec请求，则从所述中间服务器得到所述子任务的执行结果。

其中，<script>标签用于定义客户端脚本，比如JavaScript。script元素既可包含脚本语句，也可以通过"src"属性指向外部脚本文件，在此不做具体限定。

在本发明实施例中，若子任务为script请求，则将子任务的任务信息发送至中间服务器，中间服务器会根据任务信息中的任务名，确定出子任务的任务指令，并将子任务的任务指令装换成字符串形式，并将该字符串返回至控制层。

前端的控制层在接收到字符串后，需要将字符串对应的装换成任务指令，以此得到子任务的任务指令；具体的，前端接收所述子任务的任务指令对应的字符串；使用预设函数，将所述字符串转换为任务指令并存储；根据所述任务指令、第i-1子任务的执行结果和第i子任务的初始输入参数确定第i子任务的执行结果。其中，预设函数可以为eval函数等，在此不做具体限定。

在本发明实施例中，为了减少前端与中间服务器之间的交互，在第i子任务发送至中间服务器之前，前端会根据第i子任务的任务名确定自身是否存储有第i子任务的任务指令。若存储有第i子任务的任务指令，则直接执行第i子任务的任务指令，若没有，则将第i子任务的任务信息发送至中间服务器，请求第i子任务的任务指令。

图8为本发明实施例示例性示出的一种确定执行结果的示意图，如图8所示，步骤包括：

S810、针对script请求的子任务的消费，控制层根据子任务的任务名确定自身是否存有子任务对应的任务指令，若控制层自身存有子任务对应的任务指令，则直接执行子任务的任务指令，确定子任务的执行结果；

S820、若控制层自身未存有子任务对应的任务指令，则将子任务信息发送至中间服务器；由中间服务器通过校验后台服务器和自身登录状态，确定自身是否与后台服务器同步登录，以保证子任务的实时性；若否，则抛出异常。

S830、中间服务器确定自身与后台服务器同步登录，则进一步判断自身是否存在子任务的任务名对应的任务指令，如存在，则通过eval函数将子任务的任务指令转换为字符串，并将字符串发送至前端的控制层，否则抛出异常。

S840、前端的控制层在得到字符串后，通过eval函数将字符串转换为任务指令，并根据该任务指令、该子任务的前一子任务的执行结果和该子任务的初始输入参数确定第i子任务的执行结果(如修改数据中心组件JSON结果、目标页面的跳转、页面弹窗提示、回到页面顶部等)。

子任务为exec请求时，由中间服务器确定子任务的执行结果，具体的，中间服务器在确定子任务的任务指令之后，执行任务指令，从后台确定子任务的执行结果，并将执行结果返回至前端，且该子任务的执行结果作为后一子任务的param。

图9为本发明实施例示例性示出的一种确定执行结果的示意图，如图9所示，步骤包括：

S910、针对exec请求的子任务的消费，控制层将子任务信息发送至中间服务器；由中间服务器通过校验后台服务器和自身登录状态，确定自身是否与后台服务器同步登录，以保证子任务的实时性；若否，则抛出异常。

S920、中间服务器确定自身与后台服务器同步登录，则进一步判断自身是否存在子任务的任务名对应的任务指令，如存在，则在后台服务器中执行子任务的任务指令得到执行结果，并将执行结果发送至前端的控制层；否则抛出异常。

总结来说，本发明实施例中，针对script请求的子任务，中间服务器不执行子任务的任务指令，将任务指令转译成字符串返回至前端，再由前端确定执行结果；例如，前端得到字符串对应的任务指令之后，运用Vuex的能力，修改数据中心的组件JSON数据，触发Vue的双向数据绑定重新渲染页面元素，即更新前端显示的页面元素。

针对exec请求的子任务，由中间服务器执行任务指令，确定执行结果；例如，中间服务器请求后台服务器，执行需要与中间服务器交互的任务指令，如获取、新增删除数据的操作。

示例性的，前端确定第i子任务的调用类型为触发类型，则根据所述第i子任务指示的待调用事件组件的唯一标识，确定调用函数；基于所述调用函数，调用所述待调用事件组件。

具体的，控制层预设有事件派发器；事件派发器包括多个调用函数与各调用函数与待调用事件组件之间的映射关系；事件派发器用于根据触发指令确定调用函数；根据调用函数与待调用事件组件之间的映射关系调用待调用事件组件；其中，事件派发器是一个发布订阅模型，内部可以创建多个仓库，可以把任意调用函数的指针插入对应的仓库，然后通过内部的方法在仓库中命中调用函数并执行。

进一步地，事件派发器将vue组件methods(传递函数)中的所有公有方法(前缀带“_”的为私有方法，其余为公有方法)添加装饰器。通过“待调用事件组件id_公有方法名”的拼接形式入对应的仓库。

举例来说，前端在确定第i子任务的调用类型为触发类型时，确定调用指令“target(待调用事件组件id)_code(任务名)”，进而通过装饰器可以确定“公有方法名”，再根据“公有方法名”可以确定第i子任务对应的调用待调用事件组件的调用函数。

前端在得到调用函数之后，根据调用函数、第i-1子任务的执行结果和第i子任务的初始输入参数触发待调用事件组件的事件任务。

图10为本发明实施例示例性示出的一种调用待调用事件组件的示意图，如图10所示，针对任一触发类型的子任务，控制层确定是否通过待调用事件组件id确定出第i子任务的调用函数，若是，则根据调用函数控制待调用事件组件的事件任务。否则抛出异常。

把发明实施例中，通过业务逻辑的执行代码由控制层和中间服务器承载，减少了事件组件内的代码，进而提升了事件组件的复用性，降低了事件组件的维护与管理难度。

且现有技术方案是将业务逻辑写死在页面组件中，所以不具有编排的能力，本发明实施例想实现某种业务流程，只需使用表单配置化的对actions(任务数组)进行编辑，进而提高了业务逻辑的可编排性。

还通过将业务逻辑拆分成各子任务，通过code(任务名)命中请求子任务，通过判断子任务的调用类型和任务名，可以确定新的业务逻辑，从而在不同的活动类型中实现不同的业务需求，增加了业务逻辑的灵活性。

为了更好的解释上述技术方案，图11示例性的示出了一种页面渲染方法的流程示意图，如图10所示，具体流程包括：

步骤1110，中间服务器接收前端基于页面元素的事件触发指令，发送的事件组件的子任务。

本发明实施例中，所述子任务为事件任务信息中需调用中间服务器的子任务；事件任务信息是基于所述事件组件调用的上报函数得到的；所述上报函数以所述页面元素的任务对象中的事件任务信息为变量；所述事件任务信息用于指示事件组件对应的各子任务及执行顺序。

步骤1120，所述中间服务器向所述前端反馈所述子任务的任务指令或所述子任务的执行结果。

本发明实施例中，所述中间服务器存储有各子任务的任务指令；中间服务器通过子任务的任务名来确定子任务的任务指令。

进一步地，中间服务器确定子任务为script请求，则将子任务的任务指令转换为字符串，将所述字符串发送至前端；

中间服务器确定子任务为exec请求，则根据子任务的任务指令调用后台服务器，得到子任务的执行结果，并将子任务的执行结果返回至前端。

图12为本发明实施例示例性示出的一种页面渲染方法，如图12所示，包括以下步骤：

S1210、用户在前端服务器(如客户端)点击“按钮”，触发“按钮”事件触发指令；根据“按钮”事件触发指令中包括的事件组件唯一标识，确定“按钮”事件组件；

S1220、前端通过控制层执行“按钮”事件组件的上报函数，将“按钮”事件组件的事件任务信息发送至控制层。

S1230、控制层解析事件任务，按照数组顺序消费事件任务中的各子任务。

S1240、控制层若确定第i子任务的调用类型为请求类型，则将第i子任务的信息以及第i-1子任务的执行结果发送至中间服务器。

S1250、控制层若确定第i子任务的调用类型为触发类型，则根据第i子任务指示的待调用事件组件的唯一标识，确定调用指令，再根据调用指令在预设的事件派发器中确定调用待调用事件组件的调用函数；基于调用函数，控制待调用事件组件的事件任务。

S1260、针对script请求的子任务的消费，根据子任务的任务名确定子任务的任务指令，并将任务指令发送至控制层，由控制层执行任务指令，并对数据中心中的JSON数据进行修改，得到修改后的“按钮”事件组件，然后数据中心将修改后的“按钮”事件组件发送至前端服务器，因为双向数据绑定，前端服务器重新渲染修改后的“按钮”事件组件。

S1270、针对exec请求的子任务的消费，中间服务器在后台服务器中执行任务指令，从后台服务器确定子任务的执行结果，并将执行结果返回至控制层，且该子任务的执行结果作为后一子任务的param，并执行下一子任务，直至所有事件任务对应的数组中所有的子任务处理完成。

基于相同的技术构思，图13示例性的示出了本发明实施例提供的一种页面渲染装置的结构示意图，该装置可以执行页面渲染方法的流程。

如图13所示，该装置具体包括：

获取模块1310，用于基于页面元素的事件触发指令，获取所述事件触发指令对应的第一事件组件；

处理模块1320，用于基于所述第一事件组件调用的上报函数，得到所述第一事件组件的事件任务信息；其中，所述上报函数以所述页面元素的任务对象中的事件任务信息为变量；所述事件任务信息用于指示事件组件对应的各子任务及执行顺序；

在确定所述事件任务信息中任一子任务需调用中间服务器时，将所述子任务发送至中间服务器；

基于所述中间服务器得到所述子任务的执行结果，根据所述执行结果修改第二事件组件；

基于所述第二事件组件进行渲染显示。

可选的，事件组件通过如下方式获得，包括：

所述处理模块1320控制获取模块1310获取页面元素的任务对象；其中，所述任务对象配置有事件任务名和事件任务信息的对应关系；

所述处理模块1320基于所述任务对象，形成具有事件组件的上报函数的控制对象；所述上报函数以所述事件任务信息作为变量；

将所述控制对象加入页面对象的组件参数；

基于所述页面对象的组件参数和所述页面对象的组件样式，构建事件组件。

可选的，所述处理模块1320具体用于：

若确定第i子任务的调用类型为请求类型，则将第i子任务的信息以及第i-1子任务的执行结果发送至所述中间服务器；所述第i-1子任务为所述第i子任务的前一个子任务。

可选的，所述处理模块1320具体用于：

在确定所述子任务为script请求，则从所述中间服务器得到所述子任务的任务指令，并基于所述任务指令确定所述子任务的执行结果；

在确定所述子任务为exec请求，则从所述中间服务器得到所述子任务的执行结果。

可选的，所述处理模块1320具体用于：

接收所述子任务的任务指令对应的字符串；

使用预设函数，将所述字符串转换为任务指令并存储；

根据所述任务指令、第i-1子任务的执行结果和第i子任务的初始输入参数确定第i子任务的执行结果。

可选的，所述处理模块1320还用于：

将所述子任务发送至中间服务器之前，确定未存储所述子任务的任务指令。

可选的，所述处理模块1320还用于：

确定第i子任务的调用类型为触发类型，则根据所述第i子任务指示的待调用事件组件的唯一标识，确定调用函数；

基于所述调用函数，调用所述待调用事件组件。

图14示例性的示出了本发明实施例提供的一种页面渲染装置的结构示意图，该装置可以执行页面渲染方法的流程。

如图14所示，该装置具体包括：

接收单元1410，用于接收前端基于页面元素的事件触发指令，发送的事件组件的子任务；所述子任务为事件任务信息中需调用中间服务器的子任务；所述事件任务信息是基于所述事件组件调用的上报函数得到的；所述上报函数以所述页面元素的任务对象中的事件任务信息为变量；所述事件任务信息用于指示事件组件对应的各子任务及执行顺序；

处理单元1420，向所述前端反馈所述子任务的任务指令或所述子任务的执行结果。

所述处理单元1420具体用于：

确定所述子任务为script请求，则将所述子任务的任务指令转换为字符串，将所述字符串发送至所述前端；

确定所述子任务为exec请求，则根据所述子任务的任务指令调用后台服务器，得到所述子任务的执行结果，并将所述子任务的执行结果返回至所述前端；所述后台服务器存储于各exec请求的任务指令的执行结果。

基于相同的技术构思，本发明实施例还提供一种计算机设备，包括：

存储器，用于存储程序指令；

处理器，用于调用所述存储器中存储的程序指令，按照获得的程序执行上述页面渲染方法。

基于相同的技术构思，本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可执行指令，所述计算机可执行指令用于使计算机执行上述页面渲染方法。

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

本申请是参照根据本申请的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

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

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

显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims (10)

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

前端基于页面元素的事件触发指令，获取所述事件触发指令对应的第一事件组件；

所述前端基于所述第一事件组件调用的上报函数，得到所述第一事件组件的事件任务信息；其中，所述上报函数以所述页面元素的任务对象中的事件任务信息为变量；所述事件任务信息用于指示事件组件对应的各子任务及执行顺序；

所述前端在确定所述事件任务信息中任一子任务需调用中间服务器时，将所述子任务发送至中间服务器；

所述前端基于所述中间服务器得到所述子任务的执行结果，根据所述执行结果修改第二事件组件；

所述前端基于所述第二事件组件进行渲染显示。

2.如权利要求1所述的方法，其特征在于，事件组件通过如下方式获得，包括：

获取页面元素的任务对象；其中，所述任务对象配置有事件任务名和事件任务信息的对应关系；

基于所述任务对象，形成具有事件组件的上报函数的控制对象；所述上报函数以所述事件任务信息作为变量；

将所述控制对象加入页面对象的组件参数；

基于所述页面对象的组件参数和所述页面对象的组件样式，构建事件组件。

3.如权利要求1所述的方法，其特征在于，述前端在确定所述事件任务信息中任一子任务需调用中间服务器时，将所述子任务发送至中间服务器，包括：

所述前端若确定第i子任务的调用类型为请求类型，则将第i子任务的信息以及第i-1子任务的执行结果发送至所述中间服务器；所述第i-1子任务为所述第i子任务的前一个子任务。

4.如权利要求1所述的方法，其特征在于，所述前端基于所述中间服务器得到所述子任务的执行结果，包括：

所述前端在确定所述子任务为script请求，则从所述中间服务器得到所述子任务的任务指令，并基于所述任务指令确定所述子任务的执行结果；

所述前端在确定所述子任务为exec请求，则从所述中间服务器得到所述子任务的执行结果。

5.如权利要求4所述的方法，其特征在于，所述从所述中间服务器得到所述子任务的任务指令，并基于所述任务指令确定所述子任务的执行结果，包括：

所述前端接收所述子任务的任务指令对应的字符串；

所述前端使用预设函数，将所述字符串转换为任务指令并存储；

所述前端根据所述任务指令、第i-1子任务的执行结果和第i子任务的初始输入参数确定第i子任务的执行结果。

6.如权利要求1所述的方法，其特征在于，将所述子任务发送至中间服务器之前，还包括：

所述前端确定未存储所述子任务的任务指令。

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

所述前端确定第i子任务的调用类型为触发类型，则根据所述第i子任务指示的待调用事件组件的唯一标识，确定调用函数；

所述前端基于所述调用函数，调用所述待调用事件组件。

8.一种页面渲染方法，其特征在于，包括：

中间服务器接收前端基于页面元素的事件触发指令，发送的事件组件的子任务；所述子任务为事件任务信息中需调用中间服务器的子任务；所述事件任务信息是基于所述事件组件调用的上报函数得到的；所述上报函数以所述页面元素的任务对象中的事件任务信息为变量；所述事件任务信息用于指示事件组件对应的各子任务及执行顺序；

所述中间服务器向所述前端反馈所述子任务的任务指令或所述子任务的执行结果。

9.如权利要求8所述的方法，其特征在于，所述中间服务器存储有各子任务的任务指令；

所述中间服务器向所述前端反馈所述子任务的任务指令或所述子任务的执行结果，包括：

所述中间服务器确定所述子任务为script请求，则将所述子任务的任务指令转换为字符串，将所述字符串发送至所述前端；

所述中间服务器确定所述子任务为exec请求，则根据所述子任务的任务指令调用后台服务器，得到所述子任务的执行结果，并将所述子任务的执行结果返回至所述前端；所述后台服务器存储于各exec请求的任务指令的执行结果。

10.一种页面渲染装置，其特征在于，包括：

获取模块，用于基于页面元素的事件触发指令，获取所述事件触发指令对应的第一事件组件；

处理模块，用于基于所述第一事件组件调用的上报函数，得到所述第一事件组件的事件任务信息；其中，所述上报函数以所述页面元素的任务对象中的事件任务信息为变量；所述事件任务信息用于指示事件组件对应的各子任务及执行顺序；

在确定所述事件任务信息中任一子任务需调用中间服务器时，将所述子任务发送至中间服务器；

基于所述中间服务器得到所述子任务的执行结果，根据所述执行结果修改第二事件组件；

基于所述第二事件组件进行渲染显示。

Images