页面数据的展示方法、存储介质以及电子装置制造方法及图纸

技术编号:33042872 阅读:13 留言:0更新日期:2022-04-15 09:24
本申请公开了一种页面数据的展示方法、存储介质以及电子装置。该方法包括:在打开应用程序的情况下,通过当前页面的组件向状态管理库发送数据请求指令;每个组件通过预设接口获取状态管理库中的已订阅的状态数据,并根据已订阅的状态数据在当前页面上展示数据。通过本申请,解决了相关技术中数据交互逻辑复杂并且重复的交互数据冗余,导致数据展示和维护的效率低的问题。率低的问题。率低的问题。

【技术实现步骤摘要】
页面数据的展示方法、存储介质以及电子装置


[0001]本申请涉及页面展示领域,具体而言,涉及一种页面数据的展示方法、存储介质以及电子装置。

技术介绍

[0002]在传统的Web开发过程中,前端展示和后端数据之间的耦合性太强,随着前端页面数量的增加以及前后端数据交互越来越多,给开发人员带来很大的维护压力也随之增多,在进行一个很小的功能改动时,就需要从服务端、JSP页面、JS交互方面进行调整,导致耗费了更多的时间和精力。
[0003]在现代的Web开发过程中,前后端分离的更加彻底。前后台交互时,前端向服务器端发送Ajax请求,后端则根据约定好的数据结构将数据返回给前端,由前端进行解析、展示。这种方式相较于传统Web开发而言,已经在很大程度上减小了前端展示和后端数据之间的耦合性,但是,在前后端交互较多的页面里,充斥着大量发送Ajax请求的代码,可读性和可维护性较差,并且对后端返回的数据没有集中管理,每个数据由各个页面自行存取和维护,同时在获取通用数据的时候也需要各个页面进行自行存取,存在冗余逻辑和资源浪费,由于数据与页面一一对应,同时缺少必要的数据缓存机制,导致在页面关闭(销毁)后再次打开时会出现短暂的无数据状态。
[0004]针对相关技术中数据交互逻辑复杂并且重复的交互数据冗余,导致数据展示和维护的效率低的问题,目前尚未提出有效的解决方案。

技术实现思路

[0005]本申请提供一种页面数据的展示方法、存储介质以及电子装置,以解决相关技术中数据交互逻辑复杂并且重复的交互数据冗余,导致数据展示和维护的效率低的问题。
[0006]根据本申请的一个方面,提供了一种页面数据的展示方法。该方法包括:在打开应用程序的情况下,通过当前页面的组件向状态管理库发送数据请求指令,其中,状态管理库用于存储应用程序的状态数据,状态管理库通过数据请求指令触发数据调取指令,以从后端数据库调取状态数据;每个组件通过预设接口获取状态管理库中的已订阅的状态数据,并根据已订阅的状态数据在当前页面上展示数据。
[0007]可选地,状态管理库中采用状态树存储应用程序的状态数据,状态数据包括ID信息和数据值,每个组件发送的数据请求指令中携带有ID信息。
[0008]可选地,在打开应用程序的情况下,通过当前页面的组件向状态管理库发送数据请求指令包括:在加载当前页面的过程中,通过当前页面的各个组件向状态管理库发送数据请求指令;或在检测到针对当前页面的目标组件的更新指令的情况下,通过目标组件向状态管理库发送数据请求指令。
[0009]可选地,在每个组件通过预设接口获取状态管理库中的已订阅的状态数据,并根据已订阅的状态数据在当前页面上展示数据之后,该方法还包括:响应接收到的页面切换
指令,将当前页面切换至目标页面;通过目标页面的各个组件向状态管理库发送数据请求指令;每个组件通过预设接口获取状态管理库中的已订阅的状态数据,并根据已订阅的状态数据在目标页面上展示数据。
[0010]根据本申请的一方面,提供了一种页面数据的展示方法。该方法包括:在打开应用程序的情况下,加载状态管理库,并通过状态管理库接收当前页面的组件发送的数据请求指令;确定数据请求的类型,并根据数据请求的类型确定处理函数;通过处理函数从应用程序的后端数据库调取数据,基于调取的数据确定状态数据,并缓存状态数据,其中,状态数据是数据请求所请求的数据;向已订阅状态数据的组件发送通知消息,以通知组件通过状态数据更新展示数据。
[0011]可选地,状态管理库中采用状态树存储应用程序的状态数据,状态数据包括ID信息、请求状态以及数据值,通过处理函数从应用程序的后端数据库调取数据,基于调取的数据确定状态数据,并缓存状态数包括:获取数据请求中的ID信息,并获取状态树中的ID信息;将状态树中ID信息对应的请求状态确定为等待响应状态,并从后端数据库调取ID信息对应的数据值;将状态树中ID信息对应的状态值确定为请求完成状态,并根据调取的数据值更新ID信息对应的数据值。
[0012]可选地,根据调取的数据值更新ID信息对应的数据值包括:检测数据请求指令中是否携带有数据计算函数;在数据请求指令中未携带数据计算函数的情况下,根据调取的数据值更新ID信息对应的数据值;在数据请求指令中携带数据计算函数的情况下,通过数据计算函数对ID信息对应的数据值进行计算,得到计算后的数据值,并根据计算后的数据值更新ID信息对应的数据值。
[0013]可选地,在向已订阅状态数据的组件发送通知消息,以通知组件通过状态数据更新展示数据之后,该方法还包括:在接收到应用程序的关闭指令的情况下,销毁状态管理库。
[0014]根据本专利技术实施例的另一方面,还提供了一种非易失性存储介质,非易失性存储介质包括存储的程序,其中,程序运行时控制非易失性存储介质所在的设备执行一种页面数据的展示方法。
[0015]根据本专利技术实施例的另一方面,还提供了一种电子装置,包含处理器和存储器;存储器中存储有计算机可读指令,处理器用于运行计算机可读指令,其中,计算机可读指令运行时执行一种页面数据的展示方法。
[0016]通过本申请,采用以下步骤:在打开应用程序的情况下,通过当前页面的组件向状态管理库发送数据请求指令,其中,状态管理库用于存储应用程序的状态数据,状态管理库通过数据请求指令触发数据调取指令,以从后端数据库调取状态数据;每个组件通过预设接口获取状态管理库中的已订阅的状态数据,并根据已订阅的状态数据在当前页面上展示数据。解决了相关技术中数据交互逻辑复杂并且重复的交互数据冗余,导致数据展示和维护的效率低的问题。通过使用状态管理库进行数据交互和存储,简化了获取数据的请求指令,并且使得不同的数据请求可以通过相同的数据进行响应,进而达到了简化数据交互逻辑并且减少数据存储量,从而提高数据展示和维护效率的效果。
附图说明
[0017]构成本申请的一部分的附图用来提供对本申请的进一步理解,本申请的示意性实施例及其说明用于解释本申请,并不构成对本申请的不当限定。在附图中:
[0018]图1是根据本申请实施例提供的一个页面数据的展示方法的流程图;
[0019]图2是根据本申请实施例提供的另一个页面数据的展示方法的流程图;
[0020]图3是根据本申请实施例提供的可选的页面数据的展示方法的流程图;
[0021]图4是根据本申请实施例提供的一个页面数据的展示装置的示意图;
[0022]图5是根据本申请实施例提供的另一个页面数据的展示装置的示意图;
具体实施方式
[0023]需要说明的是,在不冲突的情况下,本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。
[0024]为了使本
的人员更好地理解本申请方案,下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分的实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种页面数据的展示方法,其特征在于,包括:在打开应用程序的情况下,通过当前页面的组件向状态管理库发送数据请求指令,其中,所述状态管理库用于存储所述应用程序的状态数据,所述状态管理库通过所述数据请求指令触发数据调取指令,以从后端数据库调取状态数据;每个组件通过预设接口获取所述状态管理库中的已订阅的状态数据,并根据所述已订阅的状态数据在所述当前页面上展示数据。2.根据权利要求1所述的方法,其特征在于,所述状态管理库中采用状态树存储所述应用程序的状态数据,所述状态数据包括ID信息和数据值,每个组件发送的所述数据请求指令中携带有ID信息。3.根据权利要求1所述的方法,其特征在于,在打开应用程序的情况下,通过当前页面的组件向状态管理库发送数据请求指令包括:在加载所述当前页面的过程中,通过所述当前页面的各个组件向所述状态管理库发送所述数据请求指令;或在检测到针对所述当前页面的目标组件的更新指令的情况下,通过所述目标组件向所述状态管理库发送所述数据请求指令。4.根据权利要求1所述的方法,其特征在于,在每个组件通过预设接口获取所述状态管理库中的已订阅的状态数据,并根据所述已订阅的状态数据在所述当前页面上展示数据之后,所述方法还包括:响应接收到的页面切换指令,将所述当前页面切换至目标页面;通过所述目标页面的各个组件向所述状态管理库发送数据请求指令;每个组件通过预设接口获取所述状态管理库中的已订阅的状态数据,并根据所述已订阅的状态数据在所述目标页面上展示数据。5.一种页面数据的展示方法,其特征在于,包括:在打开应用程序的情况下,加载状态管理库,并通过所述状态管理库接收当前页面的组件发送的数据请求指令;确定所述数据请求的类型,并根据所述数据请求的类型确定处理函数;通过所述处理函数从所述应用程序的后端数据库调取数据,基于调取的数据确定状态数据,并缓存所述状态数据,其中,所述状态数据是所述数据请求所请求的数据;向已订阅所...

【专利技术属性】
技术研发人员:邱星宇谢王梅鲁倍辰张静朱明宇
申请(专利权)人:山石网科通信技术股份有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1