CN111310083B - 页面展示方法及装置、系统 - Google Patents

页面展示方法及装置、系统 Download PDF

Info

Publication number
CN111310083B
CN111310083B CN201811513518.XA CN201811513518A CN111310083B CN 111310083 B CN111310083 B CN 111310083B CN 201811513518 A CN201811513518 A CN 201811513518A CN 111310083 B CN111310083 B CN 111310083B
Authority
CN
China
Prior art keywords
component
page
external
service request
order
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201811513518.XA
Other languages
English (en)
Other versions
CN111310083A (zh
Inventor
汪乐
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Alibaba Group Holding Ltd
Original Assignee
Alibaba Group Holding Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Alibaba Group Holding Ltd filed Critical Alibaba Group Holding Ltd
Priority to CN201811513518.XA priority Critical patent/CN111310083B/zh
Publication of CN111310083A publication Critical patent/CN111310083A/zh
Application granted granted Critical
Publication of CN111310083B publication Critical patent/CN111310083B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577Optimising the visualization of content, e.g. distillation of HTML documents

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)
  • Stored Programmes (AREA)

Abstract

本申请公开了一种页面展示方法及装置、系统。其中,该方法包括:获取对页面元素进行操作产生的业务请求;基于与所述业务请求对应的外部组件创建高阶组件;展示基于高阶组件确定的页面元素,其中,该页面元素用于提供页面的可视化信息。本申请解决了页面展示时,通过调用预先确定好的模块进行页面展示,灵活性较低的技术问题。

Description

页面展示方法及装置、系统
技术领域
本申请涉及网络技术领域,具体而言,涉及一种页面展示方法及装置、系统。
背景技术
目前,在网页接收到用户的请求之后,进行页面展示时,对于网页所依赖的组件通常在开发和打包阶段就已经确定。在页面展示时,只能对已经确定好的组件进行调用,并实现对应组件的功能。例如:在进行商品列表展示的页面中,可以用列表展示的方式展示实物商品(比如手机列表),此时,页面展示实物商品的UI组件,例如手机的屏幕,手机外观,内存等参数。但是,如果需要展示虚拟商品时,则需要开发相应的功能:例如“翻译服务”希望定制自己的个性化风格(比如价格以×元/千字),这些风格的组件一般不包含在页面中,这些组件需要单独开发。其次,随着商品不断增加后,在用于展示商品的页面中,组件会越来越冗余,在该页面被其他业务调用时,除了展示实物商品之外,还需要展示虚拟商品,将虚拟商品的组件也加载进来,灵活性较差。
针对上述的问题,目前尚未提出有效的解决方案。
发明内容
本申请实施例提供了一种页面展示方法及装置、系统,以至少解决页面展示时,通过调用预先确定好的模块进行页面展示,灵活性较低的技术问题。
根据本申请实施例的一个方面,提供了一种页面展示方法,包括:获取对页面元素进行操作产生的业务请求;基于与业务请求对应的外部组件生成高阶组件;展示基于高阶组件确定的页面元素,其中,该页面元素用于提供页面的可视化信息。
根据本申请实施例的另一方面,还提供了一种组件的生成方法,包括:对高阶组件中占位组件进行初始化,以及在初始化完成后,向外部组件库发送用于请求与业务请求对应的外部组件的请求消息;接收请求消息所请求的外部组件,将外部组件填充至初始化后的占位组件,以生成高阶组件。
根据本申请实施例的另一方面,还提供了一种页面的展示系统,包括:客户端设备,该客户端设备用于展示页面,以及获取对页面上的页面元素进行操作产生的业务请求;基于与业务请求对应的外部组件生成高阶组件;展示基于高阶组件确定的页面元素,其中,该页面元素用于提供页面的可视化信息;服务器,用于提供外部组件。
根据本申请实施例的另一方面,还提供了一种页面的展示装置,包括:高阶组件容器,用于基于外部组件生成高阶组件,并存储高阶组件;控制模块,用于获取对页面上的页面元素进行操作产生的业务请求;基于该业务请求获取外部组件;控制展示基于高阶组件确定的页面元素,其中,该页面元素用于提供页面的可视化信息。
根据本申请实施例的另一方面,还提供了一种存储器,存储介质包括存储的程序,其中,在程序运行时控制存储介质所在设备执行上述的页面展示方法。
根据本申请实施例的另一方面,还提供了一种处理器,处理器用于运行程序,其中,程序运行时执行上述的页面展示方法。
根据本申请实施例的另一方面,还提供了一种系统,包括:处理器;以及存储器,与处理器连接,用于为处理器提供处理以下处理步骤的指令:获取对页面元素进行操作产生的业务请求;基于与业务请求对应的外部组件生成高阶组件;展示基于高阶组件确定的页面元素,其中,该页面元素用于提供页面的可视化信息。
在本申请实施例中,采用获取对页面元素进行操作产生的业务请求;基于与业务请求对应的外部组件生成高阶组件;展示基于高阶组件确定的页面元素的方式,达到了根据业务请求,生成高阶组件,并基于高阶组件动态加载外部组件的目的,从而灵活性较高的技术效果,进而解决了页面展示时,通过调用预先确定好的模块进行页面展示,灵活性较低的技术问题。
附图说明
此处所说明的附图用来提供对本申请的进一步理解,构成本申请的一部分,本申请的示意性实施例及其说明用于解释本申请,并不构成对本申请的不当限定。在附图中:
图1是根据本申请实施例用于实现页面展示方法的计算机终端(或移动设备)的硬件结构框图;
图2是根据本申请实施例的一种可选的页面展示方法的示意图;
图3是根据本申请实施例的一种可选的页面展示方法的示意图;
图4是根据本申请实施例的一种可选的高阶组件的状态图;
图5是根据本申请实施例的一种可选的高阶组件的生成方法的示意图;
图6是根据本申请实施例的一种可选的页面展示装置的结构示意图;
图7是根据本申请实施例的一种可选的页面展示系统的结构示意图;
图8是根据本申请实施例的一种可选的系统的结构示意图;
图9是根据本申请实施例的一种计算机终端的结构框图。
具体实施方式
为了使本技术领域的人员更好地理解本申请方案,下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分的实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都应当属于本申请保护的范围。
需要说明的是,本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
为了更好地理解本申请实施例,以下将本申请实施例中涉及的技术术语简述如下:
页面元素:网页中的可视化元素,例如:文字、图片、音频、动画、视频、在页面上显示的控件(例如虚拟按钮)等元素。
组件:对外提供完整的功能的,可被调用的代码集合.其外在形式可能表现为一个或多个文件,比如React.js,bootstrap.css;也可能是内嵌在程序代码里的一段代码片段,如,一个函数,一个类。
高阶组件:高阶组件可以为一个函数,且该函数接受一个组件作为参数,并返回新的组件。
占位组件:高阶组件中用于容纳外部组件的组件容器。
实施例1
根据本申请实施例,还提供了一种页面展示的方法实施例,需要说明的是,在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行,并且,虽然在流程图中示出了逻辑顺序,但是在某些情况下,可以以不同于此处的顺序执行所示出或描述的步骤。
本申请实施例一所提供的方法实施例可以在移动终端、计算机终端或者类似的运算装置中执行。图1示出了一种用于实现页面展示方法的计算机终端(或移动设备)的硬件结构框图。如图1所示,计算机终端10(或移动设备10)可以包括一个或多个(图中采用102a、102b,……,102n来示出)处理器102(处理器102可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置)、用于存储数据的存储器104、以及用于通信功能的传输装置106。除此以外,还可以包括:显示器、输入/输出接口(I/O接口)、通用串行总线(USB)端口(可以作为I/O接口的端口中的一个端口被包括)、网络接口、电源和/或相机。本领域普通技术人员可以理解,图1所示的结构仅为示意,其并不对上述电子装置的结构造成限定。例如,计算机终端10还可包括比图1中所示更多或者更少的组件,或者具有与图1所示不同的配置。
应当注意到的是上述一个或多个处理器102和/或其他数据处理电路在本文中通常可以被称为“数据处理电路”。该数据处理电路可以全部或部分的体现为软件、硬件、固件或其他任意组合。此外,数据处理电路可为单个独立的处理模块,或全部或部分的结合到计算机终端10(或移动设备)中的其他元件中的任意一个内。如本申请实施例中所涉及到的,该数据处理电路作为一种处理器控制(例如与接口连接的可变电阻终端路径的选择)。
存储器104可用于存储应用软件的软件程序以及模块,如本申请实施例中的页面展示方法对应的程序指令/数据存储装置,处理器102通过运行存储在存储器104内的软件程序以及模块,从而执行各种功能应用以及数据处理,即实现上述的应用程序的漏洞检测方法。存储器104可包括高速随机存储器,还可包括非易失性存储器,如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中,存储器104可进一步包括相对于处理器102远程设置的存储器,这些远程存储器可以通过网络连接至计算机终端10。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
传输装置106用于经由一个网络接收或者发送数据。上述的网络具体实例可包括计算机终端10的通信供应商提供的无线网络。在一个实例中,传输装置106包括一个网络适配器(Network Interface Controller,NIC),其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中,传输装置106可以为射频(Radio Frequency,RF)模块,其用于通过无线方式与互联网进行通讯。
在上述运行环境下,本申请提供了如图2所示的页面展示方法。图2是根据本申请实施例1的页面展示方法的流程图。
步骤S202,获取对页面元素进行操作产生的业务请求;
在本申请的一些实施例中,上述业务请求可以由页面元素所在页面上设置的SDK(Software Development Kit,软件开发工具包)进行检测,该SDK可以设置在页面代码处,例如,设置在页面开始位置。该SDK运行于页面所在的上述控制装置中,该控制装置可以为图1所示的计算机终端10,该计算机终端运行有浏览器,该浏览器用于展示上述页面。
对于业务请求和页面元素依据不同的应用场景可以有不同的表现形式:
例如:在检测到用户对页面中的特定元素(例如文字链接等)进行点击操作时,则确定与该点击操作对应的业务请求,以购物场景为例:页面元素可以为将商品添加至购物车的“加入购物车”按钮,此时,在点击该按钮时,上述业务请求为实现以下功能的请求:将商品的信息添加至“购物车”对应的数据库中。
又例如,对于上述对页面元素进行操作产生的业务请求依据不同的应用场景还可以包括以下请求:依据用户点击的“结账付款”按钮产生的业务请求。
步骤S204,基于与业务请求对应的外部组件生成高阶组件;
上述外部组件可以为从外部组件库(例如图3中的外部CDN组件库)中获取的与业务请求对应的组件。本申请中的高阶组件主要是用在页面和外部组件之间,用来包装组件,并完成外部组件的加载和解析执行。由于外部组件为基于业务请求从外部组件库获取的,因此,可以实现外部组件所对应功能的按需加载,从而实现页面展示的灵活性。
在本申请的一些可选的实施例中,SDK用于提供页面程序统一的API,例如:CDN组件的信息获取,高阶组件赋值等。
具体地,在获取对页面进行操作产生的业务请求之后,将请求外部组件列表发送至业务管理后台(即网页的后台服务器),以获取需要动态加载的组件的配置信息,即将配置信息加载至页面,这样,便可以实现组件的加载,进而展示加载完成后的页面;上述配置信息包括但不限于组件标识、组件版本信息。
在本申请的一些实施例中,控制装置的具体结构可以参见图1所示的计算机终端。
步骤S206,展示基于高阶组件确定的页面元素。
业务管理后台接收控制装置获取外部组件的请求之后,将对应的外部组件返回,以利用对应的外部组件对高阶组件进行渲染,并在页面元素所在的页面中展示渲染后的高阶组件。其中,此处渲染的含义为:将外部组件的属性和方法加入到高阶组件中,并将该高阶组件加入对应的组件容器中。
本申请实施例基于与业务请求对应的外部组件生成高阶组件;执行所述高阶组件,并展示基于所述高阶组件确定的页面元素的方式,从而实现了基于业务请求,按需确定用于生成高阶组件的外部组件,从而实现了页面展示的灵活性,进而解决了页面展示时,通过调用预先确定好的模块进行页面展示,灵活性较低的技术问题。
为更好地理解本申请实施例,以下结合图3进行详细说明。图3是根据本申请实施例一的页面展示方法的流程图,如图3所示,该方法包括以下步骤:
步骤S32,访问页面;
具体地,访问页面过程中,用户通过操作页面元素进行业务请求,具体地,检测用户对页面中指定元素的触发操作;在检测到该触发操作时,生成该触发操作对应的业务请求;例如:用户对页面中的文字进行点击产生的业务请求;上述业务请求可以由页面元素所在页面的SDK进行检测,该SDK可以设置在页面代码中。正如上面所述,页面元素可以为将商品添加至购物车的“加入购物车”按钮。
另外,对页面元素进行操作产生的业务请求包括但不限于:对商品展示页面中的商品信息进行语言翻译的业务请求;为用户对购物车中的商品点击的结账付款的业务请求;或者对商品点击购买的业务请求,其中,上述各个业务请求在页面上分别具有相应的按钮。
步骤S322,请求组件列表;
在获取到对页面元素进行操作产生的业务请求之后,基于该业务请求确定请求的组件列表;并在接收到外部组件库反馈的组件后,将相应的组件配置信息存储至页面后台。在页面加载过程中,可以从页面所在的后台服务器中获取组件的配置信息,并将配置信息加载至页面;这样,便可以提前得到外部组件,以及外部组件的版本等信息,便于预加载。
具体地,控制装置向业务管理后台请求组件列表,该组件列表中包括组件的配置信息;其中,控制装置可以为设置有SDK的页面所在的客户端设备。
基于与业务请求对应的外部组件生成高阶组件,可以通过以下步骤实现:从外部数据库中获取外部组件的组件变量,加载组件变量和配置信息以生成高阶组件。
在本申请的一些实施例中,高阶组件可通过SDK提供的getComponentClassWrapper()创建。
getComponentClassWrapper()的内部核心逻辑是:创建高阶组件实例,并将外部组件的信息传递给高阶组件。其中,函数getComponentClassWrapper()生成高阶组件,为一个工厂方法。提供该方法主要是让调用者使用起来更加方便,将复杂的逻辑封装到函数中。
步骤S324,吐出组件数据;该组件数据包括但不限于:上述组件的配置信息。
后台服务器获将组件的版本号、组件标识等配置信息推送至页面,以为后续进行页面渲染作准备。
步骤S34,渲染页面内的同步内容;
步骤S36,呈现页面;
获取组件的配置信息之后,控制页面对组件的配置信息进行预加载并显示。
步骤S310,加载控制装置所展示页面中的SDK;该步骤包括步骤S3100和S3102:
步骤S3100,获取组件类;
页面加载SDK,并发出获取组件类的请求。
步骤S3102,构造高阶组件;
控制装置基于与业务请求对应的外部组件创建高阶组件,其中,基于与业务请求对应的外部组件创建高阶组件包括以下步骤:
对高阶组件中占位组件进行初始化,以及在初始化完成后,向外部组件库发送用于请求与业务请求对应的外部组件的请求消息;接收请求消息所请求的外部组件;将外部组件填充至初始化后的占位组件,以创建高阶组件。
其中,步骤S3102包括但不限于步骤S31022和S31024,其中,步骤S31022包括:获取组件;创建高阶组件时,需通过CDN(Content Delivery Network,内容分发网络)获取外部组件。
步骤S31024,返回外部组件;
外部CDN组件库将外部组件返回至高阶组件,其中,外部CDC组件库为CDN网络中的组件库。
步骤S3104,高阶组件向控制装置返回高阶组件,以构造类(Class);
步骤S3104,控制装置向页面返回高阶组件,以构造类(Class);
步骤S312,渲染页面;
控制装置执行填充至占位组件中的外部组件。
步骤S314,呈现。在页面中渲染填充至占位组件中的外部组件,。
本申请上述实施例中,上述步骤S2042中向外部组件库发送的用于请求与业务请求对应的外部组件的请求消息中携带有外部组件的索引信息,该索引信息为基于组件名称和组件版本确定的。
在本申请的一些实施例中,在向外部组件库发送用于请求与业务请求对应的外部组件的请求消息之后,如果请求外部组件失败,则确在页面上渲染回退组件,以展示回退组件。
本申请上述实施例中,上述步骤S204可以通过以下方式实现:在页面中加载SDK,并通过SDK创建高阶组件。
本申请上述实施例中,如图4所示,向外部组件库发送用于请求与所述业务请求对应的外部组件的请求消息之后,在请求外部组件成功时,则在页面上执行基于真实组件(CDN组件)即外部组件确定的页面元素。若在请求外部组件失败时,确定回退组件,并在页面上展示基于Fallback组件(div)(即回退组件)确定的页面元素。
在上述运行环境下,本申请提供了如图5所示的高阶组件的生成方法。图5是根据本申请实施例一的高阶组件的生成方法的流程图。
步骤S502,对高阶组件中占位组件进行初始化,以及在初始化完成后,向外部组件库发送用于请求与业务请求对应的外部组件的请求消息;
具体的,对高阶组件中的占位组件进行初始化之前,还需获取用户对页面元素进行操作产生的业务请求,该业务请求可以由页面元素所在页面的SDK进行检测,该SDK可以设置在页面代码处,获取的对页面元素进行操作产生的业务请求可以为用户与页面进行交互的过程中,用户对页面元素进行操作产生的业务请求,例如:用户对页面中的文字进行点击产生的业务请求;页面元素可以为将商品添加至购物车的“加入购物车”按钮;上述对页面元素进行操作产生的业务请求包括但不限于:用户对购物车中的商品点击的结账付款的业务请求,或将商品添加到购物车中的业务请求,或对商品点击购买的业务请求。
其中,上述步骤S502中的请求消息中携带有外部组件的索引信息,该索引信息为基于组件名称和组件版本确定的。
在本申请的一些实施例中,向外部组件库发送用于请求与业务请求对应的外部组件的请求消息之后,还可以在请求外部组件失败时,确定回退组件,并在页面上渲染回退组件。
步骤S504,接收请求消息所请求的外部组件;将外部组件填充至初始化后的占位组件,以创建高阶组件。
需要说明的是,对于前述的各方法实施例,为了简单描述,故将其都表述为一系列的动作组合,但是本领域技术人员应该知悉,本申请并不受所描述的动作顺序的限制,因为依据本申请,某些步骤可以采用其他顺序或者同时进行。其次,本领域技术人员也应该知悉,说明书中所描述的实施例均属于优选实施例,所涉及的动作和模块并不一定是本申请所必须的。
通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现,当然也可以通过硬件,但很多情况下前者是更佳的实施方式。基于这样的理解,本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中,包括若干指令用以使得一台终端设备(可以是手机,计算机,服务器,或者网络设备等)执行本申请各个实施例的方法。
实施例2
根据本申请实施例,还提供了一种用于实施上述页面的展示方法的页面的展示装置,如图6所示,该装置包括:
高阶组件容器62,用于基于外部组件创建高阶组件,并存储高阶组件;
控制模块64,用于获取对页面上的页面元素进行操作产生的业务请求;基于该业务请求获取外部组件;展示基于高阶组件的页面元素。
此处需要说明的是,上述高阶组件容器62和控制模块64对应于实施例1中的步骤S202至步骤S206,两个模块与对应的步骤所实现的实例和应用场景相同,但不限于上述实施例一所公开的内容。需要说明的是,上述模块作为装置的一部分可以运行在实施例1提供的计算机终端10中。
实施例3
本申请的实施例可以提供一种页面的展示系统,如图7所示,该系统包括:客户端设备72、服务器74,其中:
客户端设备72,该客户端设备用于展示页面,以及获取对页面上的页面元素进行操作产生的业务请求;基于与所述业务请求对应的外部组件创建高阶组件;执行所述高阶组件,并展示基于所述高阶组件确定的页面元素;
在本申请的一些实施例中,上述业务请求可以由页面元素所在页面的SDK进行检测,该SDK可以设置在页面代码处,获取的对页面元素进行操作产生的业务请求可以为用户与页面进行交互的过程中,用户对页面元素进行操作产生的业务请求,例如:用户对页面中的文字进行点击产生的业务请求;页面元素还可以为将商品添加至购物车的“加入购物车”按钮;上述对页面元素进行操作产生的业务请求,还可以为用户对购物车中的商品点击的结账付款的业务请求,或将商品添加到购物车中的业务请求,或对商品点击购买的业务请求。
具体地,控制装置获取对页面进行操作产生的业务请求之后,将请求外部组件列表发送至业务管理后台,以获取需要动态加载的组件的配置信息。其中,请求外部组件列表中的组件为对应业务请求的组件。并控制对应业务请求的组件创建高阶组件,向业务管理后台获取业务请求对应的组件。高阶组件为一个函数,且该函数接收一个组件作为参数,并返回一个新的组件。
本申请实施例中的高阶组件主要是用在在页面和外部组件之间,用来包装组件,并完成外部组件的加载和解析执行。本申请的一些实施例中,SDK用于提供页面程序统一的API,例如:CDN组件的信息获取,高阶组件赋值等。
后台服务器接收控制装置(运行浏览器的设备,该设备运行的浏览器中内置有SDK)发送的外部组件请求之后,将对应的外部组件返回,以使高阶组件创建完成。控制装置获取创建成功的高阶组件,并利用对应的外部组件对高阶组件进行渲染,即将外部组件的信息传递给高阶组件,以在渲染完成后,展示基于所述高阶组件确定的页面元素。
控制装置获取对页面元素进行操作产生的业务请求之后,还需执行以下步骤:从页面所在的后台服务器中获取组件的配置信息,并将配置信息加载至页面。
基于与业务请求对应的外部组件创建高阶组件,可以通过以下步骤:从外部数据库中获取外部组件的组件变量,加载组件变量和配置信息以创建高阶组件。
其中,在后台服务器获取控制装置发送的用于请求组件的列表请求之后,将对应组件的配置信息发送至控制装置,以及控制装置获取组件的配置信息之后,控制页面对组件的配置信息进行预加载并显示。
服务器74,用于提供所述外部组件。
实施例4
本申请的实施例可以提供一种页面的展示系统,如图8所示,该系统包括:处理器82、存储器84,其中:
处理器82以及存储器84,存储器84与处理器82连接,用于为所述处理器82提供处理以下处理步骤的指令:获取对页面元素进行操作产生的业务请求;基于与所述业务请求对应的外部组件创建高阶组件;执行所述高阶组件,并展示基于所述高阶组件确定的页面元素。
具体地,上述业务请求可以由页面元素所在页面的SDK进行检测,该SDK可以设置在页面代码处,获取的对页面元素进行操作产生的业务请求可以为用户与页面进行交互的过程中,用户对页面元素进行操作产生的业务请求,例如:用户对页面中的文字进行点击产生的业务请求;页面元素还可以为将商品添加至购物车的“加入购物车”按钮;上述对页面元素进行操作产生的业务请求;还可以为用户对购物车中的商品点击的结账付款的业务请求,或将商品添加到购物车中的业务请求,或对商品点击购买的业务请求。
具体的,控制装置获取对页面进行操作产生的业务请求之后,将请求外部组件列表发送至业务管理后台,以获取需要动态加载的组件的配置信息。其中,请求外部组件列表中的组件为对应业务请求的组件。并控制对应业务请求的组件创建高阶组件,向业务管理后台获取业务请求对应的组件。高阶组件为一个函数,且该函数接收一个组件作为参数,并返回一个新的组件。
本申请中的高阶组件主要是用在在页面和外部组件之间,用来包装组件,并完成外部组件的加载和解析执行。在本申请的一些可选的实施例中,SDK用于提供页面程序统一的API,例如:CDN组件的信息获取,高阶组件赋值等。
后台服务器接收控制装置创建高阶组件时获取外部组件的请求之后,将对应的外部组件返回,以使高阶组件创建完成。控制装置获取创建成功的高阶组件,并利用对应的外部组件展示基于所述高阶组件确定的页面元素。
控制装置获取对页面元素进行操作产生的业务请求之后,还需执行步骤:从页面所在的后台服务器中获取组件的配置信息,并将配置信息加载至页面。
实施例5
本申请的实施例可以提供一种计算机终端,该计算机终端可以是计算机终端群中的任意一个计算机终端设备。可选地,在本实施例中,上述计算机终端也可以替换为移动终端等终端设备。
可选地,在本实施例中,上述计算机终端可以位于计算机网络的多个网络设备中的至少一个网络设备。
在本实施例中,上述计算机终端可以执行应用程序的漏洞检测方法中以下步骤的程序代码:接收SQL访问语句;从预设缓存中查找与所述SQL访问语句对应的执行计划,其中,该执行计划用于指示数据库中执行的逻辑操作的集合;执行所述执行计划。
可选地,图9是根据本申请实施例的一种计算机终端的结构框图。如图9所示,该计算机终端A可以包括:一个或多个(图中仅示出一个)处理器90、存储器92、以及外设接口94。
其中,存储器92可用于存储软件程序以及模块,如本申请实施例中的安全漏洞检测方法和装置对应的程序指令/模块,处理器90通过运行存储在存储器92内的软件程序以及模块,从而执行各种功能应用以及数据处理,即实现上述的系统漏洞攻击的检测方法。存储器92可包括高速随机存储器,还可以包括非易失性存储器,如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中,存储器92可进一步包括相对于处理器90远程设置的存储器,这些远程存储器可以通过网络连接至终端A。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
处理器90可以通过传输装置调用存储器92存储的信息及应用程序,以执行下述步骤:获取对页面元素进行操作产生的业务请求;基于与所述业务请求对应的外部组件创建高阶组件;展示基于所述高阶组件确定的页面元素。
可选地,上述处理器90还可以执行如下步骤的程序代码:基于与所述业务请求对应的外部组件创建高阶组件,包括:对高阶组件中占位组件进行初始化,以及在初始化完成后,向外部组件库发送用于请求与所述业务请求对应的外部组件的请求消息;接收所述请求消息所请求的外部组件;将所述外部组件填充至初始化后的占位组件,以创建所述高阶组件;在所述页面中渲染填充至占位组件中的外部组件。
可选地,上述处理器90还可以执行如下步骤的程序代码:在请求所述外部组件失败时,确定回退组件,并在所述页面上渲染所述回退组件。
可选地,上述处理器90还可以执行如下步骤的程序代码:获取对页面元素进行操作产生的业务请求之后,所述方法还包括:从所述页面所在的后台服务器中获取所述组件的配置信息,并将所述配置信息加载至所述页面;基于与所述业务请求对应的外部组件创建高阶组件,包括:从外部数据库中获取所述外部组件的组件变量;加载所述组件变量和所述配置信息以创建所述高阶组件。
可选地,上述处理器90还可以执行如下步骤的程序代码:在所述页面中加载SDK,控制装置通过所述SDK创建所述高阶组件。
在本申请实施例中,采用获取对页面元素进行操作产生的业务请求;基于与业务请求对应的外部组件创建高阶组件;执行所述高阶组件,并展示基于所述高阶组件确定的页面元素的方式,达到了根据业务请求,创建高阶组件,并基于高阶组件在程序运行时动态加载外部组件的目的,从而实现了基于业务请求,控制构建高阶组件自动从网上下载动态组件,灵活性较高的技术效果,进而解决了页面展示时,通过调用预先确定好的模块进行页面展示,灵活性较低的技术问题。
实施例6
本申请的实施例还提供了一种存储介质。可选地,在本实施例中,上述存储介质可以用于保存上述实施例一所提供的页面展示方法所执行的程序代码。
可选地,在本实施例中,上述存储介质可以位于计算机网络中计算机终端群中的任意一个计算机终端中,或者位于移动终端群中的任意一个移动终端中。
可选地,在本实施例中,存储介质被设置为存储用于执行以下步骤的程序代码:获取对页面元素进行操作产生的业务请求;基于与所述业务请求对应的外部组件创建高阶组件;展示基于所述高阶组件确定的页面元素。
可选地,在本实施例中,存储介质被设置为存储用于执行以下步骤的程序代码:基于与所述业务请求对应的外部组件创建高阶组件,包括:对高阶组件中占位组件进行初始化,以及在初始化完成后,向外部组件库发送用于请求与所述业务请求对应的外部组件的请求消息;接收所述请求消息所请求的外部组件;将所述外部组件填充至初始化后的占位组件,以创建所述高阶组件;在所述页面中渲染填充至占位组件中的外部组件。
可选地,在本实施例中,存储介质被设置为存储用于执行以下步骤的程序代码:在请求所述外部组件失败时,确定回退组件,并在所述页面上渲染所述回退组件。
可选地,在本实施例中,存储介质被设置为存储用于执行以下步骤的程序代码:获取对页面元素进行操作产生的业务请求之后,所述方法还包括:从所述页面所在的后台服务器中获取所述组件的配置信息,并将所述配置信息加载至所述页面;基于与所述业务请求对应的外部组件创建高阶组件,包括:从外部数据库中获取所述外部组件的组件变量;加载所述组件变量和所述配置信息以创建所述高阶组件。
可选地,在本实施例中,存储介质被设置为存储用于执行以下步骤的程序代码:在所述页面中加载SDK,控制装置通过所述SDK创建所述高阶组件。
上述本申请实施例序号仅仅为了描述,不代表实施例的优劣。
在本申请的上述实施例中,对各个实施例的描述都各有侧重,某个实施例中没有详述的部分,可以参见其他实施例的相关描述。
在本申请所提供的几个实施例中,应该理解到,所揭露的技术内容,可通过其它的方式实现。其中,以上所描述的装置实施例仅仅是示意性的,例如单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,单元或模块的间接耦合或通信连接,可以是电性或其它的形式。
作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本申请各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。
集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本申请各个实施例方法的全部或部分步骤。而前述的存储介质包括:U盘、只读存储器(ROM,Read-Only Memory)、随机存取存储器(RAM,Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。
以上仅是本申请的优选实施方式,应当指出,对于本技术领域的普通技术人员来说,在不脱离本申请原理的前提下,还可以做出若干改进和润饰,这些改进和润饰也应视为本申请的保护范围。

Claims (10)

1.一种页面展示方法,其特征在于,包括:
获取对页面元素进行操作产生的业务请求;
基于与所述业务请求对应的外部组件生成高阶组件;
展示基于所述高阶组件确定的页面元素,其中,该页面元素用于提供页面的可视化信息;基于与所述业务请求对应的外部组件生成高阶组件,包括:对高阶组件中占位组件进行初始化,以及在初始化完成后,向外部组件库发送用于请求与所述业务请求对应的外部组件的请求消息;接收所述请求消息所请求的外部组件;将所述外部组件填充至初始化后的占位组件,以生成所述高阶组件,其中,所述占位组件为所述高阶组件中用于容纳所述外部组件的组件容器;展示基于所述高阶组件确定的页面元素之前,所述方法还包括:在所述页面中渲染填充至占位组件中的外部组件。
2.根据权利要求1所述的方法,其特征在于,所述请求消息中携带有所述外部组件的索引信息,该索引信息为基于组件名称和组件版本确定的。
3.根据权利要求1所述的方法,其特征在于,向外部组件库发送用于请求与所述业务请求对应的外部组件的请求消息之后,所述方法还包括:
在请求所述外部组件失败时,确定回退组件,并在所述页面上渲染所述回退组件。
4.根据权利要求1所述的方法,其特征在于,
获取对页面元素进行操作产生的业务请求之后,所述方法还包括:从所述页面所在的后台服务器中获取所述组件的配置信息,并将所述配置信息加载至所述页面;
基于与所述业务请求对应的外部组件生成高阶组件,包括:从外部数据库中获取所述外部组件的组件变量;加载所述组件变量和所述配置信息以生成所述高阶组件。
5.根据权利要求1所述的方法,其特征在于,基于与所述业务请求对应的外部组件生成高阶组件包括:
在所述页面中加载软件开发工具包,并通过所述软件开发工具包生成所述高阶组件。
6.一种页面的展示系统,其特征在于,包括:
客户端设备,该客户端设备用于展示页面,以及获取对页面上的页面元素进行操作产生的业务请求;基于与所述业务请求对应的外部组件生成高阶组件;展示基于所述高阶组件确定的页面元素,其中,该页面元素用于提供页面的可视化信息;基于与所述业务请求对应的外部组件生成高阶组件,包括:对高阶组件中占位组件进行初始化,以及在初始化完成后,向外部组件库发送用于请求与所述业务请求对应的外部组件的请求消息;接收所述请求消息所请求的外部组件;将所述外部组件填充至初始化后的占位组件,以生成所述高阶组件,其中,所述占位组件为所述高阶组件中用于容纳所述外部组件的组件容器;展示基于所述高阶组件确定的页面元素之前,在所述页面中渲染填充至占位组件中的外部组件;
服务器,用于提供所述外部组件。
7.一种页面的展示装置,其特征在于,包括:
高阶组件容器,用于基于外部组件生成高阶组件,并存储高阶组件;
控制模块,用于获取对页面上的页面元素进行操作产生的业务请求;基于该业务请求获取外部组件;控制展示基于所述高阶组件确定的页面元素,其中,该页面元素用于提供页面的可视化信息;基于与所述业务请求对应的外部组件生成高阶组件,包括:对高阶组件中占位组件进行初始化,以及在初始化完成后,向外部组件库发送用于请求与所述业务请求对应的外部组件的请求消息;接收所述请求消息所请求的外部组件;将所述外部组件填充至初始化后的占位组件,以生成所述高阶组件,其中,所述占位组件为所述高阶组件中用于容纳所述外部组件的组件容器;展示基于所述高阶组件确定的页面元素之前,在所述页面中渲染填充至占位组件中的外部组件。
8.一种存储介质,其特征在于,所述存储介质包括存储的程序,其中,在所述程序运行时控制所述存储介质所在设备执行权利要求1至5中任意一项所述的页面的展示方法。
9.一种处理器,其特征在于,所述处理器用于运行程序,其中,所述程序运行时执行权利要求1至5中任意一项所述的页面的展示方法。
10.一种页面的展示系统,其特征在于,包括:
处理器;以及
存储器,与所述处理器连接,用于为所述处理器提供处理以下处理步骤的指令:
获取对页面元素进行操作产生的业务请求;
基于与所述业务请求对应的外部组件生成高阶组件;
并展示基于所述高阶组件确定的页面元素,其中,该页面元素用于提供页面的可视化信息;基于与所述业务请求对应的外部组件生成高阶组件,包括:对高阶组件中占位组件进行初始化,以及在初始化完成后,向外部组件库发送用于请求与所述业务请求对应的外部组件的请求消息;接收所述请求消息所请求的外部组件;将所述外部组件填充至初始化后的占位组件,以生成所述高阶组件,其中,所述占位组件为所述高阶组件中用于容纳所述外部组件的组件容器;展示基于所述高阶组件确定的页面元素之前,在所述页面中渲染填充至占位组件中的外部组件。
CN201811513518.XA 2018-12-11 2018-12-11 页面展示方法及装置、系统 Active CN111310083B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201811513518.XA CN111310083B (zh) 2018-12-11 2018-12-11 页面展示方法及装置、系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201811513518.XA CN111310083B (zh) 2018-12-11 2018-12-11 页面展示方法及装置、系统

Publications (2)

Publication Number Publication Date
CN111310083A CN111310083A (zh) 2020-06-19
CN111310083B true CN111310083B (zh) 2023-05-02

Family

ID=71161229

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201811513518.XA Active CN111310083B (zh) 2018-12-11 2018-12-11 页面展示方法及装置、系统

Country Status (1)

Country Link
CN (1) CN111310083B (zh)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114625438A (zh) * 2022-03-04 2022-06-14 中国—东盟信息港股份有限公司 一种前端应用容器化的本地模块加载方法

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7155490B1 (en) * 2000-03-01 2006-12-26 Freewebs Corporation System and method for providing a web-based operating system
CN104331474A (zh) * 2014-11-03 2015-02-04 百度在线网络技术(北京)有限公司 页面处理方法及装置
CN105808237A (zh) * 2016-02-25 2016-07-27 北京京东尚科信息技术有限公司 页面渲染方法和页面渲染系统
WO2017096065A1 (en) * 2015-12-02 2017-06-08 Alibaba Group Holding Limited Running applications using pre-generated components
CN108037923A (zh) * 2018-01-02 2018-05-15 武汉斗鱼网络科技有限公司 抽奖业务实现方法和组件
CN108228288A (zh) * 2016-12-22 2018-06-29 航天信息股份有限公司 一种组件系统及其调用方法和装置
CN108846087A (zh) * 2018-06-12 2018-11-20 恒生电子股份有限公司 一种页面渲染方法、装置、终端及服务器

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8171454B2 (en) * 2001-03-15 2012-05-01 International Business Machines Corporation Method and apparatus for programming software components
US20120192063A1 (en) * 2011-01-20 2012-07-26 Koren Ziv On-the-fly transformation of graphical representation of content
US20140173413A1 (en) * 2012-12-18 2014-06-19 Andres Godoy Method and system to build a representative model for web pages to interact with users

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7155490B1 (en) * 2000-03-01 2006-12-26 Freewebs Corporation System and method for providing a web-based operating system
CN104331474A (zh) * 2014-11-03 2015-02-04 百度在线网络技术(北京)有限公司 页面处理方法及装置
WO2017096065A1 (en) * 2015-12-02 2017-06-08 Alibaba Group Holding Limited Running applications using pre-generated components
CN105808237A (zh) * 2016-02-25 2016-07-27 北京京东尚科信息技术有限公司 页面渲染方法和页面渲染系统
CN108228288A (zh) * 2016-12-22 2018-06-29 航天信息股份有限公司 一种组件系统及其调用方法和装置
CN108037923A (zh) * 2018-01-02 2018-05-15 武汉斗鱼网络科技有限公司 抽奖业务实现方法和组件
CN108846087A (zh) * 2018-06-12 2018-11-20 恒生电子股份有限公司 一种页面渲染方法、装置、终端及服务器

Non-Patent Citations (5)

* Cited by examiner, † Cited by third party
Title
Hyungki Kim 等.Cluster rendering on large high-resolution multi-displays using X3DOM and HTML.《Multimedia Systems》.2017,(第2期),第265-279页. *
刘仲博.ASP.NET网页中GridView和Repeater控件的性能对比实验及分析.《硅谷》.2009,(第16期),第76、137页. *
宗欣 等.互联网交通安全服务平台前端架构设计与研究.《中国公共安全(学术版)》.2014,(第03期),第83-88页. *
尹航 等.基于配置文件的web页面自动生成系统.《软件》.2014,第35卷(第10期),第117-121页. *
王萍.基于动态可配置的数据可视化展示系统.《电子技术与软件工程》.2018,(第06期),第188-189页. *

Also Published As

Publication number Publication date
CN111310083A (zh) 2020-06-19

Similar Documents

Publication Publication Date Title
US10558474B2 (en) Media information processing method, mobile terminal, and storage medium
CN110795195B (zh) 一种网页渲染方法、装置、电子设备及存储介质
CN111104635B (zh) 一种表格网页的生成方法和装置
US20170185609A1 (en) Universal adaptor for rapid development of web-based data visualizations
CN108469970B (zh) 页面选项卡信息处理方法及装置
CN112800370B (zh) 业务单据的处理方法、装置、计算机设备和存储介质
CN111580788B (zh) 模板搭配信息推荐方法、装置及电子设备
CN112508640A (zh) 商品处理方法及组件、电子设备、计算机可读介质
CN108319474B (zh) 一种页面信息生成方法、装置和设备
CN115309516A (zh) 一种应用生命周期的检测方法、装置及计算机设备
CN111310083B (zh) 页面展示方法及装置、系统
CN110908652A (zh) 创建活动页面以及对活动页面进行编译的方法、装置
CN107147732A (zh) 图片处理方法、装置、客户端及服务端
CN112307377A (zh) 信息展示方法、装置及电子设备
KR101697290B1 (ko) 웹 브라우저에서 구현되는 웹사이트 제작 방법 및 시스템
CN113312083B (zh) 应用生成方法、装置及设备
CN115220780A (zh) 服务配置方法、装置及设备
CN112837131A (zh) 销售应用开发方法、装置、设备及存储介质
CN114020396A (zh) 应用程序的显示方法和应用程序的数据生成方法
CN112947918A (zh) 数据展示方法和装置
CN112115692A (zh) 制作电子表单的方法、装置以及存储介质
CN110570184A (zh) 向用户提供产品的系统、方法、装置以及存储介质
CN111737372A (zh) 地图数据生成方法和装置
CN116934411A (zh) 交易订单创建方法、装置、电子设备及可读存储介质
CN118113282A (zh) 生成页面的方法、配置组件的方法、展现页面的方法及装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant