CN112612988A - 页面处理方法、装置、计算机设备及存储介质 - Google Patents

Abstract

本发明涉及数据传输优化应用领域，具体涉及应用的页面处理，能有效地兼顾页面的跳转成功率与安全性。方法部分包括：当拦截到从第一页面跳转至第二页面的页面跳转请求时，获取页面跳转请求所包含的表单信息，表单信息包括第一页面到第二页面的页面跳转参数信息；放行从第一页面跳转至第二页面的页面跳转请求，以从第一页面跳转至第二页面，并将页面跳转参数信息存储在参数数组中，参数数组为在vue.js项目的存储实例中所创建；当接收到从第二页面跳转至第三页面的页面跳转请求，以从第二页面跳转至第三页面；当接收到由第三页面跳转回第二页面的页面跳转请求时，从参数数组中读取页面跳转参数信息；通过页面跳转参数信息，从第三页面跳转回第二页面。

Description

页面处理方法、装置、计算机设备及存储介质

技术领域

本发明涉及数据传输优化技术领域，应用于页面处理领域，尤其涉及一种页面处理方法、装置、计算机设备及存储介质。

背景技术

前端页面在跳转时，常常涉及跨页面跳转参数信息，与后台完成数据交互，从而完页面参数传递。例如，前端项目中经常会出现的一种情况，有一个列表，比如商品列表，点击该商品列表中的某一项商品，会跳转至该项商品的详情页面。而当跳转到该商品页面时，需要传递一个参数过去，该参数与用户在商品列表页面的点击操作所生成，这样我们才能通过这个参数进行数据请求，然后根据后台返回的数据来生成用户所点击的该商品详情页面。

发明人发现，传统的会涉及跨页面传参数和后台进行数据交互，一般通过如下方式实现，第一种是通过params传递参数；第二种是通过路由属性配置传参，需要在路由文件的path属性后面加上参数名称，第三种是用query来传参。前两种方式参数在浏览器的url中都是不可见的，但前两种方法都有一个弊端，就是页面刷新的时候就获取不到参数值了，可能导致跳转失败，第三种传参方式虽然可以解决页面刷新参数消失的问题，但是参数在url中时可见的，这就让数据的安全性极低，全部暴露在url中，当一些数据不想暴露的时候，可见传统的方案中，在页面处理时的无法兼顾跳转成功率与安全性。

发明内容

本发明实施例提供一种页面处理方法、装置、计算机设备及存储介质，以传统方案在页面处理时无法兼顾跳转成功率与安全性的技术问题。

一种页面处理方法，包括：

当拦截到从第一页面跳转至第二页面的页面跳转请求时，获取所述页面跳转请求所包含的表单信息，所述表单信息包括所述第一页面到所述第二页面的页面跳转参数信息；

放行所述从第一页面跳转至第二页面的页面跳转请求，以从所述第一页面跳转至所述第二页面，并将所述页面跳转参数信息存储在参数数组中，所述参数数组为在vue.js项目的存储实例中所创建；

当接收到从所述第二页面跳转至第三页面的页面跳转请求，以从所述第二页面跳转至所述第三页面；

当接收到由所述第三页面跳转回所述第二页面的页面跳转请求时，从所述参数数组中读取所述页面跳转参数信息；

通过所述页面跳转参数信息，从所述第三页面跳转回所述第二页面。

一种页面处理装置，包括：

获取模块，用于当拦截到从第一页面跳转至第二页面的页面跳转请求时，获取所述页面跳转请求所包含的表单信息，所述表单信息包括所述第一页面到所述第二页面的页面跳转参数信息；

跳转模块，用于放行所述从第一页面跳转至第二页面的页面跳转请求，以从所述第一页面跳转至所述第二页面；

保存模块，用于将所述页面跳转参数信息存储在参数数组中，所述参数数组为在vue.js项目的存储实例中所创建；

所述跳转模块，用于当接收到从所述第二页面跳转至第三页面的页面跳转请求，以从所述第二页面跳转至所述第三页面；

读取模块，用于当接收到由所述第三页面跳转回所述第二页面的页面跳转请求时，从所述参数数组中读取所述页面跳转参数信息；

所述跳转模块，用于通过所述页面跳转参数信息，从所述第三页面跳转回所述第二页面。

一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述页面处理方法的步骤。

一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述页面处理方法的步骤。

上述页面处理方法、装置、计算机设备及存储介质所提供的一个方案中，针对页面跳转的情况，对页面跳转参数信息信息进行了不同处理，在多次页面跳转过程中，参数均保存在vue.js项目创建的存储实例的参数数组中，从vue.js项目的存储实例中存取数据不需要做字符串和对象之间的转换，不会造成内存消耗，而且使得页面跳转参数信息不会丢失而且不用在浏览器中暴露参数，保证了信息的安全性和跳转成功率，在页面处理时的能有效地兼顾跳转成功率与安全性。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本发明一实施例中页面处理方法的一应用环境示意图；

图2是本发明一实施例中页面处理方法的一流程示意图；

图3是本发明一实施例中页面处理方法的另一流程示意图；

图4是本发明一实施例中保存页面跳转参数信息至参数数组的一流程图；

图5是图1中步骤S60的一流程示意图；

图6是本发明一实施例中页面处理装置的一结构示意图；

图7是本发明一实施例中计算机设备的一结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明提供的页面处理方法，可应用在如图1的应用环境中，其中，终端设备可通过网络与服务器进行通信，该服务器指的是提供页面服务的页页面端，该终端设备上安装有客户端(如浏览器)，通过浏览器客户端可以浏览页面。对于该客户端而言，当拦截到从第一页面跳转至第二页面的页面跳转请求时，获取页面跳转请求所包含的表单信息，表单信息包括第一页面到第二页面的页面跳转参数信息；放行从第一页面跳转至第二页面的页面跳转请求，以从第一页面跳转至第二页面，并将页面跳转参数信息存储在参数数组中，参数数组为在vue.js项目的存储实例中所创建；当接收到从第二页面跳转至第三页面的页面跳转请求，以从第二页面跳转至第三页面；当接收到由第三页面跳转回第二页面的页面跳转请求时，从参数数组中读取页面跳转参数信息；通过页面跳转参数信息，从第三页面跳转回第二页面。在跳转页面时，终端设备依据页面跳转参数从而服务端中获取相应的页面资源文件并渲染跳转页面，从而实现页面之间的跳转。其中，该终端设备可以但不限于各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备等设备。服务端可以用独立的服务器或者是多个服务器组成的服务器集群来实现。

请参阅图1所示，下面结合图1，以完整的实施例对本发明提供的页面处理方法进行详细的描述，包括如下步骤：

S10：通过vuex工具创建vue.js项目，在vue.js项目中创建存储文件夹，在存储文件夹中创建存储实例store.js，并在存储实例store.js中创建参数数组。

其中，vuex是一个集中式的存储管理中心，vuex中可以用来存储数据，以统一页面的状态管理及操作处理，类似是一个“前端数据库”。本方案中，为了使用vuex的功能，需先提前在终端设备上安装vuex工具，安装的流程大致如下所示：

安装vuex工具：

npm install vuex--save；

利用vuex工具创建vue.js项目，以引入vuex和vue，以创建vue.js项目：

import Vue from'vue'；

import Vuex from'vuex'；

Vue.use(Vuex)；

在创建vue.js项目之后，在vue.js项目中创建存储文件夹(store文件夹)，并在store文件夹中创建存储实例store.js：

const store＝new Vuex.Store({})。

可以理解，在创建了存储实例store.js之后，便可在存储实例store.js的state中定义并创建用于存放参数的参数数组lastPath。需要说明的是，在定义并创建好参数数组lastPath之后，便可对参数数组lastPath进行相关的操作。在vuex工具中，主要涉及几个概念需要理解，引入vue，是因为存储实例store.js需要挂载在vue中，存储实例store.js是vue的根实例。存储实例store.js相当于是vuex工具的核心仓库，简单而言，vuex工具是用于存放数据的工具，而存储实例store.js数据仓库，存储实例store.js中包含state，存储实例store.js用于将信息或数据都放在state中。

另外需要说明的是，可以在vuex工具的getters中中定义好getLastPath:state＝>state.lastPath，用于获取参数数组lastPath的信息或数据，在vuex工具的mutations中定义好对lastPath进行赋值的方式：state.lastPath.push(lastPath)。

S20：当拦截到从第一页面跳转至第二页面的页面跳转请求时，获取页面跳转请求所包含的表单信息，表单信息包括第一页面到第二页面的页面跳转参数信息。

本方案所涉及的应用为各类应用程序，又称APP，应用程序可在Android、IOS或其他同类型系统中运行。示例性的，该应用程序可以包括web浏览器，在使用web浏览器等各类应用程序时，发生页面跳转事件是常见的应用场景。本方案中，所提及的页面跳转事件是需要进行页面跳转的事件。

在一实施例中，也即步骤20中的获取页面跳转请求所包含的表单信息之前，方法还包括：

S01：接收用户在第一页面触发的，由第一页面跳转至第二页面的页面跳转事件，页面跳转事件通常为用户通过动作指令、声音指令、人脸指令所触发；

S02：根据页面跳转事件生成页面跳转请求。

举个简单例子，在打开一个首页触发跳转到下一页面的页面跳转事件或某个页面中按键的点击触发跳转到下一个页面的页面跳转事件。作为一个示例，页面跳转事件通常为用户通过动作指令、声音指令、神态指令、或其他方式指令作用于终端设备上的应用程序上。其中，上述动作指令可以是用户的触碰作用、按压动作或滑动动作等；声音指令可以是用户发出特定声音或说出的特定语句等；神态指令可以是用户特定的面部特征或用户的特定表情。上述动作指令均可以触发页面跳转事件，从而触发相应的页面跳转请求。简而言之，页面跳转动作指的是应用程序根据终端检测到的跳转事件，从一个页面切换到另一个页面的动作。

在本方案中，需拦截到用户在应用程序上的第一页面跳转至第二页面的页面跳转请求。再举个简单例子，第一页面为一个商品列表页面，该商品列表页面包括各种各样的商品，用户通过点击该商品列表页面中的某一项商品A，以触发跳转至该项商品A的详情页面的页面跳转请求，该商品A的详情页面就是指第二页面。需要说明的是，上述例子仅为示例性说明，实际应用上还可以有多场景页面跳转场景，具体不做限定。值得说明的是，该页面跳转可以是指在第一页面基础上以浮窗形式跳转至第二页面，或者是覆盖第一页面完全打开第二页面的形式，在此也不做限制。

作为一个示例，可以在vue.js项目的main.js中,添加router.beforEach()，其中，beforEach()用于拦截每一次跳转至某个页面前的请求。也就是说，若当前页面为第一页面，通过该router，beforEach()，可以拦截由第一页面跳转至第二页面的页面跳转请求，router.beforeEach()可以对路由请求进行拦截，从而拦截到上述第一页面跳转至第二页面的页面跳转请求。

值得说明的是，在另一些方案中，监听页面跳转事件的方式，还可以提供统一的classjump类，classjump类是统一跳转类，通过对classjump类实现对应用程序内的onclick方法进行监听，onclick方法的意思是在页面元素被点击时发生，即可以是某一按钮被点击时执行相应操作，监听应用的页面跳转事件即可监听应用程序是否有页面跳转事件发生，从而拦截第一页面跳转至第二页面的页面跳转请求，在此不做限制。

可以理解，当需从第一页面跳转至第二页面时，由于需要知道从第一页面触发跳转的第二页面是哪些页面，因此需要传递页面跳转参数信息。再以上述例子为例，第一页面为一个商品列表页面，该商品列表页面包括各种各样的商品，用户通过点击该商品列表页面中的某一项商品A，会跳转至该项商品A的详情页面，该商品A的详情页面就是指第二页面。当用户需要从商品列表页面电机某一项商品A以跳转至该项商品A的详情页面时，需要依据用户的点击操作获取相应的页面跳转参数信息，以便触发生成携带有页面跳转参数信息的用于跳转至该商品A详情页面的页面跳转请求，使得后续可依据该该页面跳转参数信息，从页面服务端获取对应的该项商品A的详情页面的页面资源文件，方能成功跳转至该项商品A的详情页面。因此，从第一页面跳转至第二页面的页面跳转请求包含有表单信息(from信息)，该表单信息包含有页面跳转参数信息。

需要说明的是，在实际应用中，往往存在多级页面的跳转，例如：点开商品列表页面的某一商品查看，然后跳转至该商品子详情页，在商品子详情页面再点开商品孙子详情页面，以跳转至该商品孙子详情页面。对于每次页面之间的跳转，本方案均会进行拦截每个页面跳转请求所对应的页面跳转信息参数，也就是说，会获取商品列表页面到商品子详情页面的页面跳转参数信息，也会获取品子详情页面到商品孙子详情页面的页面跳转参数信息。

S30：放行从第一页面跳转至第二页面的页面跳转请求，以从第一页面跳转至第二页面，并将页面跳转参数信息存储在参数数组中。

在拦截到从第一页面跳转至第二页面的页面跳转请求，以获取到该页面跳转请求对应的页面跳转参数信息之后，便可依据该页面跳转参数信息获取相应的页面资源文件，从而渲染出第二页面，也即由第一页面成功跳转至第二页面。

并且，会将该页面跳转参数信息存储在存储实例store.js所创建的参数数组lastPath中，也就是说，参数数组lastPath中保存有该页面跳转参数信息，从而保证该页面跳转参数信息不会丢失。另外，由于页面跳转参数信息保存在存储实例store.js的参数数组lastPath中，可以不用在url地址中暴露页面跳转参数信息，也有效地保证了信息的安全性。

具体地，作为一个示例，在保存第一页面到第二页面的页面跳转参数信息到参数数组lastPath时，可以通过存储实例store.js对象的commit触发mutations方法，从而更改state中的参数数组lastPath的存储内容，以将第一页面到第二页面的页面跳转参数信息保存在参数数组lastPath中。

S40：当接收到从第二页面跳转至第三页面的页面跳转请求，以从第二页面跳转至第三页面。

可以理解，当从第一页面跳转至第二页面之后，在第二页面上，同样可以继续触发跳转，从而从第二页面跳转至第三页面，因此，当接收到从第二页面跳转至第三页面的页面跳转请求，以从第二页面跳转至第三页面。需要说明的是，第二页面跳转至第三页面的过程与第一页面跳转至第二页面的过程类似，在此不做详细说明。

S50：当接收到由第三页面跳转回第二页面的页面跳转请求时，从参数数组中读取页面跳转参数信息。

如步骤前述，从第一页面跳转至第二页面，以及从第二页面跳转至第三页面，均会获取相应的页面跳转参数并保存在参数数组lastPath。在接收到由第三页面跳转至第二页面的页面跳转请求时，会从参数数组lastPath中读取第一页面到第二页面的页面跳转参数信息。

需要说明的是，由于第一页面跳转至第二页面时，会将第一页面到第二页面的页面跳转信息保存在参数数组lastPath中，这样，当从第二页面跳转至第三页面时，第一页面到第二页面的页面跳转信息不会丢失，而是一直存在参数数组lastPath中，那么当需要从第三页面跳转至第二页面时，也即接收到由第三页面跳转至第二页面的页面跳转请求时，可以直接从参数数组lastPath中读取第一页面到第二页面的页面跳转参数信息。

S60：通过页面跳转参数信息，从第三页面跳转回第二页面。

在从参数数组lastPath中，读取出第一页面到第二页面的页面跳转参数信息之后，由于此时具备了到第二页面的页面跳转参数信息，此时便能通过第一页面到第二页面的页面跳转参数信息，从第三页面跳转回第二页面了。

例如，当用户点开商品列表页面的某一商品查看，然后跳转至该商品子详情页面，在商品子详情页面再点开商品孙子详情页面，以跳转至该商品孙子详情页面。经过本方案的处理逻辑，参数数组lastPath中保存有商品列表页面到商品子详情页面页面跳转参数信息，当用户从商品孙子详情页面跳转回商品子详情页面时，便能成功从从商品孙子详情页面跳转回商品子详情页面了。

从上述内容可以看出，本发明实施例提供了一种页面处理方法，主要在于页面跳转参数信息的处理，使得页面跳转参数信息不会丢失以提高跳转成功率且提高了安全性，在页面处理时的能有效地兼顾跳转成功率与安全性。

作为一个示例，如图3所示，步骤30中，放行所述从第一页面跳转至第二页面的页面跳转请求，以从所述第一页面跳转至所述第二页面之后，该方法还包括如下步骤：

S70：判断是否监听到针对第二页面的刷新操作。

例如，当用户点开商品列表页面的某一商品查看，然后跳转至该商品子详情页面后，用户依据需求可以对该商品子详情页面进行刷新操作。本方案中，可以判断是否接收到针对第二页面的刷新操作。具体地，可以在vue.js项目的created()中建立监听器window.addEventListener()，该监听器window.addEventListener()用于实时对监听beforeunload(刷新)事件，因此，当用户对当前的第二页面执行刷新操作时，可以利用监听器window.addEventListener()到针对第二页面的刷新操作。需要说明的是，针对第二页面的刷新操作，指的是对第二页面进行刷新，重新渲染并展示该第二页面的过程。

S80：当监听到到针对所述第二页面的刷新操作时，将所述页面跳转参数信息保存在当前的会话存储对象中。

S90：当根据所述刷新操作刷新第二页面时，从所述会话存储对象中获取所述页面跳转参数信息；

S100：依据所述页面跳转参数信息刷新所述第二页面。

对于步骤S70-S100，可以理解，在前述步骤有提及，本发明实施例会对每个页面跳转请求进行拦截，并获取页面跳转请求对应的页面跳转参数信息。因此，当从第一页面跳转至第二页面后，可以获取到第一页面到第二页面的页面跳转参数信息。并且本发明实施例会对每个当前页面进行监听，以确定是否有刷新操作，当监听到针对第二页面的刷新操作时，此时，会将第一页面到第二页面的页面跳转参数信息保存在当前的会话存储对象sessionStorage中。

可以理解，会话存储对象sessionStorage是当前页面会话创建的对应的临时存储对象，只有当页面被关闭或者浏览器被关闭时才会被清除，也就是说，第二页面上的存储对象sessionStorage在第二页面刷新或者恢复页面的时候，都不会丢失或者被清空。因此，在当监听到到针对第二页面的刷新操作时，将第一页面到第二页面的页面跳转参数信息保存在当前的会话存储对象sessionStorage中，以保证不会让第一页面到第二页面的页面跳转参数信息丢失，当根据刷新操作执行刷新第二页面时，再从会话存储对象sessionStorage中获取第一页面到第二页面的页面跳转参数信息，通过该第一页面到第二页面的页面跳转参数信息去刷新第二页面，从而得到重新刷新后的第二页面。

作为一个示例，步骤S80中，也即将所述页面跳转参数信息保存在当前的会话存储对象中，指的是，将保存有所述页面跳转参数信息的存储实例，复制并保存在所述会话存储对象中，以将所述页面跳转参数信息保存在所述会话存储对象sessionStorage中。

可以理解的是，由于本发明实施例会对每个页面跳转请求进行拦截，并获取页面跳转请求对应的页面跳转参数信息。因此，当从第一页面跳转至第二页面后，可以获取到第一页面到第二页面的页面跳转参数信息，并保存在存储实例store.js的参数组lastPath中。因此，当监听到到针对第二页面的刷新操作时，可以直接将复制保存有第一页面到第二页面的页面跳转参数信息的存储实例store.js，并保存在当前的会话存储对象sessionStorage，以避免第一页面到第二页面的页面跳转参数信息丢失，可见，由于保存在存储对象sessionStorage，又因为sessionStorage用于本地存储一个会话(session)中的数据，当会话结束后数据也随之销毁，不会造成浏览器卡顿和崩溃，提高了刷新效率。

作为一个示例，如图4所示，S30中，将第一页面到第二页面的页面跳转参数信息存储在参数数组lastPath中，具体包括如下步骤：

S31：确定当前所述参数数组中的元素数量。

S32：根据当前所述参数数组中的元素数量，判断所述参数数组存入所述页面跳转参数信息之后，所述参数数组中的元素数量是否超过预设数量。

需要说明的是，参数数组lastPath是定义的数组，其中存储的是每次页面跳转请求对应的页面跳转参数信息。在实际应用场景中，为了介绍存储压力，也为了符合实际的应用场景，会给参数数组lastPath定义好能存储的预设元素数量。在一应用场景中，该预设数量可以为2。因此，在将第一页面到第二页面的页面跳转参数信息存储在参数数组lastPath中前，需先确定参数数组lastPath中的元素数量，并判断存入所述存储元素之后，参数组lastPath中的元素数量是否超过预设数量。

S33：若未超过所述预设数量，则将所述页面跳转参数信息存入所述参数数组中。

S34：若超过所述预设数量，则依次删除所述参数数组中存入时间最早的元素数量，直至存入所述页面跳转参数信息后，所述参数数组中的元素数量未超过所述预设数量。

对于步骤S31-S34，为了便于理解其过程，这里再举个简单例子，仍然以前述商品列表页面的例子为例：

当用户点开商品列表页面的某一商品查看，然后跳转至该商品子详情页，在商品子详情页面再点开商品孙子详情页面，以跳转至该商品孙子详情页面，上述过程存在两次跳转，经过本方案的存储处理逻辑，会获取到商品列表页面到商品子详情页的页面跳转参数信息1，以及获取到商品子详情页面到商品孙子详情页面的页面跳转参数信息2。因此，参数数组lastPath存储有页面跳转参数信息1和页面跳转参数信息2，此时，当用户在商品孙子详情页面在点击跳转至另一个商品曾孙子详情页面时，会拦截并获取到商品孙子详情页面到商品曾孙子详情页面的页面跳转参数信息3，由于参数数组lastPath已存有页面跳转参数信息1和页面跳转参数信息2，当再存入页面跳转参数信息3时，将导致参数数组lastPath的元素数量为3，超过设定的预设数量2，因此，依次删除所述参数数组lastPath中的存入时间最早的元素数量，也即页面跳转参数信息1，直至存入页面跳转参数信息3后，所述参数数组lastPath中参数数量为未超过2个。

当用户点开商品列表页面的某一商品查看，然后跳转至该商品子详情页，在商品子详情页面再点开商品孙子详情页面经过本方案的存储处理逻辑，会获取到商品列表页面到商品子详情页的页面跳转参数信息1，因此，参数数组lastPath存储有页面跳转参数信息1和，当再从商品子详情页跳转到商品孙子详情页面时，会获取到到商品子详情页跳转到商品孙子详情页面的页面跳转参数信息2，由于参数数组lastPath仅存有页面跳转参数信息1，当再存入页面跳转参数信息2时，参数数组lastPath的元素数量为2，没有超过设定的预设数量2，直接将该页面跳转参数信息2存入在参数数组lastPath中。

简而言之，用户进行操作的时候，虽然会进行各种各样的页面跳转，但参数数组lastPath仅存上一次和上上一次访问页面的对应的页面跳转参数信息。

需要说明的是，在实际应用中，预设数量的具体数值可以设定，在此不做具体限制。

作为一个示例，如图5所示，步骤S60中，也即通过所述页面跳转参数信息，从所述第三页面跳转回所述第二页面，具体包括如下步骤：

S61：根据所述页面跳转参数信息，从路由服务端获取对应的页面跳转方法。

S62：依据所述页面跳转方法生成页面资源获取请求。

S63：将所述页面资源获取请求发送至页面服务端。

S64：接收所述页面服务端反馈的页面资源文件，并依据所述页面资源文件从所述第三页面跳转回所述第二页面。

对于步骤S61-S64，可以理解，具体地，根据第一页面到第二页面的页面跳转参数信息就可以获取到对应的第二页面的跳转方法，第二页面的跳转方法是实现第二页面跳转的具体方法，第二页面的跳转方法可生成对应的页面资源获取请求，页面资源获取请求是用于获取第二页面资源的一个请求，将页面资源获取请求提供页面服务的发送至页面服务端后，从页面服务端中获取第二页面资源，也即资源文件。其中，该资源文件包括了第二页面对应的展示文件，因此，从而解析资源文件就可跳转并显示第二页面。

综上实施例，本方案提供了一种页面处理方法，针对页面跳转或刷新的情况，对页面跳转参数信息信息进行了不同处理，参数均保存在vue.js项目的存储实例的state中，而且不用在浏览器中暴露参数，保证了数据的安全性，而且从vue.js项目的存储实例中存取数据不需要做字符串和对象之间的转换，不会造成内存消耗，另外，当刷新时将页面跳转参数信息保存在存储对象sessionStorage中，使得页面跳转参数信息不会丢失，提高了跳转成功率和安全性，在页面处理时的能有效地兼顾跳转成功率与安全性。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。

在一实施例中，提供一种页面处理装置，该页面处理装置与上述实施例中页面处理方法一一对应。如图6所示，该页面处理装置包括获取模块101、跳转模块102、保存模块103和读取模块104。各功能模块详细说明如下：

获取模块101，用于当拦截到从第一页面跳转至第二页面的页面跳转请求时，获取所述页面跳转请求所包含的表单信息，所述表单信息包括所述第一页面到所述第二页面的页面跳转参数信息；

跳转模块102，用于放行所述从第一页面跳转至第二页面的页面跳转请求，以从所述第一页面跳转至所述第二页面；

保存模块103，用于将所述页面跳转参数信息存储在参数数组中，所述参数数组为在vue.js项目的存储实例中所创建；

所述跳转模块102，用于当接收到从所述第二页面跳转至第三页面的页面跳转请求，以从所述第二页面跳转至所述第三页面；

读取模块104，用于当接收到由所述第三页面跳转回所述第二页面的页面跳转请求时，从所述参数数组中读取所述页面跳转参数信息；

所述跳转模块102，用于通过所述页面跳转参数信息，从所述第三页面跳转回所述第二页面。

在一实施例中，所述页面处理装置还包括判断模块。

所述判断模块，用于所述所述放行所述从第一页面跳转至第二页面的页面跳转请求，以从所述第一页面跳转至所述第二页面之后，判断是否监听到针对所述第二页面的刷新操作；

所述保存模块，还用于当监听到到针对所述第二页面的刷新操作时，将所述页面跳转参数信息保存在当前的会话存储对象中；

所述跳转模块，还用于当根据所述刷新操作刷新第二页面时，从所述会话存储对象中获取所述页面跳转参数信息，并依据所述页面跳转参数信息刷新所述第二页面。

结合上述实施例，在一实施例中，所述保存模块具体用于：

当监听到到针对所述第二页面的刷新操作时，将保存有所述页面跳转参数信息的存储实例，复制并保存在所述会话存储对象中，以将所述页面跳转参数信息保存在所述会话存储对象。

在一实施例中，所述保存模块具体用于：

所述将所述页面跳转参数信息存储在参数数组中，包括：

确定当前所述参数数组中的元素数量；

根据当前所述参数数组中的元素数量，判断所述参数数组存入所述页面跳转参数信息之后，所述参数数组中的元素数量是否超过预设数量；

若未超过所述预设数量，则将所述页面跳转参数信息存入所述参数数组中；

若超过所述预设数量，则依次删除所述参数数组中存入时间最早的元素数量，直至存入所述页面跳转参数信息后，所述参数数组中的元素数量未超过所述预设数量。

在一实施例中，所述预设数量为2。

在一实施例中，该装置还包括安装模块和创建模块；

所述安装模块，用于安装vuex工具，并通过所述vuex工具创建vue.js项目，在vue.js项目中创建存储文件夹；

创建模块，用于在所述存储文件夹中创建存储实例store.js，并在存储实例store.js中创建所述参数数组。

在一实施例中，所述跳转模块，具体用于：

根据所述页面跳转参数信息，从路由服务端获取对应的页面跳转方法；

依据所述页面跳转方法生成页面资源获取请求；

将所述页面资源获取请求发送至页面服务端；

接收所述页面服务端反馈的页面资源文件，并依据所述页面资源文件从所述第三页面跳转回所述第二页面。

在一实施例中，所述页面处理装置还包括接收模块和生成模块；

所述接收模块，用于接收用户在所述第一页面触发的，由所述第一页面跳转至第二页面的页面跳转事件，所述页面跳转事件通常为所述用户通过动作指令、声音指令、人脸指令所触发；

所述生成模块，用于根据所述页面跳转事件生成所述页面跳转请求。

关于页面处理装置的具体限定可以参见上文中对于页面处理方法的限定，在此不再赘述。上述页面处理装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端设备，其内部结构图可以如图7所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质或易失性存储介质、内存储器。该存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部服务端通过网络连接通信。该计算机程序被处理器执行时以实现一种页面处理方法。

在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现以下步骤：

当拦截到从第一页面跳转至第二页面的页面跳转请求时，获取所述页面跳转请求所包含的表单信息，所述表单信息包括所述第一页面到所述第二页面的页面跳转参数信息；

放行所述从第一页面跳转至第二页面的页面跳转请求，以从所述第一页面跳转至所述第二页面，并将所述页面跳转参数信息存储在参数数组中，所述参数数组为在vue.js项目的存储实例中所创建；

当接收到从所述第二页面跳转至第三页面的页面跳转请求，以从所述第二页面跳转至所述第三页面；

当接收到由所述第三页面跳转回所述第二页面的页面跳转请求时，从所述参数数组中读取所述页面跳转参数信息；

通过所述页面跳转参数信息，从所述第三页面跳转回所述第二页面。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：

当拦截到从第一页面跳转至第二页面的页面跳转请求时，获取所述页面跳转请求所包含的表单信息，所述表单信息包括所述第一页面到所述第二页面的页面跳转参数信息；

放行所述从第一页面跳转至第二页面的页面跳转请求，以从所述第一页面跳转至所述第二页面，并将所述页面跳转参数信息存储在参数数组中，所述参数数组为在vue.js项目的存储实例中所创建；

当接收到从所述第二页面跳转至第三页面的页面跳转请求，以从所述第二页面跳转至所述第三页面；

当接收到由所述第三页面跳转回所述第二页面的页面跳转请求时，从所述参数数组中读取所述页面跳转参数信息；

通过所述页面跳转参数信息，从所述第三页面跳转回所述第二页面。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。

以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。

Claims (10)

1.一种页面处理方法，其特征在于，包括：

当拦截到从第一页面跳转至第二页面的页面跳转请求时，获取所述页面跳转请求所包含的表单信息，所述表单信息包括所述第一页面到所述第二页面的页面跳转参数信息；

放行所述从第一页面跳转至第二页面的页面跳转请求，以从所述第一页面跳转至所述第二页面，并将所述页面跳转参数信息存储在参数数组中，所述参数数组为在vue.js项目的存储实例中所创建；

当接收到从所述第二页面跳转至第三页面的页面跳转请求时，从所述第二页面跳转至所述第三页面；

当接收到由所述第三页面跳转回所述第二页面的页面跳转请求时，从所述参数数组中读取所述页面跳转参数信息；

通过所述页面跳转参数信息，从所述第三页面跳转回所述第二页面。

2.如权利要求1所述的页面处理方法，其特征在于，所述放行所述从第一页面跳转至第二页面的页面跳转请求，以从所述第一页面跳转至所述第二页面之后，所述方法还包括：

判断是否监听到针对所述第二页面的刷新操作；

当监听到到针对所述第二页面的刷新操作时，将所述页面跳转参数信息保存在当前的会话存储对象中；

根据所述刷新操作刷新第二页面，从所述会话存储对象中获取所述页面跳转参数信息，并依据所述页面跳转参数信息刷新所述第二页面。

3.如权利要求2所述的页面处理方法，其特征在于，所述将所述页面跳转参数信息保存在当前的会话存储对象中，包括：

将保存有所述页面跳转参数信息的存储实例，复制并保存在所述会话存储对象中，以将所述页面跳转参数信息保存在所述会话存储对象。

4.如权利要求1-3任一项所述的页面处理方法，其特征在于，所述将所述页面跳转参数信息存储在参数数组中，包括：

确定当前所述参数数组中的元素数量；

根据当前所述参数数组中的元素数量，判断所述参数数组存入所述页面跳转参数信息之后，所述参数数组中的元素数量是否超过预设数量；

若未超过所述预设数量，则将所述页面跳转参数信息存入所述参数数组中；

若超过所述预设数量，则依次删除所述参数数组中存入时间最早的元素数量，直至存入所述页面跳转参数信息后，所述参数数组中的元素数量未超过所述预设数量。

5.如权利要求1-3任一项所述的页面处理方法，其特征在于，所述获取所述页面跳转请求所包含的表单信息之前，所述方法还包括：

安装vuex工具，并通过所述vuex工具创建vue.js项目，在vue.js项目中创建存储文件夹；

在所述存储文件夹中创建存储实例store.js，并在存储实例store.js中创建所述参数数组。

6.如权利要求1-3任一项所述的页面处理方法，其特征在于，所述通过所述第一页面到第二页面的页面跳转参数信息，从所述第三页面跳转回所述第二页面，包括：

根据所述页面跳转参数信息，从路由服务端获取对应的页面跳转方法；

依据所述页面跳转方法生成页面资源获取请求；

将所述页面资源获取请求发送至页面服务端；

接收所述页面服务端反馈的页面资源文件，并依据所述页面资源文件从所述第三页面跳转回所述第二页面。

7.如权利要求1-3任一项所述的方法，其特征在于，所述获取所述页面跳转请求所包含的表单信息之前，所述方法还包括：

接收用户在所述第一页面触发的，由所述第一页面跳转至第二页面的页面跳转事件，所述页面跳转事件通常为所述用户通过动作指令、声音指令、人脸指令所触发；

根据所述页面跳转事件生成所述页面跳转请求。

8.一种页面处理装置，其特征在于，包括：

获取模块，用于当拦截到从第一页面跳转至第二页面的页面跳转请求时，获取所述页面跳转请求所包含的表单信息，所述表单信息包括所述第一页面到所述第二页面的页面跳转参数信息；

跳转模块，用于放行所述从第一页面跳转至第二页面的页面跳转请求，以从所述第一页面跳转至所述第二页面；

保存模块，用于将所述页面跳转参数信息存储在参数数组中，所述参数数组为在vue.js项目的存储实例中所创建；

所述跳转模块，用于当接收到从所述第二页面跳转至第三页面的页面跳转请求，以从所述第二页面跳转至所述第三页面；

读取模块，用于当接收到由所述第三页面跳转回所述第二页面的页面跳转请求时，从所述参数数组中读取所述页面跳转参数信息；

所述跳转模块，用于通过所述页面跳转参数信息，从所述第三页面跳转回所述第二页面。

9.一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至7任一项所述页面处理方法的步骤。

10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7任一项所述页面处理方法的步骤。

Images