CN112615923A - 单页应用页面显示控制方法及装置、终端设备、服务器 - Google Patents

Abstract

本发明涉及单页应用技术领域，公开了一种单页应用页面显示控制方法、装置、终端设备、服务器以及计算机可读存储介质。本发明通过客户端若在单页应用接收到用户下发的页面显示指令，发送获取用户对应的路由组件信息请求至服务端，服务端在接收到客户端发送的获取用户对应的路由组件信息请求时，根据路由组件信息请求，获取用户对应的路由组件信息，并发送至客户端，进而客户端接收路由组件信息，并对路由组件信息进行持久化存储，进一步地，根据持久化存储的路由组件信息显示页面；解决了相关技术中单页应用页面显示控制合理性差的问题。

Description

单页应用页面显示控制方法及装置、终端设备、服务器

技术领域

本发明涉及报文检测技术领域，尤其涉及一种单页应用页面显示控制方法、装置、终端设备、服务器以及计算机可读存储介质。

背景技术

在前后端分离的Vue单页应用中，会根据对应的路由组件信息进行显示，在一过程中，要么是由前端单独控制，要么是由后端控制，而前端单独控制的配置性和安全性均较低，后端控制又面临着路由丢失导致页面无法正常显示的现象。

因此，如何能够合理的实现单页应用页面显示控制是函待解决的问题。

发明内容

本发明的主要目的在于提供单页应用页面显示控制方法、装置、终端设备、服务器以及计算机可读存储介质，旨在解决相关技术中单页应用页面显示控制合理性差的问题。

为实现上述目的，本发明提供一种单页应用页面显示控制方法，应用于客户端，所述单页应用页面显示控制方法包括以下步骤：

若在单页应用接收到用户下发的页面显示指令，发送获取所述用户对应的路由组件信息请求至服务端；

接收所述服务端发送的路由组件信息；

对所述路由组件信息进行持久化存储；

根据所述持久化存储的路由组件信息显示页面。

可选的，所述接收所述服务端发送的路由组件信息之后，所述对所述路由组件信息进行持久化存储的步骤之前，所述单页应用页面显示控制方法还包括：

接收所述服务端发送的所述路由组件信息中包含的路由组件对象对应的菜单树；

所述对所述路由组件信息进行持久化存储的步骤之后，根据所述持久化存储的路由组件信息显示页面的步骤之前，所述单页应用页面显示控制方法还包括：

将所述菜单树和路由组件信息进行关联持久化存储。

可选的，所述根据所述持久化存储的路由组件信息显示页面的步骤，包括：

根据所述路由组件信息中包含的路由组件对象，确定所述路由组件对象对应的页面数据；

根据所述菜单树，对所述页面数据进行加载渲染，显示所述页面。

可选的，所述若在单页应用接收到用户下发的页面显示指令，发送获取所述用户对应的路由组件信息请求至服务端的步骤之前，所述单页应用页面显示控制方法还包括：

将所述单页应用对应的各路由组件路径信息和路由组件名进行映射，生成映射表；

发送所述映射表至所述服务端，以使得所述服务端根据所述映射表，确定路由组件对象，并根据所述路由组件路径信息、所述路由组件路径信息对应的路由组件对象以及用户权限信息，生成预置路由表。

可选的，所述根据所述持久化存储的路由组件信息显示页面的步骤之前，所述单页应用页面显示控制方法还包括：

接收所述服务端发送的用户权限信息；

根据所述用户权限信息，确定所述页面的待显示功能；

所述根据所述持久化存储的路由组件信息显示页面的步骤，包括：

根据所述路由组件信息以及待显示功能，显示页面。

为实现上述目的，本发明提供一种单页应用页面显示控制方法，应用于服务端，所述单页应用页面显示控制方法包括以下步骤：

接收客户端发送的获取用户对应的路由组件信息请求；

根据所述路由组件信息请求，获取所述用户对应的路由组件信息；

发送所述路由组件信息至所述客户端，以使得所述客户端对所述路由组件信息进行持久化存储，并根据所述持久化存储的路由组件信息显示页面。

可选的，所述根据所述路由组件信息请求，获取所述用户对应的路由组件信息的步骤，包括：

根据所述路由组件信息请求，确定用户的身份信息；

根据所述用户的身份信息以及预置路由表，确定用户权限信息；

根据所述用户权限信息，从所述预置路由表中获取所述用户权限对应的路由组件信息。

可选的，所述接收客户端发送的获取所述用户对应的路由组件信息请求的步骤之前，所述单页应用页面显示控制方法还包括：

接收所述客户端发送的映射表；其中所述映射表为客户端将所述单页应用对应的路由组件路径信息和路由组件名进行映射生成的；

根据所述映射表，确定路由组件对象；

根据所述路由组件路径信息、所述路由组件路径信息对应的路由组件对象以及用户权限信息，生成预置路由表。

可选的，所述根据所述映射表，确定出路由组件对象的步骤之后，所述单页应用页面显示控制方法还包括：

根据所述映射表，确定所述路由组件对象对应的菜单树。

可选的，所述发送所述路由组件信息至所述客户端的步骤之后，所述单页应用页面显示控制方法还包括：

发送所述路由组件信息中包含的路由组件对象对应的菜单树至所述客户端，以使得所述客户端根据所述菜单树，对所述路由组件对象对应的页面数据进行加载渲染，显示所述页面。

可选的，所述发送所述路由组件信息至所述客户端的步骤之前，所述单页应用页面显示控制方法还包括：

接收页面待显示功能调整指令；

根据页面待显示功能调整指令，利用Vue框架的混入特性，对所述路由组件信息对应的页面的待显示功能进行调整。

此外，为实现上述目的，本发明还提供一种单页应用页面显示控制装置，应用于客户端，所述单页应用页面显示控制装置包括：

第一发送模块，用于若在单页应用接收到用户下发的页面显示指令，发送获取所述用户对应的路由组件信息请求至服务端；

第一接收模块，用于接收所述服务端发送的路由组件信息；

存储模块，用于对所述路由组件信息进行持久化存储；

显示模块，用于根据所述持久化存储的路由组件信息显示页面。

可选的，所述第一接收模块，还用于接收所述服务端发送的所述路由组件信息对应的菜单树；

所述存储模块，还用于将所述菜单树和路由组件信息进行关联持久化存储。

可选的，所述显示模块，还用于根据所述路由组件信息中的路由组件对象，确定所述路由组件对象对应的页面数据；根据所述菜单树，对所述页面数据进行加载渲染，显示所述页面。

可选的，所述单页应用页面显示控制装置还包括：

第一生成模块，用于将所述单页应用对应的路由组件路径信息和路由组件名进行映射，生成映射表；

所述第一发送模块，还用于发送所述映射表至所述服务端，以使得所述服务端根据所述映射表，确定路由组件对象，并根据所述路由组件对象以及用户权限信息，生成预置路由表。

此外，为实现上述目的，本发明还提供一种单页应用页面显示控制装置，应用于服务端，所述单页应用页面显示控制装置包括：

第二接收模块，用于接收客户端发送的获取用户对应的路由组件信息请求；

获取模块，用于根据所述路由组件信息请求，获取所述用户对应的路由组件信息；

第二发送模块，用于发送所述路由组件信息至所述客户端，以使得所述客户端对所述路由组件信息进行持久化存储，并根据所述持久化存储的路由组件信息显示页面。

可选的，所述获取模块，还用于根据所述路由组件信息请求，确定用户的身份信息；根据所述用户的身份信息以及预置路由表，确定用户权限信息；根据所述用户权限信息，从所述预置路由表中获取所述用户权限对应的路由组件信息。

可选的，所述第二接收模块，还用于接收所述客户端发送的映射表；其中所述映射表为客户端将所述单页应用对应的路由组件路径信息和路由组件名进行映射生成的；

所述单页应用页面显示控制装置还包括：第二生成模块，用于根据所述映射表，确定路由组件对象；根据所述路由组件对象以及用户权限信息，生成预置路由表。

可选的，所述单页应用页面显示控制装置还包括：确定模块，用于根据所述映射表，确定所述路由组件对象对应的菜单树。

此外，为实现上述目的，本发明还提供一种终端设备，所述终端设备包括：存储器、处理器及存储在所述存储器上并在所述处理器上运行单页应用页面显示控制程序，所述单页应用页面显示控制程序被所述处理器执行时实现如上文所述的单页应用页面显示控制方法的步骤。

此外，为实现上述目的，本发明还提供一种服务器，所述服务器包括：存储器、处理器及存储在所述存储器上并在所述处理器上运行单页应用页面显示控制程序，所述单页应用页面显示控制程序被所述处理器执行时实现如上文所述的单页应用页面显示控制方法的步骤。

此外，为实现上述目的，本发明还提出一种计算机可读存储介质，所述计算机可读存储介质上存储有单页应用页面显示控制程序，所述单页应用页面显示控制程序被处理器执行时实现如上文所述的单页应用页面显示控制方法的步骤。

本发明提供的技术方案，通过客户端若在单页应用接收到用户下发的页面显示指令，发送获取用户对应的路由组件信息请求至服务端，服务端在接收到客户端发送的获取用户对应的路由组件信息请求时，根据路由组件信息请求，获取用户对应的路由组件信息，并发送至客户端，进而客户端接收路由组件信息，并对路由组件信息进行持久化存储，进一步地，根据持久化存储的路由组件信息显示页面；解决了相关技术中单页应用页面显示控制合理性差的问题。

也即本发明提供的技术方案，通过客户端、服务端前后两端共同协作来获取路由组件信息进而进行显示，相对于客户端(即前端)单独控制而言，提升了配置性和安全性，相对于服务端(即后端)单独控制而言，避免了路由丢失导致的页面无法正常显示的现象，保证了单页应用页面能够正常显示；故，提升了单页应用页面显示控制的合理性。

附图说明

图1是本发明实施例方案涉及的硬件运行环境的终端设备和/或服务器结构示意图；

图2为本发明单页应用页面显示控制第一实施例的流程示意图；

图3为本发明单页应用页面显示控制第二实施例的流程示意图；

图4为本发明单页应用页面显示控制第三实施例的流程示意图；

图5为本发明单页应用页面显示控制第四实施例的流程示意图；

图6为本发明单页应用页面显示控制第五实施例的流程示意图；

图7为本发明应用于客户端的单页应用页面显示控制装置第一实施例的结构框图；

图8为本发明应用于服务端的单页应用页面显示控制装置第二实施例的结构框图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

参照图1，图1为本发明实施例方案涉及的硬件运行环境的终端设备和/或服务器结构示意图。

终端设备和/或服务器包括：至少一个处理器101、存储器102以及存储在存储器上并可在处理器上运行的单页应用页面显示控制程序，单页应用页面显示控制程序配置为实现如下任一实施例的单页应用页面显示控制方法的步骤。

处理器101可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器101可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器101也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(CentralProcessingUnit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器101可以在集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。处理器101还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关单页应用页面显示控制方法操作，使得单页应用页面显示控制方法模型可以自主训练学习，提高效率和准确度。

存储器102可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器102还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储终端设备和/或服务器、闪存存储终端设备和/或服务器。在一些实施例中，存储器102中的非暂态的计算机可读存储介质用于存储至少一个指令，该至少一个指令用于被处理器101所执行以实现本申请中方法实施例提供的单页应用页面显示控制方法。

终端设备和/或服务器还可选包括有：通信接口103和至少一个外围设备。处理器101、存储器102和通信接口103之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与通信接口103相连。具体地，外围设备包括：射频电路104、显示屏105和电源106中的至少一种。

通信接口103可被用于将I/O(Input/Output，输入/输出)相关的至少一个外围设备连接到处理器101和存储器102。在一些实施例中，处理器101、存储器102和通信接口103被集成在同一芯片或电路板上；在一些其他实施例中，处理器101、存储器102和通信接口103中的任意一个或两个可以在单独的芯片或电路板上实现，本实施例对此不加以限定。

射频电路104用于接收和发射RF(Radio Frequency，射频)信号，也称电磁信号。射频电路104通过电磁信号与通信网络以及其他通信终端设备和/或服务器进行通信。射频电路104将电信号转换为电磁信号进行发送，或者，将接收到的电磁信号转换为电信号。可选地，射频电路104包括：天线系统、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路104可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于：城域网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity，无线保真)网络。在一些实施例中，射频电路104还可以包括NFC(Near Field Communication，近距离无线通信)有关的电路，本发明对此不加以限定。

显示屏105用于显示UI(User Interface，用户界面)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。当显示屏105是触摸显示屏时，显示屏105还具有采集在显示屏105的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器101进行处理。此时，显示屏105还可以用于提供虚拟按钮和/或虚拟键盘，也称软按钮和/或软键盘。在一些实施例中，显示屏105可以为一个，终端设备和/或服务器的前面板；在另一些实施例中，显示屏105可以为至少两个，分别设置在终端设备和/或服务器的不同表面或呈折叠设计；在一些实施例中，显示屏105可以是柔性显示屏，设置在终端设备和/或服务器的弯曲表面上或折叠面上。甚至，显示屏105还可以设置成非矩形的不规则图形，也即异形屏。显示屏105可以采用LCD(LiquidCrystal Display，液晶显示屏)、OLED(Organic Light-Emitting Diode，有机发光二极管)等材质制备。

电源106用于为终端设备和/或服务器中的各个组件进行供电。电源106可以是交流电、直流电、一次性电池或可充电电池。当电源106包括可充电电池时，该可充电电池可以支持有线充电或无线充电。该可充电电池还可以用于支持快充技术。

本领域技术人员可以理解，图1中示出的结构并不构成对终端设备和/或服务器的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

基于上述硬件结构，提出本发明的各实施例。

请参见图2，图2为本发明单页应用页面显示控制第一实施例的流程示意图，单页应用页面显示控制包括以下步骤：

步骤S20：客户端若在单页应用接收到用户下发的页面显示指令，发送获取用户对应的路由组件信息请求至服务端。

应当明确的是，最初开发web程序的时候，都是通过不同的html，js，css进行控制，但是随着react，angular，vue等页面框架的诞生，产生了单页面应用(single pageapplication)。单页面应用指的是构建web应用只有一个页面，这个页面不再是简单地把内容进行布局排序，而是作为web应用的容器；其里面可以包含诸多个子页面，通常将主页面对应的页面路径称之为根路径，将主页面包含的诸多个子页面对应的页面路径称之为子路径，并且各个子页面里还可以进一步包含诸多个子页面，即多层嵌套的页面形式。由于单页应用具有链接跳转时界面不会刷新应用的特点，因此用户在浏览或者点击跳转的时候感觉不到界面的跳转过程，从而无需等待，所以能极大地提高用户体验。

为了实现对单页应用的控制管理，这里不得不提到路由router，简单理解的话，可以把router当成一个工人，这个工人拿到一张由很多路由组件信息(route)组成的预置路由表(routes)，然后每一次用户请求页面变化时，工人(router)会逐条比对预置路由表(routes)上的路由组件信息(route)，遇到第一条匹配的路由组件信息就将对应的页面反馈给用户。

因此，本实施例中客户端若在单页应用接收到用户下发的页面显示指令时，即指的是用户通过下发页面显示指令使得客户端知晓用户此时在请求页面，进而客户端根据页面显示指令，发送获取用户对应的路由组件信息请求至服务端；其中路由组件信息请求中包含了用户的身份信息，例如可以是唯一标识用户身份信息的标识码等。

在一些示例中，客户端接收到的用户下发的页面显示指令可以是针对主页面包含的第一层子页面，即用户请求的页面是主页面包含的第一层子页面。

在一些示例中，客户端接收到的用户下发的页面显示指令也可以是针对主页面包含的多层子页面，即用户请求的页面是主页面包含的多层子页面嵌套的各子页面。

步骤S21：服务端接收客户端发送的获取用户对应的路由组件信息请求。

本实施例中，客户端发送获取用户对应的路由组件信息请求至服务端之后，相应地，服务端接收客户端发送的获取用户对应的路由组件信息请求。

步骤S22：服务端根据路由组件信息请求，获取用户对应的路由组件信息。

本实施例中，服务端接收到客户端发送的获取用户对应的路由组件信息请求之后，进而需要根据接收到的路由组件信息请求，获取用户对应的路由组件信息，即如上述所说明的，获取预置路由表(routes)上的路由组件信息(route)；应当明确的是，本实施例中的路由组件信息包括路由组件路径信息，其中路由组件路径信息指的是请求页面的路径，如上述所说明的，请求页面的路径为子路径。

本实施例中，服务端根据路由组件信息请求，获取用户对应的路由组件信息的步骤，可以包括以下步骤：

首先，服务端根据路由组件信息请求，确定用户的身份信息；

然后，服务端根据用户的身份信息以及预置路由表，确定用户权限信息；

再者，服务端根据用户权限信息，从预置路由表中获取用户权限对应的路由组件信息。

也即，本实施例中的服务端根据路由组件信息请求，确定用户的身份信息，具体地，可以是根据路由组件信息请求中包含的唯一标识用户身份信息的标识码，确定出用户的身份信息；进一步地，在预置路由表中查找用户的身份信息所对应的权限信息，进而根据用户权限信息，从预置路由表中获取用户权限对应的路由组件信息。

为了更好地理解，请参见表一所示，为一种预置路由表的示例。

表一

用户身份信息	用户权限	路由组件信息
			身份信息1	管理员	路由组件信息1
身份信息2	高级用户	路由组件信息2
			身份信息3	普通用户	路由组件信息3
……	……	……

举例说明，设服务端根据路由组件信息请求，确定用户的身份信息为身份信息1，进一步地，在如表一所示的预置路由表中查找用户的身份信息1所对应的权限信息，明显地，确定用户权限信息为管理员权限信息，进而根据管理员权限信息，从预置路由表中获取管理员权限信息对应的路由组件信息1。值得注意的是，在实际应用中，预置路由表可以根据具体应用场景做灵活调整。

在一些示例中，服务端根据路由组件信息请求，获取用户对应的路由组件信息的步骤之后，单页应用页面显示控制方法可以还包括以下步骤：

服务端判断在预设时间段内是否将用户对应的相同路由组件信息发送至客户端；

若是，则服务端发送包含已发送时间戳的信息至客户端；

若否，则服务端发送路由组件信息至客户端。

也即，本实施例中服务端根据路由组件信息请求，获取用户对应的路由组件信息的步骤之后，会判断在预设时间段内是否将用户对应的相同路由组件信息发送至客户端；如果判断在预设时间段内将用户对应的相同路由组件信息发送至客户端，则服务端可以不再发送用户对应的路由组件信息至客户端，而是发送包含已发送时间戳的信息至客户端，进而客户端可以根据时间戳找到与之关联的路由组件信息；如果判断在预设时间段内未将用户对应的路由组件信息发送至客户端，则服务端发送用户对应的路由组件信息至客户端。这样，便可以避免在预设时间段内相同路由组件信息的重复发送，从而导致客户端系统消耗的现象发生。

在一些示例中，服务端根据路由组件信息请求，获取用户对应的路由组件信息的步骤之后，也可以不对在预设时间段内是否将用户对应的相同路由组件信息发送至客户端过进行判断；即只要服务端接收到客户端发送的获取用户对应的路由组件信息请求，便直接根据该接收到的路由组件信息请求，获取用户对应的路由组件信息，进而将其发送至客户端。这样，能够在一定程度上提升发送路由组件信息的效率，从而提升客户端根据路由组件信息显示页面的效率。

步骤S23：服务端发送路由组件信息至客户端。

本实施例中，服务端根据路由组件信息请求，获取到用户对应的路由组件信息之后，进而将获取到的路由组件信息发送至客户端。

本实施例中，服务端发送路由组件信息至客户端的步骤，可以包括以下步骤：

首先，获取当前时间信息；

其次，根据当前时间信息生成时间戳；

再者，将时间戳与路由组件信息进行关联；

进而，发送关联后的时间戳与路由组件信息至客户端。

也即，本实施例中服务端为了能够客户端能够知晓路由组件信息的发送时间，因此服务端发送路由组件信息至客户端时，会首先获取当前时间信息，并根据当前时间信息生成时间戳，进而将时间戳与路由组件信息进行关联，进一步地，发送关联后的时间戳与路由组件信息至客户端。

步骤S24：客户端接收服务端发送的路由组件信息。

本实施例中，服务端发送路由组件信息至客户端之后，相应地，客户端接收服务端发送的路由组件信息，具体地，客户端接收服务端发送的关联后的时间戳与路由组件信息。

在一些示例中，客户端接收服务端发送的路由组件信息的步骤之后，客户端对路由组件信息进行持久化存储的步骤之前，单页应用页面显示控制方法可以还包括以下步骤：

客户端判断接收到的路由组件信息是否已经进行持久化存储；

若是，客户端对路由组件信息进行舍弃，或者，直接根据路由组件信息显示页面；

若否，客户端对路由组件信息进行持久化存储。

也即，本实施例中客户端接收服务端发送的路由组件信息的步骤之后，会判断接收到的路由组件信息是否已经进行持久化存储；如果判断接收到的路由组件信息已经进行过持久化存储，则客户端可以对该路由组件信息的进行舍弃，或者客户端直接根据该路由组件信息显示页面；如果判断接收到的路由组件信息未进行过持久化存储，则客户端此时对路由组件信息进行持久化存储。这样，便可以避免路由组件信息的重复持久化存储，从而导致客户端系统存储空间占用大的现象发生。

在一些示例中，客户端接收到服务端发送的路由组件信息之后，也可以不对接收到的路由组件信息是否已经进行持久化存储进行判断；即只要客户端接收到服务端发送的路由组件信息，便直接对路由组件信息进行持久化存储。这样，能够在一定程度上对路由组件信息进行持久化存储的效率，从而提升客户端根据路由组件信息显示页面的效率。

步骤S25：客户端对路由组件信息进行持久化存储。

由于相关技术中可能会由于网络变差或受到各种攻击等诸多因素的影响，导致客户端接收到的路由组件信息丢失，从而造成页面无法显示的现象；因此，本实施例中，客户端接收到服务端发送的路由组件信息之后，客户端对路由组件信息进行持久化存储，具体地，将关联后的时间戳与路由组件信息进行持久化存储。这样，便能够避免由于网络变差或受到各种攻击等诸多因素的影响，导致客户端接收到的路由组件信息丢失，从而造成页面无法显示现象的发生，保证了单页应用页面能够正常显示。

为了更好地理解，这里请参见表二所示，表二为将关联后的时间戳与路由组件信息进行持久化存储的示例。

表二

时间戳	路由组件信息
		时间戳T1	路由组件信息1
时间戳T2	路由组件信息2
		时间戳T3	路由组件信息3
……	……

其中，如表二所示，关联后的时间戳T1与路由组件信息1进行持久化存储，关联后的时间戳T2与路由组件信息2进行持久化存储，关联后的时间戳T3与路由组件信息3进行持久化存储；在实际应用中，可以根据具体应用场景做灵活调整。

在一些示例中，客户端对路由组件信息进行持久化存储的步骤之后，单页应用页面显示控制方法可以还包括以下步骤：

客户端根据时间戳判断与之关联的路由组件信息是否过期；

若是，则客户端对路由组件信息进行删除。

也即，本实施例中客户端对路由组件信息进行持久化存储的步骤之后，可以根据时间戳判断与之关联的路由组件信息是否过期；如果根据时间戳判断与之关联的路由组件信息已经过期，则客户端可以对路由组件信息进行删除。这样，便可以避免路由组件信息的时间过长的持久化存储，从而导致客户端系统存储空间占用大的现象发生。

在一些示例中，客户端对路由组件信息进行持久化存储的步骤之后，也可以不根据时间戳判断与之关联的路由组件信息是否过期。这样，能够在一定程度上减少客户端的工作量，从而减少了客户端系统消耗。

步骤S26：客户端根据持久化存储的路由组件信息显示页面。

本实施例中，客户端对路由组件信息进行持久化存储之后，进而便可以根据持久化存储的路由组件信息显示页面，使得单页应用页面能够正常显示，提升了用户的体验。

本实施例中，通过客户端若在单页应用接收到用户下发的页面显示指令，发送获取用户对应的路由组件信息请求至服务端，服务端在接收到客户端发送的获取用户对应的路由组件信息请求时，根据路由组件信息请求，获取用户对应的路由组件信息，并发送至客户端，进而客户端接收路由组件信息，并对路由组件信息进行持久化存储，进一步地，根据持久化存储的路由组件信息显示页面；解决了相关技术中单页应用页面显示控制合理性差的问题。

也即通过客户端、服务端前后两端共同协作来获取路由组件信息进而进行显示，相对于客户端(即前端)单独控制而言，提升了配置性和安全性，相对于服务端(即后端)单独控制而言，避免了路由丢失导致的页面无法正常显示的现象，保证了单页应用页面能够正常显示；故，提升了单页应用页面显示控制的合理性。

基于第一实施例，提出本发明单页应用页面显示控制的第二实施例；请参见图3所示，图3为本发明单页应用页面显示控制第二实施例的流程示意图。

在本实施例中，步骤S23服务端发送路由组件信息至客户端之后，单页应用页面显示控制方法还可以包括以下步骤：

步骤S27：服务端发送路由组件信息中包含的路由组件对象对应的菜单树至客户端。

应当明确的是，本实施例中的路由组件信息包括路由组件路径信息，以及路由组件对象，其中路由组件对象根据路由组件路径信息和路由组件名映射生成。

相应地，本实施例中步骤S24客户端接收服务端发送的路由组件信息之后，步骤S25客户端对路由组件信息进行持久化存储之前，单页应用页面显示控制还可以包括以下步骤：

步骤S28：客户端接收服务端发送的路由组件信息中包含的路由组件对象对应的菜单树。

相应地，本实施例中步骤S25客户端对路由组件信息进行持久化存储之后，步骤S26客户端根据持久化存储的路由组件信息显示页面之前，单页应用页面显示控制还可以包括以下步骤：

步骤S29：客户端将菜单树和路由组件信息进行关联持久化存储；

相应地，本实施例中步骤S26客户端根据持久化存储的路由组件信息显示页面，可以包括以下步骤：

步骤S261：客户端根据路由组件信息中包含的路由组件对象，确定路由组件对象对应的页面数据；

步骤S262：客户端根据菜单树，对页面数据进行加载渲染，显示页面。

也即，本实施例中服务端可以发送路由组件信息中包含的路由组件对象对应的菜单树至客户端，客户端在接收到服务端发送的路由组件信息中包含的路由组件对象对应的菜单树之后，进而将菜单树和路由组件信息进行关联持久化存储。

为了更好地理解，这里请参见表三所示，表三为将菜单树和路由组件信息进行关联持久化存储的示例。

表三

时间戳	路由组件信息	菜单树
			时间戳T1	路由组件信息1	菜单树1
时间戳T2	路由组件信息2	菜单树2
			时间戳T3	路由组件信息3	菜单树3
……	……	……

其中，如表三所示，菜单树1和路由组件信息1进行关联持久化存储，菜单树2和路由组件信息2进行关联持久化存储，菜单树3和路由组件信息3进行关联持久化存储；在实际应用中，可以根据具体应用场景做灵活调整。

为了提升页面数据加载渲染的效率，因此，本实施例中服务端可以预先生成路由组件信息中包含的路由组件对象对应的菜单树，其中菜单树是用于对路由组件对象对应的页面数据进行加载渲染的一种格式处理，这样客户端可以直接根据获取到的路由组件信息中包含的路由组件对象对应的菜单树，对页面数据进行加载渲染，从而提升显示页面的效率。

本实施例中，服务端生成路由组件信息中包含的路由组件对象对应的菜单树，并将其发送至客户端，进而客户端接收到服务端发送的路由组件信息中包含的路由组件对象对应的菜单树，并将菜单树和接收到服务端发送的路由组件信息进行关联持久化存储，进一步地，根据路由组件信息中的路由组件对象，确定路由组件对象对应的页面数据，进一步地，根据菜单树，对页面数据进行加载渲染，从而显示页面，在极大程度上提升了显示页面的效率。

基于上述各实施例，提出本发明单页应用页面显示控制的第三实施例；请参见图4所示，图4为本发明单页应用页面显示控制第三实施例的流程示意图。

在本实施例中，步骤S20客户端若在单页应用接收到用户下发的页面显示指令，发送获取用户对应的路由组件信息请求至服务端之前，单页应用页面显示控制还可以包括以下步骤：

步骤S30：客户端将单页应用对应的各路由组件路径信息和路由组件名进行映射，生成映射表；

步骤S31：客户端发送映射表至服务端。

也即，本实施例中客户端可以先设计好单页应用包含的页面，具体地，将单页应用对应的各路由组件路径信息和路由组件名进行映射，生成映射表，进而将其发送至服务端，由服务端根据映射表进行预置路由表的生成。这样，能够提升预置路由表生成的安全性，且能够随时对预置路由表进行配置，也提升了预置路由表的可配置性。

相应地，本实施例中步骤S21服务端接收客户端发送的获取用户对应的路由组件信息请求之前，单页应用页面显示控制方法还可以包括以下步骤：

步骤S32：服务端接收客户端发送的映射表；

步骤S33：服务端根据映射表，确定路由组件对象；

步骤S34：服务端根据路由组件路径信息、路由组件路径信息对应的路由组件对象以及用户权限信息，生成预置路由表。

也即，本实施例中服务端接收客户端发送的映射表，根据映射表中的路由组件路径信息和路由组件名确定路由组件对象，进而根据路由组件路径信息、路由组件路径信息对应的路由组件对象以及用户权限信息，生成预置路由表。

相应地，本实施例中步骤S33根据映射表，确定出路由组件对象之后，单页应用页面显示控制方法还可以包括以下步骤：

步骤S35：服务端根据映射表，确定路由组件对象对应的菜单树。

也即，本实施例中服务端不仅可以根据映射表中的路由组件路径信息和路由组件名确定路由组件对象，还可以确定路由组件对象对应的菜单树。这样客户端可以直接根据获取到的路由组件信息中包含的路由组件对象对应的菜单树，对页面数据进行加载渲染，从而提升显示页面的效率。

本实施例中，客户端将单页应用对应的各路由组件路径信息和路由组件名进行映射，生成映射表，并发送至服务端，进而由服务端根据映射表进行预置路由表的生成；提升了预置路由表生成的安全性，且能够随时对预置路由表进行配置，同时也提升了预置路由表的可配置性。

基于上述各实施例，提出本发明单页应用页面显示控制的第四实施例；请参见图5所示，图5为本发明单页应用页面显示控制第四实施例的流程示意图。

在本实施例中，步骤S26客户端根据持久化存储的路由组件信息显示页面之前，单页应用页面显示控制还可以包括以下步骤：

步骤S36：客户端接收服务端发送的用户权限信息；

步骤S37：客户端根据用户权限信息，确定页面的待显示功能。

也即，本实施例中客户端发送获取用户对应的路由组件信息请求至服务端，除了接收到服务端发送的路由组件信息之外，还可以接收到服务端发送的用户的权限信息，进而可以根据用户的权限信息，确定页面的待显示功能；其中页面的待显示功能与页面本身的特性相关，而与页面所对应的路由组件信息无关，例如用户权限为管理员，其对应的页面1的待显示功能包括删除、增加、修改、查找，用户权限为普通用户，其对应的页面1的待显示功能包括查找。

相应地，本实施例中步骤S26客户端根据持久化存储的路由组件信息显示页面，可以包括以下步骤：

步骤S261：客户端根据路由组件信息以及待显示功能，显示页面。

进一步地，客户端根据路由组件信息以及待显示功能，显示页面；例如如上述示例中，当用户权限为管理员时，客户端根据路由组件信息以及待显示功能删除、增加、修改、查找来显示页面，当用户权限为普通用户时，客户端根据路由组件信息以及待显示功能查找来显示页面。

本实施例中，客户端接收服务端发送的用户权限信息，并根据用户权限信息，确定页面的待显示功能，进而根据路由组件信息以及待显示功能，显示页面，实现了细粒度权限控制。

基于上述各实施例，提出本发明单页应用页面显示控制的第五实施例；请参见图6所示，图6为本发明单页应用页面显示控制第五实施例的流程示意图。

在本实施例中，步骤S23服务端发送路由组件信息至客户端之前，单页应用页面显示控制方法还可以包括以下步骤：

步骤S38：服务端接收页面待显示功能调整指令；

步骤S39：服务端根据页面待显示功能调整指令，利用Vue框架的混入特性，对路由组件信息对应的页面的待显示功能进行调整。

也即，本实施例中服务端可以接收相关管理工作人员下发的页面待显示功能调整指令，进而根据页面待显示功能调整指令，利用Vue框架的混入特性，对路由组件信息对应的页面的待显示功能进行调整，具体地，可以是通过混入特性的判断语句实现对页面的待显示功能的调整。这样，能够在用户权限发生变化时，快速实现对页面的待显示功能进行调整，冗余度小，且实现了细粒度的权限控制。

本实施例中，服务端接收页面待显示功能调整指令，进而根据页面待显示功能调整指令，利用Vue框架的混入特性，对路由组件信息对应的页面的待显示功能进行调整，整个调整过程冗余度小，且在实现细粒度权限控制的同时提升了细粒度权限控制的效率。

请参见图7所示，图7为本发明应用于客户端的单页应用页面显示控制装置第一实施例的结构框图，其中单页应用页面显示控制装置包括：

第一发送模块70，用于若在单页应用接收到用户下发的页面显示指令，发送获取用户对应的路由组件信息请求至服务端；

第一接收模块71，用于接收服务端发送的路由组件信息；

存储模块72，用于对路由组件信息进行持久化存储；

显示模块73，用于根据持久化存储的路由组件信息显示页面。

需要说明的是，本实施例中应用于客户端的单页应用页面显示控制装置还可选的包括有对应的其他模块，以实现上述客户端侧单页应用页面显示控制的步骤。

本发明应用于客户端的单页应用页面显示控制装置采用了上述所有实施例的全部技术方案，因此至少具有上述实施例的技术方案所带来的所有有益效果，在此不再一一赘述。

请参见图8所示，图8为本发明应用于服务端的单页应用页面显示控制装置第一实施例的结构框图，其中单页应用页面显示控制装置包括：

第二接收模块80，用于接收客户端发送的获取用户对应的路由组件信息请求；

获取模块81，用于根据路由组件信息请求，获取用户对应的路由组件信息；

第二发送模块82，用于发送路由组件信息至客户端，以使得客户端对路由组件信息进行持久化存储，并根据持久化存储的路由组件信息显示页面。

需要说明的是，本实施例中应用于服务端的单页应用页面显示控制装置还可选的包括有对应的其他模块，以实现上述服务端侧单页应用页面显示控制的步骤。

本发明应用于服务端的单页应用页面显示控制装置采用了上述所有实施例的全部技术方案，因此至少具有上述实施例的技术方案所带来的所有有益效果，在此不再一一赘述。

此外，本发明实施例还提出一种计算机可读存储介质，计算机可读存储介质上存储有单页应用页面显示控制程序，单页应用页面显示控制程序被处理器执行时实现如上述客户端的单页应用页面显示控制的步骤，或者被处理器执行时实现如上述服务端的单页应用页面显示控制的步骤。

该计算机可读存储介质包括在用于存储信息(诸如计算机可读指令、数据结构、计算机程序模块或其他数据)的任何方法或技术中实施的易失性或非易失性、可移除或不可移除的介质。计算机可读存储介质包括但不限于RAM(Random Access Memory，随机存取存储器),ROM(Read-Only Memory，只读存储器),EEPROM(Electrically EraableProgrammable read only memory，带电可擦可编程只读存储器)、闪存或其他存储器技术、CD-ROM(Compact Disc Read-Only Memory，光盘只读存储器)，数字多功能盘(DVD)或其他光盘存储、磁盒、磁带、磁盘存储或其他磁存储装置、或者可以用于存储期望的信息并且可以被计算机访问的任何其他的介质。

可见，本领域的技术人员应该明白，上文中所公开方法中的全部或某些步骤、系统、装置中的功能模块/单元可以被实施为软件(可以用计算装置可执行的计算机程序代码来实现)、固件、硬件及其适当的组合。在硬件实施方式中，在以上描述中提及的功能模块/单元之间的划分不一定对应于物理组件的划分；例如，一个物理组件可以具有多个功能，或者一个功能或步骤可以由若干物理组件合作执行。某些物理组件或所有物理组件可以被实施为由处理器，如中央处理器、数字信号处理器或微处理器执行的软件，或者被实施为硬件，或者被实施为集成电路，如专用集成电路。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种单页应用页面显示控制方法，其特征在于，应用于客户端，所述单页应用页面显示控制方法包括以下步骤：

若在单页应用接收到用户下发的页面显示指令，发送获取所述用户对应的路由组件信息请求至服务端；

接收所述服务端发送的路由组件信息；

对所述路由组件信息进行持久化存储；

根据所述持久化存储的路由组件信息显示页面。

2.如权利要求1所述的单页应用页面显示控制方法，其特征在于，所述接收所述服务端发送的路由组件信息之后，所述对所述路由组件信息进行持久化存储的步骤之前，所述单页应用页面显示控制方法还包括：

接收所述服务端发送的所述路由组件信息中包含的路由组件对象对应的菜单树；

所述对所述路由组件信息进行持久化存储的步骤之后，根据所述持久化存储的路由组件信息显示页面的步骤之前，所述单页应用页面显示控制方法还包括：

将所述菜单树和路由组件信息进行关联持久化存储。

3.如权利要求2所述的单页应用页面显示控制方法，其特征在于，所述根据所述持久化存储的路由组件信息显示页面的步骤，包括：

根据所述路由组件信息中包含的路由组件对象，确定所述路由组件对象对应的页面数据；

根据所述菜单树，对所述页面数据进行加载渲染，显示所述页面。

4.一种单页面应用路由控制方法，其特征在于，应用于服务端，所述单页应用页面显示控制方法包括：

接收客户端发送的获取用户对应的路由组件信息请求；

根据所述路由组件信息请求，获取所述用户对应的路由组件信息；

发送所述路由组件信息至所述客户端，以使得所述客户端对所述路由组件信息进行持久化存储，并根据所述持久化存储的路由组件信息显示页面。

5.如权利要求4所述的单页应用页面显示控制方法，其特征在于，所述根据所述路由组件信息请求，获取所述用户对应的路由组件信息的步骤，包括：

根据所述路由组件信息请求，确定用户的身份信息；

根据所述用户的身份信息以及预置路由表，确定用户权限信息；

根据所述用户权限信息，从所述预置路由表中获取所述用户权限对应的路由组件信息。

6.一种单页应用页面显示控制装置，其特征在于，应用于客户端，所述单页应用页面显示控制装置包括：

第一发送模块，用于若在单页应用接收到用户下发的页面显示指令，发送获取所述用户对应的路由组件信息请求至服务端；

第一接收模块，用于接收所述服务端发送的路由组件信息；

存储模块，用于对所述路由组件信息进行持久化存储；

显示模块，用于根据所述持久化存储的路由组件信息显示页面。

7.一种单页应用页面显示控制装置，其特征在于，应用于服务端，所述单页应用页面显示控制装置包括：

第二接收模块，用于接收客户端发送的获取用户对应的路由组件信息请求；

获取模块，用于根据所述路由组件信息请求，获取所述用户对应的路由组件信息；

第二发送模块，用于发送所述路由组件信息至所述客户端，以使得所述客户端对所述路由组件信息进行持久化存储，并根据所述持久化存储的路由组件信息显示页面。

8.一种终端设备，其特征在于，所述终端设备包括：存储器、处理器及存储在所述存储器上并在所述处理器上运行单页应用页面显示控制程序，所述单页应用页面显示控制程序被所述处理器执行时实现如权利要求1-3中任一项所述的单页应用页面显示控制方法的步骤。

9.一种服务器，其特征在于，所述服务器包括：存储器、处理器及存储在所述存储器上并在所述处理器上运行单页应用页面显示控制程序，所述单页应用页面显示控制程序被所述处理器执行时实现如权利要求4-5中任一项所述的单页应用页面显示控制方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有单页应用页面显示控制程序，所述单页应用页面显示控制程序被处理器执行时实现如权利要求1-3中任一项所述的单页应用页面显示控制方法的步骤，或实现如权利要求4-5中任一项所述的单页应用页面显示控制方法的步骤。

Images