一种数据展示方法及相关装置与流程

1.本技术涉及计算机技术领域，特别涉及一种数据展示方法、数据展示装置、计算设备以及计算机可读存储介质。


背景技术：

2.随着信息技术的不断发展，关于设备的各项参数或数据均可以通过相应的管理软件进行显示和操作，提高进行管理和操作的效率。
3.相关技术中，针对大量数据的表格呈现上，基于显式分页的设计，通过对表格下方分页组件的操作进行页面数据的请求及渲染。其中，数据的更新机制是重新进行第一页或者当前页码的重新发起后台请求，只能更新当前所要显示的全部数据，增加数据展示的时延，降低数据展示的效率，降低用户体验，降低响应速度。
4.因此，如何降低表格数据展示的时延，提高响应速度是本领域技术人员关注的重点问题。


技术实现要素：

5.本技术的目的是提供一种数据展示方法、数据展示装置、计算设备以及计算机可读存储介质，以降低页面展示数据的时延，提高页面数据响应速度。
6.为解决上述技术问题，本技术提供一种数据展示方法，包括：
7.发送页面数据请求，并根据接收到的页面数据进行页面渲染；
8.判断滚动高度是否小于等于预设高度；
9.若是，则发送新页面数据请求，以便服务器根据所述新页面数据请求返回新页面数据；
10.将所述新页面数据渲染为虚拟页面；
11.当页面滚动至下一页面时，显示所述虚拟页面。
12.可选的，发送页面数据请求，并根据接收到的页面数据进行页面渲染，包括：
13.根据客户端浏览器的高度确定请求页面总数；
14.根据所述请求页面总数发送页面数据请求，以便服务器返回对应的页面数据；
15.采用所述页面数据进行渲染。
16.可选的，根据客户端浏览器的高度确定请求页面总数，包括：
17.采用表格元素行高和每页显示条数对所述客户端浏览器的高度进行计算，得到所述请求页面总数。
18.可选的，判断滚动高度是否小于等于预设高度，包括：
19.通过滚动事件监听函数判断所述滚动高度是否小于等于所述预设高度。
20.可选的，还包括：
21.接收服务端发送的操作类事件；
22.根据所述操作类事件对所述页面数据进行更新。
23.本技术还提供一种数据展示装置，包括：
24.当前页面渲染模块，用于发送页面数据请求，并根据接收到的页面数据进行页面渲染；
25.滚动高度判断模块，用于判断滚动高度是否小于等于预设高度；
26.页面数据预请求模块，用于当所述滚动高度小于等于所述预设高度时，发送新页面数据请求，以便服务器根据所述新页面数据请求返回新页面数据；
27.虚拟页面渲染模块，用于将所述新页面数据渲染为虚拟页面；
28.虚拟页面显示模块，用于当页面滚动至下一页面时，显示所述虚拟页面。
29.可选的，所述当前页面渲染模块，具体用于根据客户端浏览器的高度确定请求页面总数；根据所述请求页面总数发送页面数据请求，以便服务器返回对应的页面数据；采用所述页面数据进行渲染。
30.可选的，还包括：
31.监听更新模块，用于接收服务端发送的操作类事件；根据所述操作类事件对所述页面数据进行更新。
32.本技术还提供一种计算设备，包括：
33.存储器，用于存储计算机程序；
34.处理器，用于执行所述计算机程序时实现如上所述的数据展示方法的步骤。
35.本技术还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如上所述的数据展示方法的步骤。
36.本技术所提供的一种数据展示方法，包括：发送页面数据请求，并根据接收到的页面数据进行页面渲染；判断滚动高度是否小于等于预设高度；若是，则发送新页面数据请求，以便服务器根据所述新页面数据请求返回新页面数据；将所述新页面数据渲染为虚拟页面；当页面滚动至下一页面时，显示所述虚拟页面。
37.通过当滚动高度小于等于预设高度时，也就是即将展示下一页数据时，发送新页面数据请求，以便服务器根据所述新页面数据请求返回新页面数据，并将所述新页面数据渲染为虚拟页面，在滚动至下一页时显示该虚拟页面，实现将新的页面数据渲染为虚拟页面，而不是滚动至下一页面时再请求对应的页面数据，提高页面数据进行显示的响应速度，提高用户体验。
38.本技术还提供一种数据展示装置、计算设备以及计算机可读存储介质，具有以上有益效果，在此不做赘述。
附图说明
39.为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
40.图1为本技术实施例所提供的一种数据展示方法的流程图；
41.图2为本技术实施例所提供的一种数据展示装置的结构示意图。
具体实施方式
42.本技术的核心是提供一种数据展示方法、数据展示装置、计算设备以及计算机可读存储介质，以降低页面展示数据的时延，提高页面数据响应速度。
43.为使本技术实施例的目的、技术方案和优点更加清楚，下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
44.相关技术中，针对大量数据的表格呈现上，基于显式分页的设计，通过对表格下方分页组件的操作进行页面数据的请求及渲染。其中，数据的更新机制是重新进行第一页或者当前页码的重新发起后台请求，只能更新当前所要显示的全部数据，增加数据展示的时延，降低数据展示的效率，降低用户体验，降低响应速度。
45.因此，本技术提供一种数据展示方法，通过当滚动高度小于等于预设高度时，也就是即将展示下一页数据时，发送新页面数据请求，以便服务器根据所述新页面数据请求返回新页面数据，并将所述新页面数据渲染为虚拟页面，在滚动至下一页时显示该虚拟页面，实现将新的页面数据渲染为虚拟页面，而不是滚动至下一页面时再请求对应的页面数据，提高页面数据进行显示的响应速度，提高用户体验。
46.以下通过一个实施例，对本技术提供的一种数据展示方法进行说明。
47.请参考图1，图1为本技术实施例所提供的一种数据展示方法的流程图。
48.本实施例中，该方法可以包括：
49.s101，发送页面数据请求，并根据接收到的页面数据进行页面渲染；
50.本步骤旨在发送页面数据请求，并根据接收到的页面数据进行页面渲染。也就是渲染并显示当前查看的页面。
51.其中，发送页面数据请求的方式可以参考现有技术中发送页面数据请求的方式，在此不做具体限定。
52.进一步的，为了贴合客户端浏览器，提高用户体验，本步骤可以包括：
53.步骤1，根据客户端浏览器的高度确定请求页面总数；
54.步骤2，根据请求页面总数发送页面数据请求，以便服务器返回对应的页面数据；
55.步骤3，采用页面数据进行渲染。
56.可见，本可选方案中主要是对如何渲染当前页面数据进行说明。本可选方案中，根据客户端浏览器的高度确定请求页面总数，根据请求页面总数发送页面数据请求，以便服务器返回对应的页面数据，采用页面数据进行渲染。很显然，本可选方案中主要是根据客户端浏览器的页面的参数确定对应的页面数据请求，也就是，根据当前的客户端浏览器的大小确定可以显示的请求页面总数，然后根据该请求页面总数发送对应的页面数据请求，以便获取到适合于该客户端浏览器的页面数据。
57.进一步的，上一可选方案中的步骤1可以包括：
58.采用表格元素行高和每页显示条数对客户端浏览器的高度进行计算，得到请求页面总数。
59.可见，本可选方案主要是说明如何计算得到该请求页面总数。
60.s102，判断滚动高度是否小于等于预设高度；
61.在s101的基础上，本步骤旨在判断滚动高度是否小于等于预设高度。也就是，判断用户当前预览页面是否即将预览到下一页面。若是，则可以在后台静默获取新的页面数据。
62.进一步的，本步骤可以包括：
63.通过滚动事件监听函数判断滚动高度是否小于等于预设高度。
64.可见，本可选方案中主要是通过滚动事件监听函数判断滚动高度是否小于等于预设高度。
65.s103，若是，则发送新页面数据请求，以便服务器根据新页面数据请求返回新页面数据；
66.在s102的基础上，本步骤旨在发送新页面数据请求，以便服务器根据新页面数据请求返回新页面数据。
67.s104，将新页面数据渲染为虚拟页面；
68.在s103的基础上，本步骤旨在将新页面数据渲染为虚拟页面。可见，通过本步骤中实施例中并不是将获取到的新页面数据直接进行渲染展示，而是渲染为虚拟页面，隐藏在后台中，当需要进行展示时才进行显示。
69.s105，当页面滚动至下一页面时，显示虚拟页面。
70.在s104的基础上，本步骤旨在当页面滚动至下一页面时，显示虚拟页面。也就是，在当前用户滚动到下一页面时，将后台的虚拟页面进行显示，而不是向服务器发送对应的新的页面的请求，直接显示在后台准备好的页面，提高页面响应的效率，提高用户体验。
71.进一步的，本实施例还可以包括：
72.步骤1，接收服务端发送的操作类事件；
73.步骤2，根据操作类事件对页面数据进行更新。
74.可见，本可选方案中主要是通过从服务器端订阅操作类事件，当接收到该操作类事件时，根据该操作类事件对页面数据进行更新。避免客户端为了更新数据而不断向服务器进行请求，提高数据更新的效率。
75.综上，本实施例通过当滚动高度小于等于预设高度时，也就是即将展示下一页数据时，发送新页面数据请求，以便服务器根据新页面数据请求返回新页面数据，并将新页面数据渲染为虚拟页面，在滚动至下一页时显示该虚拟页面，实现将新的页面数据渲染为虚拟页面，而不是滚动至下一页面时再请求对应的页面数据，提高页面数据进行显示的响应速度，提高用户体验。
76.以下通过一个具体的实施例，对本技术提供的一种数据展示方法做进一步说明。
77.本实施例中，首先在服务端监听且订阅所有事件的操作类，当监听的事件产生变化时，通过建立的websocket链接，实现服务端向客户端主动推送操作类事件的消息。然后在客户端接收服务端推送的操作类事件并完成事件在客户端的再次发布。接着，在客户端订阅客户端发布的事件主题，在回调函数中，识别并解析通知的事件类型，与当前表格已加载的数据进行对比，若在当前请求的页面数据内，如果是事件类型为新增，则通过排序规则将新的数据条目，插入到表格的对应位置；如果是修改则根据表格条目标识完成对该条目的修改；若为删除，则通过条目标识，对匹配的条目从表格中移除。
78.最后，在公共机制中，通过设置的默认参数，如表格数据行高、获取到的当前窗口的总高度，首先计算当前窗体需要呈现的数据总页数，进而发起对应页码请求先完成页面
数据的加载及呈现；其次初始化滚动监听函数，设立规则当滚动条高度小于给定值时，则主动向服务端发起新的页面请求完成页面数据的静态加载。
79.在具体的应用场景下，本实施例可以包括：
80.首先，单独定义客户端表格控件工具基类。
81.该基类中可以包括以下操作：
82.1、设定默认表格行高、每个页面要呈现的条目数，该参数可被具体的业务类进行复写，根据自身的业务进行定制化设置；
83.2、编写初始化函数，获取当前浏览器可用高度，根据可用高度、行高与每页呈现的条目数计算出当前窗体首次加载时，需要请求的总页面数，完成请求发送；
84.3、编写滚动事件监听函数，当滚动位置发生变化时，根据类中行高及每页显示的条目数与滚动距离底部的高度对比，判断是否需要发起新的页面数据请求；
85.4、编写其他函数，用户请求的回调响应及其他请求处理。
86.第二，单独定义客户端与服务端链接建立及事件处理基类。
87.该基类中可以包括以下操作：
88.1、客户端登录且经过服务端认证成功后，加载此类，在初始化函数中建立与服务端的请求链接，用户接收服务端推送的消息；
89.2、在接收消息的回调函数中，解析消息，识别出消息主题和事件主题，通过事件冒泡等机制，在客户端完成事件的发布。
90.第三，定义虚拟分页类基类。
91.该基类中可以包括以下操作：
92.1、默认定义监听的事件主题(可以继承的子类复写)，定义监听主题的回调函数；
93.2、判断已获取的通知消息主体的标识，判断是否在已有表格是否已加载，若未加载，则不在继续执行回调函数；
94.3、获取事件操作类型，并根据事件类型完成通知条目在表格中的更新：若类型为create，在通知条目标识在表格数据中进行排序，插入到合适位置；若为delete，则删除通知条目在表格中数据；若为modify，则直接更新表格中对应的条目数据，完成条目数据的单条更新。
95.第四，服务启动时在服务端初始化websocket链接，并监听订阅系统中操作类事件，可以包括以下功能：
96.1、订阅的服务端操作事件中，获取当前操作的对象实例化类；
97.具体操作，可以包括：获取实例化对象类：若是删除操作，可重新创建实例化对象，默认参数为空，将删除的对象标识进行重新赋值；根据对应操作，设置操作类型；将上述数据在服务端完成事件注册，通知已订阅该操作的工具类；
98.2、工具类根据接收的对象，按照规则定义该类主题；
99.3、获取事件类型，定义操作类型；
100.4、按照与客户端规定协议类型，对上述数据进行数据封装；
101.5、通过websocket连接，向客户端推送封装的数据。
102.最后，在具体的业务入口处，继承或者组合客户端表格控件工具类和分页基类，可重新定义具体的业务订阅的事件主题、行高及显示的每个行高等参数，实现具体业务与基
本工具类的解耦；当需要查看后续数据时，滑动滚动条，触发客户端工具类中滚动回调事件，完成新通知的条目及后续页面的请求和数据更新。
103.可见，本实施例通过当滚动高度小于等于预设高度时，也就是即将展示下一页数据时，发送新页面数据请求，以便服务器根据新页面数据请求返回新页面数据，并将新页面数据渲染为虚拟页面，在滚动至下一页时显示该虚拟页面，实现将新的页面数据渲染为虚拟页面，而不是滚动至下一页面时再请求对应的页面数据，提高页面数据进行显示的响应速度，提高用户体验。
104.下面对本技术实施例提供的数据展示装置进行介绍，下文描述的数据展示装置与上文描述的数据展示方法可相互对应参照。
105.请参考图2，图2为本技术实施例所提供的一种数据展示装置的结构示意图。
106.本实施例中，该装置可以包括：
107.当前页面渲染模块100，用于发送页面数据请求，并根据接收到的页面数据进行页面渲染；
108.滚动高度判断模块200，用于判断滚动高度是否小于等于预设高度；
109.页面数据预请求模块300，用于当滚动高度小于等于预设高度时，发送新页面数据请求，以便服务器根据新页面数据请求返回新页面数据；
110.虚拟页面渲染模块400，用于将新页面数据渲染为虚拟页面；
111.虚拟页面显示模块500，用于当页面滚动至下一页面时，显示虚拟页面。
112.可选的，该当前页面渲染模块，具体用于根据客户端浏览器的高度确定请求页面总数；根据请求页面总数发送页面数据请求，以便服务器返回对应的页面数据；采用页面数据进行渲染。
113.可选的，该装置，还可以包括：
114.监听更新模块，用于接收服务端发送的操作类事件；根据操作类事件对页面数据进行更新。
115.本技术实施例还提供一种计算设备，包括：
116.存储器，用于存储计算机程序；
117.处理器，用于执行所述计算机程序时实现如以上实施例所述的数据展示方法的步骤。
118.本技术实施例还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如以上实施例所述的数据展示方法的步骤。
119.说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
120.专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业
技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本技术的范围。
121.结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(ram)、内存、只读存储器(rom)、电可编程rom、电可擦除可编程rom、寄存器、硬盘、可移动磁盘、cd
‑
rom、或技术领域内所公知的任意其它形式的存储介质中。
122.以上对本技术所提供的一种数据展示方法、数据展示装置、计算设备以及计算机可读存储介质进行了详细介绍。本文中应用了具体个例对本技术的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本技术的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本技术原理的前提下，还可以对本技术进行若干改进和修饰，这些改进和修饰也落入本技术权利要求的保护范围内。