发明内容
本说明书实施例提供及一种页面展示方法、装置、服务器、前端及存储介质。
第一方面,本说明书实施例提供一种页面展示方法,应用于服务器,包括:
接收前端发送的针对目标业务的页面展示请求,所述目标业务的页面包括N个业务组件的展示内容,N为正整数;
根据所述展示请求,在组件配置信息库中确定出与所述N个业务组件中每个业务组件对应的组件配置信息,共计获得N个组件配置信息;
将所述N个组件配置信息发送至所述前端,以使所述前端根据所述N个组件配置信息在所述目标业务的页面上渲染出所述N个业务组件的展示内容。
第二方面,本说明书实施例提供一种页面展示方法,应用于前端,包括:
发送针对目标业务的页面展示请求至服务器,所述目标业务的页面包括N个业务组件的展示内容,N为正整数;
接收所述服务器反馈的与所述N个业务组件的展示内容对应的N个组件配置信息;
基于所述N个组件配置信息,在所述目标业务的页面上渲染出所述N个业务组件的展示内容。
第三方面,本说明书实施例提供一种页面展示装置,应用于服务器,所述装置包括:
接收模块,用于接收前端发送的针对目标业务的页面展示请求,所述目标业务的页面包括N个业务组件的展示内容,N为正整数;
处理模块,用于根据所述展示请求,在组件配置信息库中确定出与所述N个业务组件中每个业务组件对应的组件配置信息,共计获得N个组件配置信息;
发送模块,用于将所述N个组件配置信息发送至所述前端,以使所述前端根据所述N个组件配置信息在所述目标业务的页面上渲染出所述N个业务组件的展示内容。
第四方面,本说明书实施例提供一种页面展示装置,应用于前端,所述装置包括:
发送模块,用于发送针对目标业务的页面展示请求至服务器,所述目标业务的页面包括N个业务组件的展示内容,N为正整数;
接收模块,用于接收所述服务器反馈的与所述N个业务组件的展示内容对应的N个组件配置信息;
渲染模块,用于基于所述N个组件配置信息,在所述目标业务的页面上渲染出所述N个业务组件的展示内容。
第三方面,本说明书实施例提供一种服务器,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,所述处理器执行上述任一项所述方法的步骤。
第四方面,本说明书实施例提供一种计算机可读存储介质,其上存储有计算机程序,该程序被处理器执行时实现上述任一项所述方法的步骤。
本说明书实施例有益效果如下:
在本说明书实施例中,目标业务的页面包括N个业务组件的展示内容,通过接收前端发送的针对目标业务的页面展示请求,在组件配置信息库中确定出与N个业务组件中每个业务组件对应的组件配置信息,并将N个组件配置信息发送至前端,以使前端在页面上渲染出N个业务组件的展示内容。上述方案中,通过将业务的展示内容组件化,并将业务组件的组件配置信息保存在服务器端,在前端进行页面展示时,只需要在服务器上调用对应的组件配置信息就能够实现前端的页面渲染,无需对前端编写大量的代码,大大减少了前端代码的数量,便于前端的数据维护,减少了编程人员的工作量。
具体实施方式
为了更好的理解上述技术方案,下面通过附图以及具体实施例对本说明书实施例的技术方案做详细的说明,应当理解本说明书实施例以及实施例中的具体特征是对本说明书实施例技术方案的详细的说明,而不是对本说明书技术方案的限定,在不冲突的情况下,本说明书实施例以及实施例中的技术特征可以相互组合。
第一方面,本说明书实施例提供一种页面展示方法,如图1所示,为本说明书实施例提供的页面展示方法的应用场景图,请参考图1,前端与服务器通信连接,前端为可以展示浏览器、应用程序界面的设备端,如移动端、PC端等,服务器可以用于处理前端发送的请求逻辑。
如图2所示,为本说明书实施例提供的一种页面展示方法的流程图,该方法应用于服务端,包括以下步骤:
步骤S11:接收前端发送的针对目标业务的页面展示请求,所述目标业务的页面包括N个业务组件的展示内容,N为正整数;
本说明书实施例中,目标业务可以根据实际需要进行设定,在一个实施例中,目标业务可以是一支付平台上包括的所有业务中的任意一种业务。以支付宝平台为例,目标业务可以是支付宝平台上的花呗业务,也可以是支付宝平台上的借呗业务,或者是其他业务。
目标业务可以包含多个页面,如目标业务的首页页面、目标业务的设置页面等,本说明书实施例中的目标业务的页面可以是上述多个页面中的任意一个页面。业务组件为可以为与目标业务相关的组件,业务组件可以由业务元素和基本的展示组件构成,例如业务元素为签约业务的签约机构、机构联系人等元素,基本的展示组件为输入框展示组件、按钮展示组件等。不同的页面包含的业务组件可能不同。以借呗业务为例,当页面为借呗业务的机构签约页面时,机构签约页面上的业务组件可以包括机构信息组件、费用账户组件等。每个业务组件可以包括多个组件元素,例如,机构信息组件包含的组件元素有机构名称、机构地址等。
步骤S12:根据所述页面展示请求,在组件配置信息库中确定出与所述N个业务组件中每个业务组件对应的组件配置信息,共计获得N个组件配置信息;
本说明书实施例中,页面展示请求中可以包含请求展示的业务组件标识,组件配置信息库包含有组件配置信息、以及业务组件标识与组件配置信息的对应关系。根据页面展示请求中的业务组件标识,可以在组件配置信息库中查找到业务组件标识对应的组件配置信息。
组件配置信息库可以包含多个业务的业务组件的组件配置信息,应理解的是,如果多个业务均包含有相同的业务组件,该相同的业务组件的组件配置信息仅在组件配置信息库中保存一次。在不同的业务均需要在页面上展示该业务组件时,均可以调用该相同的业务组件的组件配置信息,即组件配置信息可以被多个业务的页面展示重复使用。例如,花呗业务包含有机构信息组件以及还款账户组件,如果借呗业务中也包含有这两个组件,则接收到借呗业务的页面展示请求后,直接在组件配置信息库中调用机构信息组件以及还款账户组件,实现了业务组件的复用。
组件配置信息可以包括组件元素的内容,组件元素的默认值、展示模式等配置信息。组件配置信息的格式可以根据实际情况进行设置,在一个实施例中,组件配置信息为JSON格式的配置信息。
步骤S13:将所述N个组件配置信息发送至所述前端,以使所述前端根据所述N个组件配置信息在所述目标业务的页面上渲染出所述N个业务组件的展示内容。
在组件配置信息库中确定出与N个业务组件对应的N个组件配置信息后,将N个组件配置信息发送给前端,前端会根据N个组件配置信息对N个组件进行渲染,以进行页面展示。
可选地,本说明书实施例中,还包括组件配置信息库的构建方式:根据预设业务集合,构建所述组件配置信息库。在构建组件配置信息库时,包括但不限于以下两种构建方式。
第一种方式:针对所述预设业务集合中的每个业务,确定所述每个业务的业务维度;获取所述业务维度下的业务要素,以及所述业务要素的展示模式;根据所述业务维度下的业务要素,以及所述业务要素的展示模式,创建与所述业务维度对应的业务组件的组件配置信息;根据所述组件配置信息,构建所述预设业务集合。
应理解的是,为了构建组件配置信息库,可以先确定一个预设业务集合,该预设业务集合中可以包含了某机构目前拓展的所有业务。对于预设业务集合中的每个业务来说,可以包括多个业务维度,每个业务维度可以是页面上显示信息的分级信息,如图3所示,为一业务页面的展示内容示意图。在图3中,机构信息、关联账户可以看作是该业务的两个业务维度,其中,机构信息下的机构全称、机构简称、机构ID可以看作是机构信息维度下的业务要素,关联账户下的账户编号、账户名称、银行机构名称可以看作是关联账户维度下的的业务要素。
本申请实施例中,可以将每个业务维度抽象为业务组件,例如,机构信息维度可以抽象为机构信息组件,将机构全称、机构简称、机构ID这些业务要素看作是组件的组件元素。对于一个业务组件来说,可以包括该业务组件下各个业务元素的元素名称、元素的默认数据和关联数据、元素的页面展示模式等信息。
沿用上述例子,上述例子中的机构全称、机构简称等可以看作是元素名称。元素名称后的输入框、下拉框、选择框等可以看作是元素的页面展示模式。输入框、下拉框中的初始显示值可以看作是元素的默认数据,点击下拉框后展示的数据可以看作是元素的关联数据,例如,元素名称为地址时,可能地址后面有省市县三级下拉框,其中,下拉框的初始显示值为北京市,北京市则为默认数据,点击省对应的下拉框,会出现各个省的名称列表,各个省的名称列表为省的关联数据。
本申请实施例中,根据每个业务组件的组件元素,以及组件元素的页面展示模式,创建每个业务组件的组件配置信息,当然,组件配置信息还可以包括其他的信息,这里不做限定。组件配置信息可以根据实际需要进行格式设定,在一个实施例中,组件配置信息为JSON格式。以某页面上的参与者组件为例,参与者组件的组件元素包括参与者机构、参与者简称、参与者类型,参与者机构以及参与者简称以输入框进行展示、参数者类型以选择框进行展示,选择框提供“丙方”和“其它”两个选项。那么该参与者组件的JSON组件配置信息如下:
对于预设业务集合中的每个业务来说,每个业务下可能都包含有一个或多个业务组件,每个业务组件对应有一个JSON组件配置信息,这些JSON组件配置信息的集合即构成了组件配置信息库。
第二种方式:根据所述预设业务集合中每个业务的业务维度,确定业务维度的重复使用概率满足预设条件的目标业务维度;获取所述目标业务维度下的业务要素,以及所述业务要素的展示模式;根据所述目标业务维度下的业务要素,以及所述业务要素的展示模式,创建与所述目标业务维度对应的业务组件的组件配置信息。
应理解的是,预设业务集合可以包含了某机构目前拓展的所有业务,对于类型相似的业务来说,业务页面上的内容可能会出现的大量重复。例如,以花呗和借呗为例,花呗和借呗的机构签约页面上都下需要参与者、还款账户、费用账户、机构信息、解决方案这几个维度。也就是说,同样的业务维度会在多个业务的业务页面上出现,本说明书实施例中,可以根据业务维度的重复使用概率,将重复使用概率较高的业务维度抽象为业务组件,以供多个业务进行业务组件的复用。
本说明实施例中,一业务维度的重复使用概率可以是该业务维度的使用次数与预设业务集合中包含的业务总数的比值。例如,预设业务集合包含有M个业务,某一相同的业务维度在S个业务中被使用,那么该业务维度的重复使用率为S/M。当业务维度的重复使用率满足一预设条件时,对应的创建该业务维度的组件配置信息,预设条件可以根据实际需要进行设定,如预设条件为大于或等于一阈值。创建组件配置信息的过程与第一方式中的创建组件信息过程类似,这里就不再赘述了。
可选地,所述方法还包括:在需要对展示在所述目标业务的页面上的目标业务组件的展示内容进行修改时,接收修改所述目标业务组件对应的目标组件配置信息的修改指令;根据所述修改指令中的修改参数,对所述目标组件配置信息进行修改,获得修改后的目标组件配置信息,以使所述前端根据所述修改后的目标组件配置信息异步更新所述目标业务组件的展示内容。
本说明书实施例中,当需要对目标业务的页面进行调整或修改时,例如,当前目标业务的页面上展示有联系人组件,组件元素包括姓名、地址,现在需要在联系人组件上添加“邮箱”这个组件元素。那么,可以直接在保存在服务器上的组件配置信息库中读取与联系人组件对应的组件配置信息,对组件配置信息进行修改。
修改参数可以包括修改的业务组件标识,根据业务组件标识在组件配置信息库中确定出需要修改的组件配置信息。修改参数还可以包括要进行修改的组件元素、修改的组件元素的展示模式等信息,应理解的是,这里的修改可以为添加、删除、变更等形式,根据修改参数,可以对组件配置信息进行调整,如添加组件元素、删除组件元素、变更组件元素以及变更组件元素的展示模式等。也就是说,本说明书实施例中的方案,当需要对前端的页面展示进行调整时,对服务器上保存的组件配置信息进行相应调整,而无需改变前端的调用代码,大大减少了前端代码的修改。另外,当多个业务页面上的同一业务组件发生变化时,可以通过一次修改与该业务对应的组件配置信息,即可以实现多个业务页面的展示变更。
另外,在组件配置文件修改完毕后,服务器会基于前端的页面展示请求将修改后的组件配置文件发送给前端,在前端对修改后的组件配置文件接收完毕后,会异步根据修改后的组件配置文件对页面的展示进行更新。由于每个业务组件都是由服务器端的组件配置信息来控制的,因此业务组件的修改都可以在服务器上实现,不需要执行发布流程,能够实现实时的页面调整。
本说明书实施例中,在对目标业务的页面上的某一个业务组件进行修改调整时,可以在服务器段对该业务组件的组件配置文件进行修改,当前端根据修改后的组件配置文件进行页面更新时,可以只进行页面的局部更新,即仅对修改的业务组件进行更新,能够使页面调整更加灵活。
应理解的是,不同的前端,页面展示的环境有可能不同,例如,手机端的页面展示和PC端的页面展示,展示区域的尺寸以及布局存在很大的差别。为了减少在这些非业务相关的展示中编辑大量的展示代码,本说明书实施例中,前端在发送页面展示请求时,也会将前端的页面展示参数发送给服务器,页面展示参数可以包括前端的页面展示区域的尺寸、各个业务组件的布局等参数。服务器会根据前端的页面展示参数,确定业务组件的展示参数,以使业务组件的展示能够与前端的页面展示适配,业务组件的展示参数可以包括业务组件的展示位置、各类输入框、选择框的尺寸等参数。在一个实施例中,服务器上可以保存有页面展示参数与业务组件的展示参数的适配关系表,通过查表来确定业务组件的展示参数,或者,可以通过页面展示参数与预设的业务组件的展示参数的计算函数来确定业务组件的展示参数,这里不做限定。
第二方面,本说明书实施例提供一种页面展示方法,应用于前端,如图4所示,该方法包括以下步骤:
步骤S41:发送针对目标业务的页面展示请求至服务器,所述目标业务的页面包括N个业务组件的展示内容,N为正整数;
步骤S42:接收所述服务器反馈的与所述N个业务组件的展示内容对应的N个组件配置信息;
步骤S43:基于所述N个组件配置信息,在所述目标业务的页面上渲染出所述N个业务组件的展示内容。
本说明书实施例中,前端可以包括视图展示层,用于展示业务页面,在页面初始化或者针对页面进行提交、选择等操作时,会生成针对当前业务的页面展示请求,并将页面展示请求发送给服务器,用于请求获取页面上包含的N个业务组件的组件配置信息。在一个实施例中,页面展示请求是前端通过异步的方式对服务器进行请求。
服务器在接收到前端发送的页面展示请求之后,在存储在服务器上的组件配置信息库中确定出与N个业务组件中每个业务组件对应的组件配置信息,并将这N个组件配置信息发送给前端。本说明书实施例中,前端包含有数据层,用于存储服务器反馈的组件配置信息,数据层与视图展示层通过预设方式进行绑定,当组件配置信息写入数据层之后,视图展示层会异步根据写入数据层的组件配置信息进行页面的渲染。本说明书实施例中,通过将组件配置信息保存在服务器上,实现了业务数据和展示的完全分离,因此,可以避免在前端展示代码中夹杂大量的业务数据,极大的精简了前端代码。
为了更好的理解本说明书实施例中的页面展示方法,下面以业务组件为联系人信息为例,来对本说明书实施例中的页面展示方法进行说明。在该实施例中,目标业务的页面上需要展示联系人信息组件,如图5所示,联系人信息组件包括的组件元素有:姓名、手机号、邮箱、身份证号码、操作,对应的元素展示模式为:姓名、手机号、邮箱、身份证号码均对应输入框、操作对应选择框。服务器端的组件配置信息库中保存有该联系人信息组件的组件配置信息,该组件配置信息的标识可以为Linkman。那么,前端页面的展示代码只需要调用该组件配置信息就可实现联系人组件的渲染,即在前端页面的展示代码中引入<Linkman/>这一句代码就能够在页面中渲染出图5中的效果,而无需采用现有技术中html大量的对业务数据的代码编写,实现了前端代码的精简。
第三方面,基于同一发明构思,本说明书实施例提供一种页面展示装置,应用于服务器,请参考图6,包括:
接收模块61,用于接收前端发送的针对目标业务的页面展示请求,所述目标业务的页面包括N个业务组件的展示内容,N为正整数;
处理模块62,用于根据所述展示请求,在组件配置信息库中确定出与所述N个业务组件中每个业务组件对应的组件配置信息,共计获得N个组件配置信息;
发送模块63,用于将所述N个组件配置信息发送至所述前端,以使所述前端根据所述N个组件配置信息在所述目标业务的页面上渲染出所述N个业务组件的展示内容。
在一种可选实现方式中,所述装置还包括:
组件配置信息库构建模块,用于根据预设业务集合,构建所述组件配置信息库。
在一种可选实现方式中,所述组件配置信息库构建模块,用于:
针对所述预设业务集合中的每个业务,确定所述每个业务的业务维度;
获取所述业务维度下的业务要素,以及所述业务要素的展示模式;
根据所述业务维度下的业务要素,以及所述业务要素的展示模式,创建与所述业务维度对应的业务组件的组件配置信息;
根据所述组件配置信息,构建所述预设业务集合。
在一种可选实现方式中,所述组件配置信息库构建模块,用于:
根据所述预设业务集合中每个业务的业务维度,确定业务维度的重复使用概率满足预设条件的目标业务维度;
获取所述目标业务维度下的业务要素,以及所述业务要素的展示模式;
根据所述目标业务维度下的业务要素,以及所述业务要素的展示模式,创建与所述目标业务维度对应的业务组件的组件配置信息。
在一种可选实现方式中,所述装置还包括:
修改指令接收模块,用于在需要对展示在所述目标业务的页面上的目标业务组件的展示内容进行修改时,接收修改所述目标业务组件对应的目标组件配置信息的修改指令;
修改模块,用于根据所述修改指令中的修改参数,对所述目标组件配置信息进行修改,获得修改后的目标组件配置信息,以使所述前端根据所述修改后的目标组件配置信息异步更新所述目标业务组件的展示内容。
关于上述装置,其中各个模块的具体功能已经在本发明实施例第一方面提供的页面展示方法的实施例中进行了详细描述,此处将不做详细阐述说明。
第四方面,基于同一发明构思,本说明书实施例提供一种页面展示装置,应用于前端,请参考图7,包括:
发送模块71,用于发送针对目标业务的页面展示请求至服务器,所述目标业务的页面包括N个业务组件的展示内容,N为正整数;
接收模块72,用于接收所述服务器反馈的与所述N个业务组件的展示内容对应的N个组件配置信息;
渲染模块73,用于基于所述N个组件配置信息,在所述目标业务的页面上渲染出所述N个业务组件的展示内容。
关于上述装置,其中各个模块的具体功能已经在本发明实施例第二方面提供的页面展示方法的实施例中进行了详细描述,此处将不做详细阐述说明。
第五方面,基于与前述第一方面中页面展示方法同样的发明构思,本发明还提供一种服务器装置,如图8所示,包括存储器404、处理器402及存储在存储器404上并可在处理器402上运行的计算机程序,所述处理器402执行所述程序时实现前文所述页面展示方法的任一方法的步骤。
其中,在图8中,总线架构(用总线400来代表),总线400可以包括任意数量的互联的总线和桥,总线400将包括由处理器402代表的一个或多个处理器和存储器404代表的存储器的各种电路链接在一起。总线400还可以将诸如外围设备、稳压器和功率管理电路等之类的各种其他电路链接在一起,这些都是本领域所公知的,因此,本文不再对其进行进一步描述。总线接口406在总线400和接收器401和发送器403之间提供接口。接收器401和发送器403可以是同一个元件,即收发机,提供用于在传输介质上与各种其他装置通信的单元。处理器402负责管理总线400和通常的处理,而存储器404可以被用于存储处理器402在执行操作时所使用的数据。
第六方面,基于与前述第二方面中页面展示方法同样的发明构思,本发明还提供一种前端,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,所述处理器执行所述程序时实现前文所述页面展示方法的任一方法的步骤。
第七方面,基于与前述实施例中基于页面展示方法的发明构思,本发明还提供一种计算机可读存储介质,其上存储有计算机程序,该程序被处理器执行时实现前文所述基于页面展示方法的任一方法的步骤。
本说明书是参照根据本说明书实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的设备。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令设备的制造品,该指令设备实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
尽管已描述了本发明的优选实施例,但本领域内的技术人员一旦得知了基本创造性概念,则可对这些实施例作出另外的变更和修改。所以,所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。
显然,本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样,倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内,则本发明也意图包含这些改动和变型在内。