CN114281326A - 一种前端页面的显示方法和装置、存储介质及电子装置 - Google Patents

一种前端页面的显示方法和装置、存储介质及电子装置 Download PDF

Info

Publication number
CN114281326A
CN114281326A CN202111470609.1A CN202111470609A CN114281326A CN 114281326 A CN114281326 A CN 114281326A CN 202111470609 A CN202111470609 A CN 202111470609A CN 114281326 A CN114281326 A CN 114281326A
Authority
CN
China
Prior art keywords
style
target
page
code
component
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.)
Pending
Application number
CN202111470609.1A
Other languages
English (en)
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.)
Qingdao Haier Technology Co Ltd
Haier Smart Home Co Ltd
Original Assignee
Qingdao Haier Technology Co Ltd
Haier Smart Home Co 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 Qingdao Haier Technology Co Ltd, Haier Smart Home Co Ltd filed Critical Qingdao Haier Technology Co Ltd
Priority to CN202111470609.1A priority Critical patent/CN114281326A/zh
Publication of CN114281326A publication Critical patent/CN114281326A/zh
Pending legal-status Critical Current

Links

Images

Landscapes

  • Information Transfer Between Computers (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请公开了一种前端页面的显示方法和装置、存储介质及电子装置,其中,上述方法包括:获取与待显示的第一目标页面对应的第一页面代码,其中,第一目标页面中包含目标组件,第一页面代码中包含目标样式标识,目标样式标识用于标识与目标组件所对应的样式代码;获取目标样式标识所标识的第一样式代码,其中,第一样式代码用于指示目标组件的组件样式;根据第一页面代码和第一样式代码显示第一目标页面,其中,目标组件按照第一样式代码所指示的组件样式在第一目标页面中进行显示。通过本申请,解决了相关技术中的前端页面的显示方法存在由于需要逐个处理前端页面的样式代码导致的页面样式的开发效率低的技术问题。

Description

一种前端页面的显示方法和装置、存储介质及电子装置
技术领域
本申请涉及计算机领域,具体而言,涉及一种前端页面的显示方法和装置、存储介质及电子装置。
背景技术
在开发前端应用时,前端应用的页面样式改动非常频繁,基本上会覆盖到每一次设计需求的迭代之中。在开发不同前端页面时,开发人员需要在每个前端页面中单独编写符合UI(User Interface,用户界面)标准的样式代码。另外,假如UI风格突然改版,开发人员需要追溯到每个前端页面上去修改样式代码,存在修改遗漏的风险。
由此可见,相关技术中的前端页面的显示方法,存在由于需要逐个处理前端页面的样式代码导致的页面样式的开发效率低的技术问题。
发明内容
本申请实施例提供了一种前端页面的显示方法和装置、存储介质及电子装置,以至少解决相关技术中的前端页面的显示方法存在由于需要逐个处理前端页面的样式代码导致的页面样式的开发效率低的技术问题。
根据本申请实施例的一个方面,提供了一种前端页面的显示方法,包括:获取与待显示的第一目标页面对应的第一页面代码,其中,所述第一目标页面中包含目标组件,所述第一页面代码中包含目标样式标识,所述目标样式标识用于标识与所述目标组件所对应的样式代码;获取所述目标样式标识所标识的第一样式代码,其中,所述第一样式代码用于指示所述目标组件的组件样式;根据所述第一页面代码和所述第一样式代码显示所述第一目标页面,其中,所述目标组件按照所述第一样式代码所指示的组件样式在所述第一目标页面中进行显示。
在一个示例性实施例中,所述获取所述目标样式标识所标识的第一样式代码,包括:向第一服务器发送第一请求消息,其中,所述第一服务器为存储样式代码的服务器,所述第一请求消息用于请求所述目标样式标识所标识的样式代码;接收所述第一服务器响应所述第一请求消息所返回的第一响应消息,其中,所述第一响应消息中携带有所述第一样式代码。
在一个示例性实施例中,所述获取所述目标样式标识所标识的第一样式代码,包括:从预先存储的多个样式代码中获取与所述目标样式标识匹配的样式代码,得到所述第一样式代码。
在一个示例性实施例中,在所述从预先存储的多个样式代码中获取与所述目标样式标识匹配的样式代码之后,所述方法还包括:在所述第一样式代码的已生效时间大于或者等于目标时间阈值的情况下,向第二服务器发送第二请求消息,其中,所述第二服务器为存储样式代码的服务器,所述第二请求消息用于请求所述目标样式标识所标识的样式代码;接收所述第二服务器响应所述第二请求消息所返回的第二响应消息,其中,所述第二响应消息中携带有第二样式代码;将所述第一样式代码更新为所述第二样式代码,得到更新后的所述第一样式代码。
在一个示例性实施例中,在所述根据所述第一页面代码和所述第一样式代码显示所述第一目标页面之后,所述方法还包括:获取与待显示的第二目标页面对应的第二页面代码,其中,所述第二目标页面中包含所述目标组件,所述第二页面代码中包含所述目标样式标识;根据所述第二页面代码和所述第一样式代码显示所述第二目标页面,其中,所述目标组件按照所述第一样式代码所指示的组件样式在所述第二目标页面中进行显示。
在一个示例性实施例中,在所述获取与待显示的第一目标页面对应的第一页面代码之前,所述方法还包括:在页面图配置界面中显示的目标视觉图上标记出所述目标组件所在的目标组件区域,其中,所述页面图配置界面为配置页面的视觉图的界面,所述目标视觉图用于描述所述第一目标页面所包含的页面元素;在所述组件区域上添加所述目标样式标识,其中,所述目标样式标识中包含所述目标组件的显示参数;保存配置的所述目标视觉图,其中,所述第一页面代码是根据所述目标视觉图所编写的。
在一个示例性实施例中,在所述根据所述第一页面代码和所述第一样式代码显示所述第一目标页面之后,所述方法还包括:获取与待显示的第三目标页面对应的第三页面代码,其中,所述第三目标页面中包含所述目标组件,所述第三页面代码中包含所述目标样式标识;获取所述目标样式标识所标识的第三样式代码,其中,所述第三样式代码用于指示所述目标组件更新后的组件样式;根据所述第三页面代码和所述第三样式代码显示所述第三目标页面,其中,所述目标组件按照所述第三样式代码所指示的组件样式在所述第三目标页面中进行显示。
根据本申请实施例的另一个方面,还提供了一种前端页面的显示装置,包括:第一获取单元,用于获取与待显示的第一目标页面对应的第一页面代码,其中,所述第一目标页面中包含目标组件,所述第一页面代码中包含目标样式标识,所述目标样式标识用于标识与所述目标组件所对应的样式代码;第二获取单元,用于获取所述目标样式标识所标识的第一样式代码,其中,所述第一样式代码用于指示所述目标组件的组件样式;第一显示单元,用于根据所述第一页面代码和所述第一样式代码显示所述第一目标页面,其中,所述目标组件按照所述第一样式代码所指示的组件样式在所述第一目标页面中进行显示。
在一个示例性实施例中,所述第二获取单元,包括:发送模块,用于向第一服务器发送第一请求消息,其中,所述第一服务器为存储样式代码的服务器,所述第一请求消息用于请求所述目标样式标识所标识的样式代码;接收模块,用于接收所述第一服务器响应所述第一请求消息所返回的第一响应消息,其中,所述第一响应消息中携带有所述第一样式代码。
在一个示例性实施例中,所述第二获取单元,包括:获取模块,用于从预先存储的多个样式代码中获取与所述目标样式标识匹配的样式代码,得到所述第一样式代码。
在一个示例性实施例中,所述装置还包括:发送单元,用于在所述从预先存储的多个样式代码中获取与所述目标样式标识匹配的样式代码之后,在所述第一样式代码的已生效时间大于或者等于目标时间阈值的情况下,向第二服务器发送第二请求消息,其中,所述第二服务器为存储样式代码的服务器,所述第二请求消息用于请求所述目标样式标识所标识的样式代码;接收单元,用于接收所述第二服务器响应所述第二请求消息所返回的第二响应消息,其中,所述第二响应消息中携带有第二样式代码;更新单元,用于将所述第一样式代码更新为所述第二样式代码,得到更新后的所述第一样式代码。
在一个示例性实施例中,所述装置还包括:第三获取单元,用于在所述根据所述第一页面代码和所述第一样式代码显示所述第一目标页面之后,获取与待显示的第二目标页面对应的第二页面代码,其中,所述第二目标页面中包含所述目标组件,所述第二页面代码中包含所述目标样式标识;第二显示单元,用于根据所述第二页面代码和所述第一样式代码显示所述第二目标页面,其中,所述目标组件按照所述第一样式代码所指示的组件样式在所述第二目标页面中进行显示。
在一个示例性实施例中,所述装置还包括:标记单元,用于在所述获取与待显示的第一目标页面对应的第一页面代码之前,在页面图配置界面中显示的目标视觉图上标记出所述目标组件所在的目标组件区域,其中,所述页面图配置界面为配置页面的视觉图的界面,所述目标视觉图用于描述所述第一目标页面所包含的页面元素;添加单元,用于在所述组件区域上添加所述目标样式标识,其中,所述目标样式标识中包含所述目标组件的显示参数;保存单元,用于保存配置的所述目标视觉图,其中,所述第一页面代码是根据所述目标视觉图所编写的。
在一个示例性实施例中,所述装置还包括:第四获取单元,用于在所述根据所述第一页面代码和所述第一样式代码显示所述第一目标页面之后,获取与待显示的第三目标页面对应的第三页面代码,其中,所述第三目标页面中包含所述目标组件,所述第三页面代码中包含所述目标样式标识;第五获取单元,用于获取所述目标样式标识所标识的第三样式代码,其中,所述第三样式代码用于指示所述目标组件更新后的组件样式;第三显示单元,用于根据所述第三页面代码和所述第三样式代码显示所述第三目标页面,其中,所述目标组件按照所述第三样式代码所指示的组件样式在所述第三目标页面中进行显示。
根据本申请实施例的又一方面,还提供了一种计算机可读的存储介质,该计算机可读的存储介质中存储有计算机程序,其中,该计算机程序被设置为运行时执行上述前端页面的显示方法。
根据本申请实施例的又一方面,还提供了一种电子装置,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,其中,上述处理器通过计算机程序执行上述的前端页面的显示方法。
在本申请实施例中,采用统一管理前端页面样式的方式,通过获取与待显示的第一目标页面对应的第一页面代码,其中,第一目标页面中包含目标组件,第一页面代码中包含目标样式标识,目标样式标识用于标识与目标组件所对应的样式代码;获取目标样式标识所标识的第一样式代码,其中,第一样式代码用于指示目标组件的组件样式;根据第一页面代码和第一样式代码显示第一目标页面,其中,目标组件按照第一样式代码所指示的组件样式在第一目标页面中进行显示,由于统一管理前端页面样式,在页面代码中通过样式标识来标识页面中的组件的样式代码,在对页面样式进行处理时只需修改样式代码即可完成所有引用该样式代码的页面,可以实现减少页面样式代码的处理操作的目的,达到了提高页面样式的开发效率的技术效果,进而解决了相关技术中的前端页面的显示方法存在由于需要逐个处理前端页面的样式代码导致的页面样式的开发效率低的技术问题。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分,示出了符合本申请的实施例,并与说明书一起用于解释本申请的原理。
为了更清楚地说明本申请实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,对于本领域普通技术人员而言,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。
图1是根据本申请实施例的一种可选的前端页面的显示方法的硬件环境的示意图;
图2是根据本申请实施例的一种可选的前端页面的显示方法的流程示意图;
图3是根据本申请实施例的一种可选的前端页面的显示方法的示意图;
图4是根据本申请实施例的另一种可选的前端页面的显示方法的流程示意图;
图5是根据本申请实施例的一种可选的前端页面的显示装置的结构框图;
图6是根据本申请实施例的一种可选的电子装置的结构框图。
具体实施方式
为了使本技术领域的人员更好地理解本申请方案,下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分的实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都应当属于本申请保护的范围。
需要说明的是,本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
根据本申请实施例的一个方面,提供了一种前端页面的显示方法。可选地,在本实施例中,上述前端页面的显示方法可以应用于如图1所示的由终端102和服务器104所构成的硬件环境中。如图1所示,服务器104通过网络与终端102进行连接,可用于为终端或终端上安装的客户端提供服务(如应用服务等),可在服务器上或独立于服务器设置数据库,用于为服务器104提供数据存储服务。
上述网络可以包括但不限于以下至少之一:有线网络,无线网络。上述有线网络可以包括但不限于以下至少之一:广域网,城域网,局域网,上述无线网络可以包括但不限于以下至少之一:WIFI(Wireless Fidelity,无线保真),蓝牙。终端102可以并不限定于为PC、手机、平板电脑等。
本申请实施例的前端页面的显示方法可以由服务器104来执行,也可以由终端102来执行,还可以是由服务器104和终端102共同执行。其中,终端102执行本申请实施例的前端页面的显示方法也可以是由安装在其上的客户端来执行。
以由终端102来执行本实施例中的前端页面的显示方法为例,图2是根据本申请实施例的一种可选的前端页面的显示方法的流程示意图,如图2所示,该方法的流程可以包括以下步骤:
步骤S202,获取与待显示的第一目标页面对应的第一页面代码,其中,第一目标页面中包含目标组件,第一页面代码中包含目标样式标识,目标样式标识用于标识与目标组件所对应的样式代码。
本实施例中的前端页面的显示方法可以应用于将前端开发所设计的页面样式在终端设备(即,前述终端102)上进行显示的场景。在进行前端应用的开发时,页面样式的改动十分频繁,基本会覆盖到每一次的需求迭代之中。但事实上,多个不同前端页面的页面样式内容中有很大一部分是重复的,比如,文章标题在文章列表页、文章详情页、收藏列表页等的用户界面的表现是一致的,其中的样式内容也是一样的。但是,开发人员在开发不同页面时需要重复写多次同样的样式代码。
可选地,在本实施例中,可以通过统一管理页面样式的方式来减少重复代码,提高开发效率,并提高代码的可维护性。上述的页面样式可以是前端页面中的组件在对应的前端页面上所显示的样式,例如,标题样式、文本字体样式等,其可以通过样式代码来实现。上述的前端页面可以是各类终端上的显示页面,例如,手机、电脑、平板等终端上的内容推荐页、商品详情页等,本实施例中在此均不做限定。
在本实施例中,用户可以通过操作其终端设备上的应用或者其他方式触发显示前端页面。终端设备在检测到用于显示前端页面的触发操作之后,响应于检测到的触发操作,可以执行前端页面的显示流程。上述触发操作可以包括但不限于以下至少之一:触控操作,例如,点击操作、双击操作、长按操作、滑动操作等;语音输入操作,接收到的输入语音中可以包含触发显示前端页面内的关键词;或者其他类型的触发操作。上述前端页面可以是在终端设备的显示屏上所显示的页面,例如,第一目标页面。
响应于检测到的触发操作,终端设备可以从对应的后台服务器中获取到与待显示的第一目标页面所对应的第一页面代码。这里,第一目标页面可以是文章列表页、文章详情页、收藏列表页等待显示的前端页面,第一页面代码可以是基于HTML(Hyper Text MarkupLanguage,超文本标记语言)或者其他语言进行编写的、与第一目标页面对应的页面代码。
第一目标页面中可以包含有目标组件,该目标组件可以是在第一目标页面中显示的组件(例如,文章正标题、文章副标题等),该目标组件的组件样式可以通过与目标组件对应的样式代码进行限定,而组件样式描述了目标组件在第一目标页面中的显示方式,可以包括但不限于以下至少之一:字号,字体色值,字体,例如,文章正标题的组件样式可以是字号14px,字体的色值为#000000,加粗,斜体。第一页面代码中可以包含目标样式标识,通过该目标样式标识可以标识与目标组件所对应的样式代码。
例如,在用户点击手机终端上的“音乐推荐”按钮之后,手机终端会将当前显示页面更新为音乐推荐页(第一目标页面的一种示例)。响应于检测到的点击操作,手机终端可以向后台服务器发送音乐推荐页的显示请求,并从后台拉取与音乐推荐页对应的页面代码,在页面代码中可以包含音乐推荐页的页面正标题的样式标识。
步骤S204,获取目标样式标识所标识的第一样式代码,其中,第一样式代码用于指示目标组件的组件样式。
在本实施例中,为了能够按照与目标组件对应的组件样式显示目标组件,终端设备可以获取目标样式标识所标识的第一样式代码,这里的第一样式代码用于指示目标组件的组件样式。
终端设备获取目标样式标识所标识的样式代码的方式可以有多种,可以包括但不限于以下至少之一:本地获取,从其他设备获取。例如,终端设备可以预先从样式代码服务器获取样式代码数据包(即,获取多个样式代码),并将其保存在终端设备本地。终端设备可以使用目标代码标识从本地保存的多个样式代码中匹配出与第一样式代码。又例如,终端设备可以向样式代码服务器发送样式代码获取请求,该请求中可以携带有目标样式标识。服务器响应于接收到的样式代码获取请求,从样式代码数据库中查找到与目标样式标识匹配的第一样式代码,并将其返回给终端设备,终端设备可以接收样式代码服务器响应于样式代码获取请求所返回的第一样式代码。
需要说明的是,样式代码服务器与前述后台服务器可以是相同的服务器,也可以是不同的服务器;样式代码服务器可以是存储有各个组件的组件样式的样式代码的服务器;如果终端设备从本地保存的多个样式代码中没有找到与目标样式标识匹配出的样式代码,可以从样式代码服务器获取与目标样式标识匹配的样式代码。此外,终端设备还可以从其他设备(例如,其他终端设备、智能家居设备等)出获取与目标样式标识匹配的样式代码。本实施例中对此不做限定。
还需要说明的是,由于页面中组件的组件样式的样式代码在页面代码中是通过样式标识进行表示的,即使UI风格突然改版,开发人员也无需追溯到每个页面上去修改样式,避免了遗漏风险,提高了页面的可维护性。
例如,在获取到音乐推荐页的页面正标题的样式标识之后,手机终端可以从样式代码服务器出获取与页面正标题的样式标识匹配的样式代码。
步骤S206,根据第一页面代码和第一样式代码显示第一目标页面,其中,目标组件按照第一样式代码所指示的组件样式在第一目标页面中进行显示。
在本实施例中,在获取到第一页面代码和第一样式代码之后,终端设备可以根据第一页面代码和第一样式代码显示第一目标页面,其中,通过第一页面代码可以确定第一目标页面的页面资源的显示方式,例如,显示位置,排布方式等。根据第一样式代码,可以确定目标组件的组件样式,并按照页面资源的显示方式和目标组件的组件样式在显示终端上对第一目标页面进行显示。
需要说明的是,目标组件可以是一个或多个组件,不同组件的组件样式可以是相同的,也可以是不同的,不同的组件样式可以通过不同的组件标识进行标识;第一目标页面的页面资源可以是获取第一页面代码的同时获取的,也可以是在获取第一页面代码之后获取的,还可以是在其他实际获取的,本实施例中对此不做限定。
例如,在获取到音乐推荐页的页面代码和音乐推荐页的各个组件的组件样式的样式代码之后,依据页面代码和各个组件的组件样式的样式代码,可以在手机终端上显示出音乐推荐页。
通过上述步骤S202至步骤S206,获取与待显示的第一目标页面对应的第一页面代码,其中,第一目标页面中包含目标组件,第一页面代码中包含目标样式标识,目标样式标识用于标识与目标组件所对应的样式代码;获取目标样式标识所标识的第一样式代码,其中,第一样式代码用于指示目标组件的组件样式;根据第一页面代码和第一样式代码显示第一目标页面,其中,目标组件按照第一样式代码所指示的组件样式在第一目标页面中进行显示,解决了相关技术中的前端页面的显示方法存在由于需要逐个处理前端页面的样式代码导致的页面样式的开发效率低的技术问题,提高了页面样式的开发效率。
在一个示例性实施例中,获取目标样式标识所标识的第一样式代码,包括:
S11,向第一服务器发送第一请求消息,其中,第一服务器为存储样式代码的服务器,第一请求消息用于请求目标样式标识所标识的样式代码;
S12,接收第一服务器响应第一请求消息所返回的第一响应消息,其中,第一响应消息中携带有第一样式代码。
在本实施例中,目标组件的组件样式的样式代码可以是从样式代码服务器,即,第一服务器处获取的。终端设备可以向第一服务器发送第一请求消息(即,前述组件代码获取请求),这里的第一服务器中可以存储有与目标组件对应的样式代码、或者存储有与多个组件中的各个组件对应的样式代码,多个组件可以包含目标组件。
在接收到终端设备发送的第一请求消息之后,第一服务器可以从存储的样式代码中查找出目标样式标识所标识的样式代码(即,与目标样式标识匹配的样式代码),得到第一样式代码,并响应于第一请求消息,向终端设备返回携带有第一样式代码的第一响应消息。终端设备可以接收到第一服务器返回的第一响应消息,并从第一响应消息中提取出第一样式代码。
通过本实施例,通过从服务器侧获取样式标识所标识的样式代码,可以减少对终端设备存储资源的占用,同时提高前端页面中组件样式显示的准确性(避免样式代码已更新,但是未同步到终端设备的情况)。
在一个示例性实施例中,获取目标样式标识所标识的第一样式代码,包括:
S21,从预先存储的多个样式代码中获取与目标样式标识匹配的样式代码,得到第一样式代码。
在本实施例中,目标组件的组件样式的样式代码可以是从本地存储的样式代码中获取的。终端设备可以使用目标样式标识从预先存储的多个样式代码中查找,从多个样式代码中查找出与目标样式标识匹配的样式代码,得到第一样式代码。
可选地,在从预先存储的多个样式代码中查找样式代码时,终端设备可以首先确定多个样式代码是否过期,即,是否超过有效期限。如果多个样式代码已过期,终端设备可以从样式代码服务器(或者说,第一服务器)获取更新后的样式代码数据包,即,更新后的多个样式代码,并使用目标样式标识从更新后的多个样式代码中查找与目标样式标识匹配的样式代码。
需要说明的是,上述有效期限可以是以样式代码开始生效的时刻为起点的一段时间,也可以是以终端设备获取到样式代码的时刻为起点的一段时间。如果目标组件包含多个组件,可以首先确定与每个组件对应的样式标识,确定与多个组件对应的至少一个样式标识(每个样式标识可以对应至少一个组件),然后分别获取与每个样式标识对应的样式代码。对于多个样式标识,可以通过多个并行线程分别获取与每个样式标识对应的样式代码。
通过本实施例,从预先存储的样式代码中获取与当前样式标识匹配的样式代码,可以提高样式代码获取的效率,缩短前端页面显示所需的时间,提升前端页面显示的时效性。
在一个示例性实施例中,在从预先存储的多个样式代码中获取与目标样式标识匹配的样式代码之后,上述方法还包括:
S31,在第一样式代码的已生效时间大于或者等于目标时间阈值的情况下,向第二服务器发送第二请求消息,其中,第二服务器为存储样式代码的服务器,第二请求消息用于请求目标样式标识所标识的样式代码;
S32,接收第二服务器响应第二请求消息所返回的第二响应消息,其中,第二响应消息中携带有第二样式代码;
S33,将第一样式代码更新为第二样式代码,得到更新后的第一样式代码。
在本实施例中,对于本地存储的样式代码,可以监控样式代码的已生效时间,上述已生效时间可以是样式代码从开始生效的时刻(可以通过时间戳表示)到当前时刻(可以通过系统时间表示)的时间,也可以是终端设备获取到样式代码的时刻(可以通过时间戳表示)到当前时刻的时间。
如果第一样式代码的已生效时间达到目标时间阈值,可以认为第一样式代码已经过期,终端设备可以向第二服务器发送第二请求消息,第二请求消息中可以携带有目标样式标识,以请求获取目标样式标识所标识的最新样式代码。这里的第二服务器中可以是存储有样式代码的服务器(例如,前述样式代码服务器),其可以是与第一服务器相同的服务器,也可以是不同的服务器。
在接收到第二请求消息之后,第二服务器可以从存储的样式代码中查找出目标样式标识所标识的样式代码,得到第二样式代码(其与第一样式代码可以是相同的,也可以是不同的),并响应于第二请求消息,向终端返回携带有第二样式代码的第二响应消息。终端设备可以接收到第二服务器返回的第二响应消息,并从第二响应消息中提取出第二样式代码,使用该第二样式代码更新第一样式代码,得到更新后的第一样式代码。此后包含目标组件的前端页面中的目标组件可以按照更新后的第一样式代码进行显示。
需要说明的是,终端设备可以以数据包的形式同时更新多个样式代码,如果样式代码数据包的已生效时间大于或者等于目标时间阈值,可以向第二服务器发送第二请求消息,第二请求消息用于请求获取最新的样式代码数据包,从第二服务器接收到的第二响应消息中可以携带有更新后的样式代码数据包,将原有的样式代码数据包删除。此外,如果第二响应消息携带的是有更新的样式代码,则可以使用第二响应消息中携带的样式代码更新样式代码数据包,得到更新后的样式代码数据包。
还需要说明的是,如果第一样式代码没有更新(可以基于样式代码的版本号),第二服务器向终端设备返回的第二响应消息中可以携带有用于指示样式代码未更新的指示信息。基于上述指示信息,终端设备还可以重置第一样式代码的已生效时间。本实施例中对此不做限定。
通过本实施例,基于样式代码的已生效时间从服务器侧拉取最新的样式代码,可以提高前端页面中组件样式显示的准确性。
在一个示例性实施例中,在根据第一页面代码和第一样式代码显示第一目标页面之后,上述方法还包括:
S41,获取与待显示的第二目标页面对应的第二页面代码,其中,第二目标页面中包含目标组件,第二页面代码中包含目标样式标识;
S42,根据第二页面代码和第一样式代码显示第二目标页面,其中,目标组件按照第一样式代码所指示的组件样式在第二目标页面中进行显示。
在本实施例中,在终端设备上显示第一目标页面之后,用户可以通过操作其终端设备显示第二目标页面,第二目标页面可以是刷新的第一目标页面,也可以是与第一目标页面不同的其他页面。为了显示第二目标页面,终端设备可以采用与前述类似的方式获取与第二目标页面对应的第二页面代码。第二目标页面中也可以包含目标组件(例如,文本正标题),该目标组件的组件样式可以通过第二页面代码中的目标样式标识进行标识。
终端设备可以与前述类似的方式与目标样式标识匹配的样式代码,得到第一样式代码,并使用第二页面代码和第一样式代码显示第二目标页面,已经进行过描述的,在此不做赘述。
通过本实施例,不同页面中的相同组件可以通过页面代码中的样式标识使用相同的样式代码,样式代码只需要编写一次,在不同页面上进行显示时,直接调用对应的样式代码,可以提高开发效率。
在一个示例性实施例中,在获取与待显示的第一目标页面对应的第一页面代码之前,上述方法还包括:
S51,在页面图配置界面中显示的目标视觉图上标记出目标组件所在的目标组件区域,其中,页面图配置界面为配置页面的视觉图的界面,目标视觉图用于描述第一目标页面所包含的页面元素;
S52,在组件区域上添加目标样式标识,其中,目标样式标识中包含目标组件的显示参数;
S53,保存配置的目标视觉图,其中,第一页面代码是根据目标视觉图所编写的。
在本实施例中,在获取第一页面代码之前,可以通过页面图配置界面来配置与第一目标页面对应的视觉图,得到目标视觉图,而第一页面代码是根据目标视觉图进行编写的。
UI设计师(或者,其他相关人员)可以设计一套组件样式的UI规范,并标注每一条规范的标准,例如,文本正标题标注为:字号14px,字体色值#000000,加粗,斜体。前端开发工程师(或者,其他相关人员)可以维护一个统一的样式文件,根据UI规范设计样式的样式标识,可以是样式类名,样式标识中可以包含组件名称,还可以包含组件的显示参数。例如,文本正标题的样式类名可以设计为main-title:字号:xxx,字色:xxx,加粗,斜体。
UI设计师的设计工具(例如,可以是其终端设备上的设计程序)上的页面图配置界面可以显示第一目标页面的目标视觉图,UI设计师可以对目标视觉图进行配置。设计工具可以响应于检测到的配置操作,在目标视觉图上标记出目标组件所在的目标组件区域,例如,目标组件为文本正标题,在目标视觉图中的A区域。
UI设计师还可以在目标组件区域上添加目标样式标识,这里的目标样式标识中可以包含目标组件的组件名称,还可以包含有目标组件的显示参数,例如,UI设计师在设计视觉图时,给规范之内的样式标注,给标题样式标注为文本正标题main-title,或者,main-title:字号:14px,字色:#000000,加粗,斜体。
此外,UI设计师还可以配置第一目标页面中除了组件以外的其他页面元素,并通过点击保存按钮等执行保存操作,触发保存配置好的目标视觉图。响应于检测到的保存操作,设计工具可以对配置好的目标视觉图进行保存。前端开发工程师(或者,其他相关人员)根据配置好的目标视觉图开发第一目标页面时,只需在编写的第一页面代码中添加目标样式标识即可。
例如,前端开发工程师在根据视觉图开发页面时,只需要给相应的HTML标签标记为标准中维护的类名即可,比如,给一个文本主标题的HTML标签的类名标记为main-title。一旦出现UI风格的改版,前端开发工程师只需要修改样式文件中的标准代码即可,全局生效。
通过本实施例,通过在页面配置界面中配置页面的视觉图,在视觉图中标记组件区域,并添加样式标识,可以提高页面视觉图配置的便捷性,提升基于视觉图编写样式代码的效率。
在一个示例性实施例中,在根据第一页面代码和第一样式代码显示第一目标页面之后,上述方法还包括:
S61,获取与待显示的第三目标页面对应的第三页面代码,其中,第三目标页面中包含目标组件,第三页面代码中包含目标样式标识;
S62,获取目标样式标识所标识的第三样式代码,其中,第三样式代码用于指示目标组件更新后的组件样式;
S63,根据第三页面代码和第三样式代码显示第三目标页面,其中,目标组件按照第三样式代码所指示的组件样式在第三目标页面中进行显示。
在本实施例中,在终端设备上显示第一目标页面之后,用户可以通过操作其终端设备显示第三目标页面,第三目标页面可以是刷新的第一目标页面,也可以是与第一目标页面不同的其他页面。为了显示第三目标页面,终端设备可以采用与前述类似的方式获取与第三目标页面对应的第三页面代码。在第三目标页面中也可以包含目标组件(例如,文本正标题),该目标组件的组件样式可以通过第三页面代码中的目标样式标识进行标识。
终端设备可以与前述类似的方式与目标样式标识匹配的样式代码。由于样式代码服务器中与目标样式标识匹配的样式代码已发生更新,此时,目标样式标识所标识的样式代码为第三样式代码,因此,终端获取到的样式代码为第三样式代码。在获取到第三页面代码和第三样式代码之后,终端设备可以使用第三页面代码和第三样式代码显示第三目标页面,已经进行过描述,在此不做赘述。
通过本实施例,不同页面中的相同组件可以通过页面代码中的样式标识使用相同的样式代码,样式代码只需要编写一次,在不同页面上进行显示时,直接调用对应的样式代码,在样式代码修改时,可以全局生效,提高开发效率。
下面结合可选示例对本申请实施例中的前端页面的显示方法进行解释说明。在本可选示例中,前端页面为浏览器上的显示页面。
如果开发者在每个页面都单独编写符合UI表现的样式代码,或者复制其他页面中相同的样式代码,应用于目标页面,会存在以下问题:应用中会存在很多重复代码,增大应用体积,影响性能;重复编写样式代码影响开发效率;可维护性差,有样式改动需要追溯到每个页面单独修改。
本可选示例中提供了一种统一维护管理前端页面样式的方案,通过约定标准,统一共同的样式代码,一次编写全局可用,减少代码体积,提高开发效率,降低维护成本。
结合图3和图4,本可选示例中的前端页面的显示方法的流程可以包括以下步骤:
步骤S402,根据设计规范编写符合标准的样式代码。
UI设计师可以设计一套规范,并标注每一条规范的UI标准,比如,文本主标题、文本副标题、价格等对应的UI标准,适用于所有可以抽象成标准的组件,前端开发工程师根据制定的标准,编写符合标准的样式代码。
步骤S404,将样式代码定义为HTML标签类名。
前端开发工程师可以将样式代码定义为HTML标签类名,并与步骤S402中制定的标准一一对应。
步骤S406,在视觉图中标注符合标准的组件。
UI设计师在设计视觉图时,可以对页面中符合标准的组件给出规范之内的样式标注。
步骤S408,根据视觉图开发页面。
前端开发工程师根据视觉图开发前端页面,给符合标准HTML标签命名为步骤S404中定义的类名。
步骤S410,将样式代码引入本页面文件中进行使用。
前端开发工程师编写的样式代码统一管理在样式模块中,任意页面要使用标准,只需要将样式代码的文件引入到本页面文件即可,所有前端页面中符合标准的组件均受编写的样式代码影响,若有UI风格改版,修改样式代码即可。
通过本可选示例,通过约定UI标准,全局管理页面样式代码,可以减少重复代码,减小应用体积,提升运行性能;符合标准的样式代码只需编写一次,提高开发效率;需求变更需要更改样式时,只需要更改一处代码,全局生效,可维护性高。
需要说明的是,对于前述的各方法实施例,为了简单描述,故将其都表述为一系列的动作组合,但是本领域技术人员应该知悉,本申请并不受所描述的动作顺序的限制,因为依据本申请,某些步骤可以采用其他顺序或者同时进行。其次,本领域技术人员也应该知悉,说明书中所描述的实施例均属于优选实施例,所涉及的动作和模块并不一定是本申请所必须的。
通过以上的实施方式的描述,本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现,当然也可以通过硬件,但很多情况下前者是更佳的实施方式。基于这样的理解,本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质(如ROM(Read-Only Memory,只读存储器)/RAM(Random Access Memory,随机存取存储器)、磁碟、光盘)中,包括若干指令用以使得一台终端设备(可以是手机,计算机,服务器,或者网络设备等)执行本申请各个实施例所述的方法。
根据本申请实施例的另一个方面,还提供了一种用于实施上述前端页面的显示方法的前端页面的显示装置。图5是根据本申请实施例的一种可选的前端页面的显示装置的结构框图,如图5所示,该装置可以包括:
第一获取单元502,用于获取与待显示的第一目标页面对应的第一页面代码,其中,第一目标页面中包含目标组件,第一页面代码中包含目标样式标识,目标样式标识用于标识与目标组件所对应的样式代码;
第二获取单元504,与第一获取单元502相连,用于获取目标样式标识所标识的第一样式代码,其中,第一样式代码用于指示目标组件的组件样式;
第一显示单元506,与第二获取单元504相连,用于根据第一页面代码和第一样式代码显示第一目标页面,其中,目标组件按照第一样式代码所指示的组件样式在第一目标页面中进行显示。
需要说明的是,该实施例中的第一获取单元502可以用于执行上述步骤S202,该实施例中的第二获取单元504可以用于执行上述步骤S204,该实施例中的第一显示单元506可以用于执行上述步骤S206。
通过上述模块,获取与待显示的第一目标页面对应的第一页面代码,其中,第一目标页面中包含目标组件,第一页面代码中包含目标样式标识,目标样式标识用于标识与目标组件所对应的样式代码;获取目标样式标识所标识的第一样式代码,其中,第一样式代码用于指示目标组件的组件样式;根据第一页面代码和第一样式代码显示第一目标页面,其中,目标组件按照第一样式代码所指示的组件样式在第一目标页面中进行显示,解决了相关技术中的前端页面的显示方法存在由于需要逐个处理前端页面的样式代码导致的页面样式的开发效率低的技术问题,提高了页面样式的开发效率。
在一个示例性实施例中,第二获取单元,包括:
发送模块,用于向第一服务器发送第一请求消息,其中,第一服务器为存储样式代码的服务器,第一请求消息用于请求目标样式标识所标识的样式代码;
接收模块,用于接收第一服务器响应第一请求消息所返回的第一响应消息,其中,第一响应消息中携带有第一样式代码。
在一个示例性实施例中,第二获取单元,包括:
获取模块,用于从预先存储的多个样式代码中获取与目标样式标识匹配的样式代码,得到第一样式代码。
在一个示例性实施例中,上述装置还包括:
发送单元,用于在从预先存储的多个样式代码中获取与目标样式标识匹配的样式代码之后,在第一样式代码的已生效时间大于或者等于目标时间阈值的情况下,向第二服务器发送第二请求消息,其中,第二服务器为存储样式代码的服务器,第二请求消息用于请求目标样式标识所标识的样式代码;
接收单元,用于接收第二服务器响应第二请求消息所返回的第二响应消息,其中,第二响应消息中携带有第二样式代码;
更新单元,用于将第一样式代码更新为第二样式代码,得到更新后的第一样式代码。
在一个示例性实施例中,上述装置还包括:
第三获取单元,用于在根据第一页面代码和第一样式代码显示第一目标页面之后,获取与待显示的第二目标页面对应的第二页面代码,其中,第二目标页面中包含目标组件,第二页面代码中包含目标样式标识;
第二显示单元,用于根据第二页面代码和第一样式代码显示第二目标页面,其中,目标组件按照第一样式代码所指示的组件样式在第二目标页面中进行显示。
在一个示例性实施例中,上述装置还包括:
标记单元,用于在获取与待显示的第一目标页面对应的第一页面代码之前,在页面图配置界面中显示的目标视觉图上标记出目标组件所在的目标组件区域,其中,页面图配置界面为配置页面的视觉图的界面,目标视觉图用于描述第一目标页面所包含的页面元素;
添加单元,用于在组件区域上添加目标样式标识,其中,目标样式标识中包含目标组件的显示参数;
保存单元,用于保存配置的目标视觉图,其中,第一页面代码是根据目标视觉图所编写的。
在一个示例性实施例中,上述装置还包括:
第四获取单元,用于在根据第一页面代码和第一样式代码显示第一目标页面之后,获取与待显示的第三目标页面对应的第三页面代码,其中,第三目标页面中包含目标组件,第三页面代码中包含目标样式标识;
第五获取单元,用于获取目标样式标识所标识的第三样式代码,其中,第三样式代码用于指示目标组件更新后的组件样式;
第三显示单元,用于根据第三页面代码和第三样式代码显示第三目标页面,其中,目标组件按照第三样式代码所指示的组件样式在第三目标页面中进行显示。
此处需要说明的是,上述模块与对应的步骤所实现的示例和应用场景相同,但不限于上述实施例所公开的内容。需要说明的是,上述模块作为装置的一部分可以运行在如图1所示的硬件环境中,可以通过软件实现,也可以通过硬件实现,其中,硬件环境包括网络环境。
根据本申请实施例的又一个方面,还提供了一种存储介质。可选地,在本实施例中,上述存储介质可以用于执行本申请实施例中上述任一项前端页面的显示方法的程序代码。
可选地,在本实施例中,上述存储介质可以位于上述实施例所示的网络中的多个网络设备中的至少一个网络设备上。
可选地,在本实施例中,存储介质被设置为存储用于执行以下步骤的程序代码:
S1,获取与待显示的第一目标页面对应的第一页面代码,其中,第一目标页面中包含目标组件,第一页面代码中包含目标样式标识,目标样式标识用于标识与目标组件所对应的样式代码;
S2,获取目标样式标识所标识的第一样式代码,其中,第一样式代码用于指示目标组件的组件样式;
S3,根据第一页面代码和第一样式代码显示第一目标页面,其中,目标组件按照第一样式代码所指示的组件样式在第一目标页面中进行显示。
可选地,本实施例中的具体示例可以参考上述实施例中所描述的示例,本实施例中对此不再赘述。
可选地,在本实施例中,上述存储介质可以包括但不限于:U盘、ROM、RAM、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。
根据本申请实施例的又一个方面,还提供了一种用于实施上述前端页面的显示方法的电子装置,该电子装置可以是服务器、终端、或者其组合。
图6是根据本申请实施例的一种可选的电子装置的结构框图,如图6所示,包括处理器602、通信接口604、存储器606和通信总线608,其中,处理器602、通信接口604和存储器606通过通信总线608完成相互间的通信,其中,
存储器606,用于存储计算机程序;
处理器602,用于执行存储器606上所存放的计算机程序时,实现如下步骤:
S1,获取与待显示的第一目标页面对应的第一页面代码,其中,第一目标页面中包含目标组件,第一页面代码中包含目标样式标识,目标样式标识用于标识与目标组件所对应的样式代码;
S2,获取目标样式标识所标识的第一样式代码,其中,第一样式代码用于指示目标组件的组件样式;
S3,根据第一页面代码和第一样式代码显示第一目标页面,其中,目标组件按照第一样式代码所指示的组件样式在第一目标页面中进行显示。
可选地,通信总线可以是PCI(Peripheral Component Interconnect,外设部件互连标准)总线、或EISA(Extended Industry Standard Architecture,扩展工业标准结构)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示,图6中仅用一条粗线表示,但并不表示仅有一根总线或一种类型的总线。通信接口用于上述电子装置与其他设备之间的通信。
存储器可以包括RAM,也可以包括非易失性存储器(non-volatile memory),例如,至少一个磁盘存储器。可选地,存储器还可以是至少一个位于远离前述处理器的存储装置。
作为一种示例,上述存储器606中可以但不限于包括上述前端页面的显示装置中的第一获取单元502、第二获取单元504、以及第一显示单元506。此外,还可以包括但不限于上述前端页面的显示装置中的其他模块单元,本示例中不再赘述。
上述处理器可以是通用处理器,可以包含但不限于:CPU(Central ProcessingUnit,中央处理器)、NP(Network Processor,网络处理器)等;还可以是DSP(DigitalSignal Processing,数字信号处理器)、ASIC(Application Specific IntegratedCircuit,专用集成电路)、FPGA(Field-Programmable Gate Array,现场可编程门阵列)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。
可选地,本实施例中的具体示例可以参考上述实施例中所描述的示例,本实施例在此不再赘述。
本领域普通技术人员可以理解,图6所示的结构仅为示意,实施上述前端页面的显示方法的设备可以是终端设备,该终端设备可以是智能手机(如Android手机、iOS手机等)、平板电脑、掌上电脑以及移动互联网设备(Mobile Internet Devices,MID)、PAD等终端设备。图6其并不对上述电子装置的结构造成限定。例如,电子装置还可包括比图6中所示更多或者更少的组件(如网络接口、显示装置等),或者具有与图6所示的不同的配置。
本领域普通技术人员可以理解上述实施例的各种方法中的全部或部分步骤是可以通过程序来指令终端设备相关的硬件来完成,该程序可以存储于一计算机可读存储介质中,存储介质可以包括:闪存盘、ROM、RAM、磁盘或光盘等。
上述本申请实施例序号仅仅为了描述,不代表实施例的优劣。
上述实施例中的集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在上述计算机可读取的存储介质中。基于这样的理解,本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来,该计算机软件产品存储在存储介质中,包括若干指令用以使得一台或多台计算机设备(可为个人计算机、服务器或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。
在本申请的上述实施例中,对各个实施例的描述都各有侧重,某个实施例中没有详述的部分,可以参见其他实施例的相关描述。
在本申请所提供的几个实施例中,应该理解到,所揭露的客户端,可通过其它的方式实现。其中,以上所描述的装置实施例仅仅是示意性的,例如所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,单元或模块的间接耦合或通信连接,可以是电性或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例中所提供的方案的目的。
另外,在本申请各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以至少两个单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。
以上所述仅是本申请的优选实施方式,应当指出,对于本技术领域的普通技术人员来说,在不脱离本申请原理的前提下,还可以做出若干改进和润饰,这些改进和润饰也应视为本申请的保护范围。

Claims (10)

1.一种前端页面的显示方法,其特征在于,包括:
获取与待显示的第一目标页面对应的第一页面代码,其中,所述第一目标页面中包含目标组件,所述第一页面代码中包含目标样式标识,所述目标样式标识用于标识与所述目标组件所对应的样式代码;
获取所述目标样式标识所标识的第一样式代码,其中,所述第一样式代码用于指示所述目标组件的组件样式;
根据所述第一页面代码和所述第一样式代码显示所述第一目标页面,其中,所述目标组件按照所述第一样式代码所指示的组件样式在所述第一目标页面中进行显示。
2.根据权利要求1所述的方法,其特征在于,所述获取所述目标样式标识所标识的第一样式代码,包括:
向第一服务器发送第一请求消息,其中,所述第一服务器为存储样式代码的服务器,所述第一请求消息用于请求所述目标样式标识所标识的样式代码;
接收所述第一服务器响应所述第一请求消息所返回的第一响应消息,其中,所述第一响应消息中携带有所述第一样式代码。
3.根据权利要求1所述的方法,其特征在于,所述获取所述目标样式标识所标识的第一样式代码,包括:
从预先存储的多个样式代码中获取与所述目标样式标识匹配的样式代码,得到所述第一样式代码。
4.根据权利要求3所述的方法,其特征在于,在所述从预先存储的多个样式代码中获取与所述目标样式标识匹配的样式代码之后,所述方法还包括:
在所述第一样式代码的已生效时间大于或者等于目标时间阈值的情况下,向第二服务器发送第二请求消息,其中,所述第二服务器为存储样式代码的服务器,所述第二请求消息用于请求所述目标样式标识所标识的样式代码;
接收所述第二服务器响应所述第二请求消息所返回的第二响应消息,其中,所述第二响应消息中携带有第二样式代码;
将所述第一样式代码更新为所述第二样式代码,得到更新后的所述第一样式代码。
5.根据权利要求1所述的方法,其特征在于,在所述根据所述第一页面代码和所述第一样式代码显示所述第一目标页面之后,所述方法还包括:
获取与待显示的第二目标页面对应的第二页面代码,其中,所述第二目标页面中包含所述目标组件,所述第二页面代码中包含所述目标样式标识;
根据所述第二页面代码和所述第一样式代码显示所述第二目标页面,其中,所述目标组件按照所述第一样式代码所指示的组件样式在所述第二目标页面中进行显示。
6.根据权利要求1所述的方法,其特征在于,在所述获取与待显示的第一目标页面对应的第一页面代码之前,所述方法还包括:
在页面图配置界面中显示的目标视觉图上标记出所述目标组件所在的目标组件区域,其中,所述页面图配置界面为配置页面的视觉图的界面,所述目标视觉图用于描述所述第一目标页面所包含的页面元素;
在所述组件区域上添加所述目标样式标识,其中,所述目标样式标识中包含所述目标组件的显示参数;
保存配置的所述目标视觉图,其中,所述第一页面代码是根据所述目标视觉图所编写的。
7.根据权利要求1至6中任一项所述的方法,其特征在于,在所述根据所述第一页面代码和所述第一样式代码显示所述第一目标页面之后,所述方法还包括:
获取与待显示的第三目标页面对应的第三页面代码,其中,所述第三目标页面中包含所述目标组件,所述第三页面代码中包含所述目标样式标识;
获取所述目标样式标识所标识的第三样式代码,其中,所述第三样式代码用于指示所述目标组件更新后的组件样式;
根据所述第三页面代码和所述第三样式代码显示所述第三目标页面,其中,所述目标组件按照所述第三样式代码所指示的组件样式在所述第三目标页面中进行显示。
8.一种前端页面的显示装置,其特征在于,包括:
第一获取单元,用于获取与待显示的第一目标页面对应的第一页面代码,其中,所述第一目标页面中包含目标组件,所述第一页面代码中包含目标样式标识,所述目标样式标识用于标识与所述目标组件所对应的样式代码;
第二获取单元,用于获取所述目标样式标识所标识的第一样式代码,其中,所述第一样式代码用于指示所述目标组件的组件样式;
第一显示单元,用于根据所述第一页面代码和所述第一样式代码显示所述第一目标页面,其中,所述目标组件按照所述第一样式代码所指示的组件样式在所述第一目标页面中进行显示。
9.一种计算机可读的存储介质,其特征在于,所述计算机可读的存储介质包括存储的程序,其中,所述程序运行时执行权利要求1至7中任一项所述的方法。
10.一种电子装置,包括存储器和处理器,其特征在于,所述存储器中存储有计算机程序,所述处理器被设置为通过所述计算机程序执行权利要求1至7中任一项所述的方法。
CN202111470609.1A 2021-12-03 2021-12-03 一种前端页面的显示方法和装置、存储介质及电子装置 Pending CN114281326A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111470609.1A CN114281326A (zh) 2021-12-03 2021-12-03 一种前端页面的显示方法和装置、存储介质及电子装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111470609.1A CN114281326A (zh) 2021-12-03 2021-12-03 一种前端页面的显示方法和装置、存储介质及电子装置

Publications (1)

Publication Number Publication Date
CN114281326A true CN114281326A (zh) 2022-04-05

Family

ID=80870816

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111470609.1A Pending CN114281326A (zh) 2021-12-03 2021-12-03 一种前端页面的显示方法和装置、存储介质及电子装置

Country Status (1)

Country Link
CN (1) CN114281326A (zh)

Similar Documents

Publication Publication Date Title
US11403364B2 (en) Method and terminal device for extracting web page content
CN109725901B (zh) 前端代码的开发方法、装置、设备和计算机存储介质
CN106708480B (zh) 管理平台实现方法和装置
CN108399072B (zh) 应用页面更新方法和装置
CN110688598B (zh) 业务参数采集方法、装置、计算机设备和存储介质
CN104850546B (zh) 移动媒介信息的展示方法和系统
CN106293675B (zh) 系统静态资源加载方法及装置
CN109191158B (zh) 用户画像标签数据的处理方法及处理设备
CN104951508A (zh) 时间信息识别方法和装置
CN106649543A (zh) 记录阅读进度的方法、装置及终端
CN112650714B (zh) 文档展示方法、装置、设备及计算机可读介质
CN107515866B (zh) 一种数据操作方法、装置和系统
WO2021189766A1 (zh) 数据可视化方法及相关设备
CN111221711A (zh) 用户行为数据处理方法、服务器及存储介质
CN113419711A (zh) 页面引导方法、装置、电子设备及存储介质
CN108108381B (zh) 页面的监测方法及装置
US11126410B2 (en) Method and apparatus for building pages, apparatus and non-volatile computer storage medium
CN114281326A (zh) 一种前端页面的显示方法和装置、存储介质及电子装置
CN115758016A (zh) 网页内容静态化处理方法及系统
CN113723119B (zh) 页面翻译方法、装置和存储介质及电子设备
CN105808628A (zh) 网页转码方法、装置及系统
CN115033592A (zh) 基于数据库的sql语句处理方法、装置、设备及存储介质
CN114371848A (zh) 页面联调方法、装置、设备及存储介质
CN111026317A (zh) 用于确定用户操作的方法、装置及存储介质
CN105224539B (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