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

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

Info

Publication number
CN113934425A
CN113934425A CN202111350297.0A CN202111350297A CN113934425A CN 113934425 A CN113934425 A CN 113934425A CN 202111350297 A CN202111350297 A CN 202111350297A CN 113934425 A CN113934425 A CN 113934425A
Authority
CN
China
Prior art keywords
page
jump
switching
path
vue
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
CN202111350297.0A
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.)
Ping An Puhui Enterprise Management Co Ltd
Original Assignee
Ping An Puhui Enterprise Management 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 Ping An Puhui Enterprise Management Co Ltd filed Critical Ping An Puhui Enterprise Management Co Ltd
Priority to CN202111350297.0A priority Critical patent/CN113934425A/zh
Publication of CN113934425A publication Critical patent/CN113934425A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/901—Indexing; Data structures therefor; Storage structures
    • G06F16/9024—Graphs; Linked lists
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本申请为页面处理技术领域，本申请提供了一种页面处理方法、装置、计算机设备及存储介质，其中，所述方法包括：响应于多页面切换成单页面的切换请求，判断当前页面项目中是否引入了vue‑router库文件，若是，根据切换请求的请求类型，确定页面切换时的跳转路径的获取方式，根据获取方式获取跳转路径，获取单页面包含的跳转代码，根据单页面的跳转代码生成链表数据结构，将链表数据结构添加至跳转路径，得到目标跳转路径，根据目标跳转路径切换到单页面，以完成多页面自动切换到单页面，操作简单。

Description

页面处理方法、装置、计算机设备及存储介质
技术领域
本申请涉及页面处理技术领域，具体而言，本申请涉及一种页面处理方法、装置、计算机设备及存储介质。
背景技术
当前前端vue框架项目中，由于前期出于搜索引擎优化的原因，选择了多页面形式，但随着服务器渲染SSR在项目中的普及，以及公司业务不再依赖于搜索引擎引导用户点击，多页面的形式变得不再重要。由于多页面存在页面加载性能慢，每次跳转新的页面都需要初始化加载和解析静态资源，操作繁琐，用户体验也较差。
发明内容
本申请的主要目的为提供一种页面处理方法、装置、计算机设备及存储介质，以简化页面切换流程，提高用户体验。
为了实现上述发明目的，本申请提供一种页面处理方法，其包括以下步骤：
响应于多页面切换成单页面的切换请求，判断当前页面项目中是否引入了vue-router库文件；
若是，根据所述切换请求的请求类型，确定页面切换时的跳转路径的获取方式，根据所述获取方式获取跳转路径；
获取所述单页面包含的跳转代码，根据所述单页面的跳转代码生成链表数据结构；其中，所述链表数据结构包括多页面的vue组件路径和名称、所述单页面的vue组件路径和名称；
将所述链表数据结构添加至所述跳转路径，得到目标跳转路径；
根据所述目标跳转路径切换至所述单页面。
优选地，所述判断当前的页面项目中是否引入了vue-router库文件，包括：
获取当前页面项目中的package.json文件的dependencies对象；
判断所述dependencies对象内是否包含vue-router键值对；
若是，则判定当前项目引入了vue-router库文件；
若否，则将所述vue-router库文件引入当前页面项目中。
进一步地，所述响应于多页面切换成单页面的切换请求之前，还包括：
响应于工具引入命令，定位当前页面项目的根目录及项目路径；
根据所述项目路径获取工具，将所述工具加入到当前页面项目的根目录中；其中，所述工具用于响应多页面切换成单页面的切换请求。
进一步地，所述将所述链表数据结构添加至所述跳转路径，得到目标跳转路径之后，还包括：
根据所述链表数据结构中单页面的多个路由以及每个所述路由关联的子路由，计算每个路由及其关联的子路由总的资源文件大小；
当单个路由及其关联的子路由的资源文件大小大于预设值时，查询子路由中资源最大的一个，将最大子路由对应组件的指向进行改写，以将该子路由根据需要进行加载。
进一步地，所述根据所述目标跳转路径切换至所述单页面之后，还包括：
响应于用户输入的页面恢复指令，根据所述页面恢复指令从所述单页面切换到所述多页面，并对所述多页面进行恢复。
优选地，所述根据所述目标跳转路径切换至所述单页面，包括：
当监测到多个所述目标跳转路径时，获取各所述目标跳转路径上单页面对应的服务状态；
根据所述服务状态对各所述目标跳转路径的跳转完成时长进行预测，得到各所述目标跳转路径的跳转完成时长；
选取跳转完成时长最短的目标跳转路径切换至所述单页面。
优选地，所述根据所述服务状态对各所述目标跳转路径的跳转完成时长进行预测，包括：
将每个目标跳转路径中各单页面对应的服务状态输入预先训练好的时长预测机器模型中，得到所述时长预测机器模型输出的跳转完成时长。
本申请还提供一种页面处理装置，其包括：
判断模块，用于响应于多页面切换成单页面的切换请求，判断当前页面项目中是否引入了vue-router库文件；
确定模块，用于在判定当前页面项目中引入了vue-router库文件时，根据所述切换请求的请求类型，确定页面切换时的跳转路径的获取方式，根据所述获取方式获取跳转路径；
获取模块，用于获取所述单页面包含的跳转代码，根据所述单页面的跳转代码生成链表数据结构；其中，所述链表数据结构包括多页面的vue组件路径和名称、所述单页面的vue组件路径和名称；
添加模块，用于将所述链表数据结构添加至所述跳转路径，得到目标跳转路径；
切换模块，用于根据所述目标跳转路径切换至所述单页面。
本申请还提供一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现上述任一项所述方法的步骤。
本申请还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述任一项所述方法的步骤。
本申请所提供的一种页面处理方法、装置、计算机设备及存储介质，通过响应于多页面切换成单页面的切换请求，判断当前页面项目中是否引入了vue-router库文件，若是，根据切换请求的请求类型，确定页面切换时的跳转路径的获取方式，根据获取方式获取跳转路径，获取单页面包含的跳转代码，根据单页面的跳转代码生成链表数据结构，将链表数据结构添加至跳转路径，得到目标跳转路径，根据目标跳转路径切换到单页面，以完成多页面自动切换到单页面，操作简单，且在有多页面的页面项目需要进行转换成单页面时，无需开发人员掌握两种语法，只需要进行简单配置操作，即可以将多页面项目转换成单页面项目，以最简单快捷的方式，提升页面项目的用户体验。
附图说明
图1为本申请一实施例的页面处理方法的流程示意图；
图2为本申请一实施例的页面处理装置的结构示意框图；
图3为本申请一实施例的计算机设备的结构示意框图。
本申请目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。
本申请提出的一种页面处理方法，以服务器为执行主体，服务器可以是独立的服务器，也可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(Content Delivery Network，CDN)、以及大数据和人工智能平台等基础云计算服务的云服务器。
该页面处理方法用于解决当前每次跳转新的页面都需要初始化加载和解析静态资源，操作繁琐的技术问题。参考图1，其中一个实施例中，该页面处理方法包括如下步骤：
S11、响应于多页面切换成单页面的切换请求，判断当前页面项目中是否引入了vue-router库文件；
S12、若是，根据所述切换请求的请求类型，确定页面切换时的跳转路径的获取方式，根据所述获取方式获取跳转路径；
S13、获取所述单页面包含的跳转代码，根据所述单页面的跳转代码生成链表数据结构；其中，所述链表数据结构包括多页面的vue组件路径和名称、所述单页面的vue组件路径和名称；
S14、将所述链表数据结构添加至所述跳转路径，得到目标跳转路径；
S15、根据所述目标跳转路径切换至所述单页面。
如上述步骤S11所述，不同于多页面形式，单页面形式的页面项目，页面切换依赖于路由的跳转。在页面项目中，路由的功能在vue官方脚手架工具中，由于其本身占用了一定的体积，所以并不是默认自带的，在需要使用的时候，再单独引入到实际的页面项目中。因此，当需要将多页面切换成单页面的时候，首先需要将vue-router库文件引入进来，因此需要判断当前页面项目中是否引入了vue-router库文件。
其中，单页面是只有一张Web页面的应用，其只加载单个HTML页面，并能够动态重写当前的页面来与用户交互，而不需要重新加载整个页面。浏览单页面时，浏览区域一开始会加载必需的公共资源(HTML、CSS和JavaScript等)，而后的所有操作都在这张页面上完成，并由JavaScript控制，从而实现单页面跳转仅刷新局部资源，而公共资源无需重复加载。
单页面(single page web application，SPA)：SPA是一种特殊的Web应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript、CSS。一旦页面加载完成，单页面不会因为用户的操作而进行页面的重新加载或跳转，而是利用JavaScript动态的变换HTML(采用的是div切换显示和隐藏)，从而实现UI与用户的交互。在单页面应用中，应用加载之后就不会再有整页刷新。相反，展示逻辑预先加载，并有赖于内容Region(区域)中的视图切换来展示内容。
如上述步骤S12所述，由于在多页面项目中，页面的跳转方式存在多种形式，针对不同的请求类型，获取跳转路径的获取方式不同：
location.href：获取到其对应值即为跳转路径；
location.replace：通过获取其执行方法的第一个参数，即为跳转路径；
window.open：通过获取其执行方法的第一个参数，即为跳转路径。同时，也会获取到其第二个参数，当第二个参数为_self时，表示在当前页面打开。当为_blank时，表示通过新建一个空白页面打开。后续生成的路由中，会使用到这个参数。
native跳转方法：该项目如果是在hybridapp使用，有可能会使用到native提供的跳转方法，不同的native跳转方法可能存在不同的方法名称，所以当存在这种情况的时候，需要使用工具的开发者，在配置文件config.json中，将native方法名称进行配置。在工具执行过程中，会根据配置文件中所配置的方法名，进行查找到对应的native跳转方法，再根据跳转方法中的入参，获取到跳转路径。
如上述步骤S13所述，根据单页面中包含的跳转代码，如A页面，包含了跳转B页面的代码，B页面又包含跳转C页面和D页面代码，D页面又包含跳转回A页面的代码。则可以生成类似A->B->C/D->A的链表数据结构。在链表数据结构中，包含当前多页面的vue组件路径和名称、单页面的vue组件路径和名称。
然后遍历整个链表数据结构，获取到链表数据中所有涉及到的vue组件，通过import语法引入到页面项目的路由主文件中，其中引入的路径即为链表中保存的对应vue组件的路径；通过语法import{createRouter}from'vue-router'，将创建路由的方法，从vue-router库文件中引入到路由主文件中；生成路由配置，对于单个页面路由来说，需要设置路由的名称、路径、路由对应的组件。其中，将路由的名称，与链表中vue组件的名称设置为一致；路径与链表中vue组件的路径设置为一致；路由对应的组件设置为第一步引入的对应组件。当遇到有连续多个页面跳转的情况，如A->B->C这种情况，则会使用嵌套路由的方式，通过在单个路由配置文件中，增加children配置项，配置项的内容与外层路由配置类似。
如上述步骤S14-S15所述，本实施例将链表数据结构添加至跳转路径作为目标跳转路径，根据所述目标跳转路径切换至单页面。此外，在原多页面中，将跳转方式修改为路由跳转方式，由于原页面的跳转方式，还保留原来的非路由形式，需要通过识别出来的代码，将其按照配置规则进行替换，规则如下：
location.href替换为this.$router.push('路由路径')
location.replace替换为this.$router.replace('路由路径')
window.open：第二个参数为_self，替换为this.$router.replace('路由路径')。第二个参数为_blank，替换为this.$router.push('路由路径')
native跳转方法。根据配置文件config.json中，配置的native方法跳转形式，按照replace替换为this.$router.replace('路由路径')，push替换为this.$router.push('路由路径')的规则，进行替换。
本申请所提供的一种页面处理方法，通过响应于多页面切换成单页面的切换请求，判断当前页面项目中是否引入了vue-router库文件，若是，根据切换请求的请求类型，确定页面切换时的跳转路径的获取方式，根据获取方式获取跳转路径，获取单页面包含的跳转代码，根据单页面的跳转代码生成链表数据结构，将链表数据结构添加至跳转路径，得到目标跳转路径，根据目标跳转路径切换到单页面，以完成多页面自动切换到单页面，操作简单，且在有多页面的页面项目需要进行转换成单页面时，无需开发人员掌握两种语法，只需要进行简单配置操作，即可以将多页面项目转换成单页面项目，以最简单快捷的方式，提升页面项目的用户体验。
在一实施例中，所述判断当前的页面项目中是否引入了vue-router库文件，可具体包括：
获取当前页面项目中的package.json文件的dependencies对象；
判断所述dependencies对象内是否包含vue-router键值对；
若是，则判定当前项目引入了vue-router库文件；
若否，则将所述vue-router库文件引入当前页面项目中。
本实施例通过查找项目中package.json文件中，在dependencies对象内，是否包含vue-router键值对，如果存在，则说明页面项目中已经引入了vue-router库文件。如果不存在，则需要执行安装命令，以将vue-router库文件安装到项目中来。
在一实施例中，所述响应于多页面切换成单页面的切换请求之前，还可包括：
响应于工具引入命令，定位当前页面项目的根目录及项目路径；
根据所述项目路径获取工具，将所述工具加入到当前页面项目的根目录中；其中，所述工具用于响应多页面切换成单页面的切换请求。
在本实施例中，定位当前页面项目的根目录，执行命令npmipa-Multiple-page-transform-Single-page-D，就可以添加该工具到当前页面项目的根目录中，用于实现多页面切换成单页面路由；并设置配置文件config.json，配置文件配置内容包括：
native跳转方法的方法名，支持配置多个；
不同的native方法，对应的跳转形式，有两种情况，一种是在覆盖当前页面打)，一种是新开一个页面打开。
在一实施例中，所述将所述链表数据结构添加至所述跳转路径，得到目标跳转路径之后，还可包括：
根据所述链表数据结构中单页面的多个路由以及每个所述路由关联的子路由，计算每个路由及其关联的子路由总的资源文件大小；
当单个路由及其关联的子路由的资源文件大小大于预设值时，查询子路由中资源最大的一个，将最大子路由对应组件的指向进行改写，以将该子路由根据需要进行加载。
由于单页面应用是一次性加载所有页面的资源，当所有页面资源过大的时候，会导致首次加载第一个页面耗时增加。为了解决这个问题，需要将多个页面进行按模块进行划分，当使用到时再进行加载。具体的，按照路由链表数据结构中，单个路由页面以及其关联的子路由，计算每一个路由及其关联的子路由总的资源文件大小。当单个路由及其关联的子路由资源文件大小，大于500Kb时，找出其子路由中资源最大的一个，将其路由对应组件的指向，通过语法()＝>import('路由地址')，进行改写，实现该子路由的按需加载。如果改写后，大小还是超过500kb，则找出资源大小第二大的子路由，重复以上操作，以将该子路由根据需要进行加载。
在一实施例中，将所述vue-router库文件引入项目时，还可通过查找项目中src目录下的main.js文件，通过语法import router from'./router'，将路由主文件引入到项目中，路由主文件又会将vue-router库文件引入。然后，需要在原初始化语句中，如在此语法中reateApp(App).mount('#app')，在其中间添加.use(router)，变成createApp(App).use(router).mount('#app')，这样就可以使得vue-router库文件在项目中得到引用。
在一实施例中，所述根据所述目标跳转路径切换至所述单页面之后，还可包括：
响应于用户输入的页面恢复指令，根据所述页面恢复指令从所述单页面切换到所述多页面，并对所述多页面进行恢复。
本实施例响应于用户输入的页面恢复指令，根据页面恢复指令从单页面切换到多页面，并对多页面进行恢复，以提高页面恢复效率，实现页面的恢复。
在一实施例中，所述根据所述目标跳转路径切换至所述单页面，可具体包括：
当监测到多个所述目标跳转路径时，获取各所述目标跳转路径上单页面对应的服务状态；
根据所述服务状态对各所述目标跳转路径的跳转完成时长进行预测，得到各所述目标跳转路径的跳转完成时长；
选取跳转完成时长最短的目标跳转路径切换至所述单页面。
其中，所述服务状态包括：阻塞状态、快速状态和暂停状态。本实施例可以从网页服务器中获得各单页面对应的服务状态，也可以根据网页跳转时长确定单页面对应的服务状态。当第一单页面跳转到第二单页面的网页跳转时长小于第一预设时间阈值时，则可以确定第二单页面的对应的服务状态为快速状态。当第一单页面跳转到第二单页面的网页跳转时长大于第二预设时间阈值时，则可以确定第二单页面的对应的服务状态为暂停状态。其中，第二预设时间阈值大于第一预设时间阈值。当第一单页面跳转到第二单页面的网页跳转时长位于第一预设时间阈值和第二预设时间阈值之间时，则可以确定第二单页面的对应的服务状态为阻塞状态。
网页跳转时长可以通过实际测试来得到，例如：在第一单页面尝试跳转到第二单页面，统计本次跳转时间。具体的，网页跳转时长可以以发出跳转指令为起点，以加载第二单页面完成为终点，将上述起点和终点之间的时长确定为网页跳转时长。其中，阻塞状态是由于对网页对应的服务的并发请求太多而导致的该服务响应请求较慢的状态。快速状态是服务可以快速响应请求的状态。暂停状态是暂时无法提供服务的状态。由于不同服务状态下的服务响应时长差异巨大，因此本实施例可以根据所述服务状态对各所述网页跳转路径的跳转完成时长进行预测。
在一实施例中，所述根据所述服务状态对各所述目标跳转路径的跳转完成时长进行预测，可具体包括：
将每个目标跳转路径中各单页面对应的服务状态输入预先训练好的时长预测机器模型中，得到所述时长预测机器模型输出的跳转完成时长。
在本实施例中，可基于服务状态输出相应的跳转完成时长，该时长预测机器模型为训练好的神经网络模型，可预先获取大量的服务状态样本及对应的目标跳转完成时长对神经网络模型进行训练，在训练结果满足要求时，将训练完成的神经网络模型作为时长预测机器模型，用于预测跳转完成时长。
参照图2，本申请实施例中还提供一种页面处理装置，包括：
判断模块11，用于响应于多页面切换成单页面的切换请求，判断当前页面项目中是否引入了vue-router库文件；
确定模块12，用于在判定当前页面项目中引入了vue-router库文件时，根据所述切换请求的请求类型，确定页面切换时的跳转路径的获取方式，根据所述获取方式获取跳转路径；
获取模块13，用于获取所述单页面包含的跳转代码，根据所述单页面的跳转代码生成链表数据结构；其中，所述链表数据结构包括多页面的vue组件路径和名称、所述单页面的vue组件路径和名称；
添加模块14，用于将所述链表数据结构添加至所述跳转路径，得到目标跳转路径；
切换模块15，用于根据所述目标跳转路径切换至所述单页面。
在本实施例中，不同于多页面形式，单页面形式的页面项目，页面切换依赖于路由的跳转。在页面项目中，路由的功能在vue官方脚手架工具中，由于其本身占用了一定的体积，所以并不是默认自带的，在需要使用的时候，再单独引入到实际的页面项目中。因此，当需要将多页面切换成单页面的时候，首先需要将vue-router库文件引入进来，因此需要判断当前页面项目中是否引入了vue-router库文件。
其中，单页面是只有一张Web页面的应用，其只加载单个HTML页面，并能够动态重写当前的页面来与用户交互，而不需要重新加载整个页面。浏览单页面时，浏览区域一开始会加载必需的公共资源(HTML、CSS和JavaScript等)，而后的所有操作都在这张页面上完成，并由JavaScript控制，从而实现单页面跳转仅刷新局部资源，而公共资源无需重复加载。
单页面(single page web application，SPA)：SPA是一种特殊的Web应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript、CSS。一旦页面加载完成，单页面不会因为用户的操作而进行页面的重新加载或跳转，而是利用JavaScript动态的变换HTML(采用的是div切换显示和隐藏)，从而实现UI与用户的交互。在单页面应用中，应用加载之后就不会再有整页刷新。相反，展示逻辑预先加载，并有赖于内容Region(区域)中的视图切换来展示内容。
由于在多页面项目中，页面的跳转方式存在多种形式，针对不同的请求类型，获取跳转路径的获取方式不同：
location.href：获取到其对应值即为跳转路径；
location.replace：通过获取其执行方法的第一个参数，即为跳转路径；
window.open：通过获取其执行方法的第一个参数，即为跳转路径。同时，也会获取到其第二个参数，当第二个参数为_self时，表示在当前页面打开。当为_blank时，表示通过新建一个空白页面打开。后续生成的路由中，会使用到这个参数。
native跳转方法：该项目如果是在hybridapp使用，有可能会使用到native提供的跳转方法，不同的native跳转方法可能存在不同的方法名称，所以当存在这种情况的时候，需要使用工具的开发者，在配置文件config.json中，将native方法名称进行配置。在工具执行过程中，会根据配置文件中所配置的方法名，进行查找到对应的native跳转方法，再根据跳转方法中的入参，获取到跳转路径。
本实施例根据单页面中包含的跳转代码，如A页面，包含了跳转B页面的代码，B页面又包含跳转C页面和D页面代码，D页面又包含跳转回A页面的代码。则可以生成类似A->B->C/D->A的链表数据结构。在链表数据结构中，包含当前多页面的vue组件路径和名称、单页面的vue组件路径和名称。
然后遍历整个链表数据结构，获取到链表数据中所有涉及到的vue组件，通过import语法引入到页面项目的路由主文件中，其中引入的路径即为链表中保存的对应vue组件的路径；通过语法import{createRouter}from'vue-router'，将创建路由的方法，从vue-router库文件中引入到路由主文件中；生成路由配置，对于单个页面路由来说，需要设置路由的名称、路径、路由对应的组件。其中，将路由的名称，与链表中vue组件的名称设置为一致；路径与链表中vue组件的路径设置为一致；路由对应的组件设置为第一步引入的对应组件。当遇到有连续多个页面跳转的情况，如A->B->C这种情况，则会使用嵌套路由的方式，通过在单个路由配置文件中，增加children配置项，配置项的内容与外层路由配置类似。
本实施例将链表数据结构添加至跳转路径作为目标跳转路径，根据所述目标跳转路径切换至单页面。此外，在原多页面中，将跳转方式修改为路由跳转方式，由于原页面的跳转方式，还保留原来的非路由形式，需要通过识别出来的代码，将其按照配置规则进行替换，规则如下：
location.href替换为this.$router.push('路由路径')
location.replace替换为this.$router.replace('路由路径')
window.open：第二个参数为_self，替换为this.$router.replace('路由路径')。第二个参数为_blank，替换为this.$router.push('路由路径')
native跳转方法。根据配置文件config.json中，配置的native方法跳转形式，按照replace替换为this.$router.replace('路由路径')，push替换为this.$router.push('路由路径')的规则，进行替换。
如上所述，可以理解地，本申请中提出的所述页面处理装置的各组成部分可以实现如上所述页面处理方法任一项的功能，具体结构不再赘述。
参照图3，本申请实施例中还提供一种计算机设备，其内部结构可以如图3所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设计的处理器用于提供计算和控制能力。该计算机设备的存储器包括存储介质、内存储器。该存储介质存储有操作系统、计算机程序和数据库。该内存器为存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储链表数据结构、vue-router库文件等数据。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种页面处理方法。
上述处理器执行上述的页面处理方法，包括：
响应于多页面切换成单页面的切换请求，判断当前页面项目中是否引入了vue-router库文件；
若是，根据所述切换请求的请求类型，确定页面切换时的跳转路径的获取方式，根据所述获取方式获取跳转路径；
获取所述单页面包含的跳转代码，根据所述单页面的跳转代码生成链表数据结构；其中，所述链表数据结构包括多页面的vue组件路径和名称、所述单页面的vue组件路径和名称；
将所述链表数据结构添加至所述跳转路径，得到目标跳转路径；
根据所述目标跳转路径切换至所述单页面。
本申请一实施例还提供一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现一种页面处理方法，包括步骤：
响应于多页面切换成单页面的切换请求，判断当前页面项目中是否引入了vue-router库文件；
若是，根据所述切换请求的请求类型，确定页面切换时的跳转路径的获取方式，根据所述获取方式获取跳转路径；
获取所述单页面包含的跳转代码，根据所述单页面的跳转代码生成链表数据结构；其中，所述链表数据结构包括多页面的vue组件路径和名称、所述单页面的vue组件路径和名称；
将所述链表数据结构添加至所述跳转路径，得到目标跳转路径；
根据所述目标跳转路径切换至所述单页面。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的和实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可以包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双速据率SDRAM(SSRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。
综上所述，本申请的最大有益效果在于：
本申请所提供的一种页面处理方法、装置、计算机设备及存储介质，通过响应于多页面切换成单页面的切换请求，判断当前页面项目中是否引入了vue-router库文件，若是，根据切换请求的请求类型，确定页面切换时的跳转路径的获取方式，根据获取方式获取跳转路径，获取单页面包含的跳转代码，根据单页面的跳转代码生成链表数据结构，将链表数据结构添加至跳转路径，得到目标跳转路径，根据目标跳转路径切换到单页面，以完成多页面自动切换到单页面，操作简单，且在有多页面的页面项目需要进行转换成单页面时，无需开发人员掌握两种语法，只需要进行简单配置操作，即可以将多页面项目转换成单页面项目，以最简单快捷的方式，提升页面项目的用户体验。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、装置、物品或者方法不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、装置、物品或者方法所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、装置、物品或者方法中还存在另外的相同要素。
以上所述仅为本申请的优选实施例，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围内。

Claims (10)

1.一种页面处理方法，其特征在于，包括以下步骤：
响应于多页面切换成单页面的切换请求，判断当前页面项目中是否引入了vue-router库文件；
若是，根据所述切换请求的请求类型，确定页面切换时的跳转路径的获取方式，根据所述获取方式获取跳转路径；
获取所述单页面包含的跳转代码，根据所述单页面的跳转代码生成链表数据结构；其中，所述链表数据结构包括多页面的vue组件路径和名称、所述单页面的vue组件路径和名称；
将所述链表数据结构添加至所述跳转路径，得到目标跳转路径；
根据所述目标跳转路径切换至所述单页面。
2.根据权利要求1所述的方法，其特征在于，所述判断当前的页面项目中是否引入了vue-router库文件，包括：
获取当前页面项目中的package.json文件的dependenci es对象；
判断所述dependencies对象内是否包含vue-router键值对；
若是，则判定当前项目引入了vue-router库文件；
若否，则将所述vue-router库文件引入当前页面项目中。
3.根据权利要求1所述的方法，其特征在于，所述响应于多页面切换成单页面的切换请求之前，还包括：
响应于工具引入命令，定位当前页面项目的根目录及项目路径；
根据所述项目路径获取工具，将所述工具加入到当前页面项目的根目录中；其中，所述工具用于响应多页面切换成单页面的切换请求。
4.根据权利要求1所述的方法，其特征在于，所述将所述链表数据结构添加至所述跳转路径，得到目标跳转路径之后，还包括：
根据所述链表数据结构中单页面的多个路由以及每个所述路由关联的子路由，计算每个路由及其关联的子路由总的资源文件大小；
当单个路由及其关联的子路由的资源文件大小大于预设值时，查询子路由中资源最大的一个，将最大子路由对应组件的指向进行改写，以将该子路由根据需要进行加载。
5.根据权利要求1所述的方法，其特征在于，所述根据所述目标跳转路径切换至所述单页面之后，还包括：
响应于用户输入的页面恢复指令，根据所述页面恢复指令从所述单页面切换到所述多页面，并对所述多页面进行恢复。
6.根据权利要求1所述的方法，其特征在于，所述根据所述目标跳转路径切换至所述单页面，包括：
当监测到多个所述目标跳转路径时，获取各所述目标跳转路径上单页面对应的服务状态；
根据所述服务状态对各所述目标跳转路径的跳转完成时长进行预测，得到各所述目标跳转路径的跳转完成时长；
选取跳转完成时长最短的目标跳转路径切换至所述单页面。
7.根据权利要求6所述的方法，其特征在于，所述根据所述服务状态对各所述目标跳转路径的跳转完成时长进行预测，包括：
将每个目标跳转路径中各单页面对应的服务状态输入预先训练好的时长预测机器模型中，得到所述时长预测机器模型输出的跳转完成时长。
8.一种页面处理装置，其特征在于，包括：
判断模块，用于响应于多页面切换成单页面的切换请求，判断当前页面项目中是否引入了vue-router库文件；
确定模块，用于在判定当前页面项目中引入了vue-router库文件时，根据所述切换请求的请求类型，确定页面切换时的跳转路径的获取方式，根据所述获取方式获取跳转路径；
获取模块，用于获取所述单页面包含的跳转代码，根据所述单页面的跳转代码生成链表数据结构；其中，所述链表数据结构包括多页面的vue组件路径和名称、所述单页面的vue组件路径和名称；
添加模块，用于将所述链表数据结构添加至所述跳转路径，得到目标跳转路径；
切换模块，用于根据所述目标跳转路径切换至所述单页面。
9.一种计算机设备，其特征在于，包括：
处理器；
存储器；
其中，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现权利要求1至7任一项所述的页面处理方法。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现权利要求1-7任一项所述的页面处理方法。
CN202111350297.0A 2021-11-15 2021-11-15 页面处理方法、装置、计算机设备及存储介质 Pending CN113934425A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111350297.0A CN113934425A (zh) 2021-11-15 2021-11-15 页面处理方法、装置、计算机设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111350297.0A CN113934425A (zh) 2021-11-15 2021-11-15 页面处理方法、装置、计算机设备及存储介质

Publications (1)

Publication Number Publication Date
CN113934425A true CN113934425A (zh) 2022-01-14

Family

ID=79286652

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111350297.0A Pending CN113934425A (zh) 2021-11-15 2021-11-15 页面处理方法、装置、计算机设备及存储介质

Country Status (1)

Country Link
CN (1) CN113934425A (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114741149A (zh) * 2022-04-15 2022-07-12 北京因数健康科技有限公司 单页应用的页面切换方法及装置、存储介质和电子设备
CN114780800A (zh) * 2022-04-25 2022-07-22 京东城市(北京)数字科技有限公司 一种多链路路由管理方法和装置

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103744932A (zh) * 2013-12-30 2014-04-23 华为技术有限公司 一种页面处理方法及装置
CN110020323A (zh) * 2018-07-27 2019-07-16 平安科技（深圳）有限公司 混合应用的页面切换方法、框架、计算机设备及存储介质

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103744932A (zh) * 2013-12-30 2014-04-23 华为技术有限公司 一种页面处理方法及装置
CN110020323A (zh) * 2018-07-27 2019-07-16 平安科技（深圳）有限公司 混合应用的页面切换方法、框架、计算机设备及存储介质
WO2020019458A1 (zh) * 2018-07-27 2020-01-30 平安科技（深圳）有限公司 混合应用的页面切换方法、框架、计算机设备及存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
MIGHT°: "怎么用Vue-Router实现多页面切换？", Retrieved from the Internet <URL:《https://blog.csdn.net/kzj0916/article/details/107951779》> *

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114741149A (zh) * 2022-04-15 2022-07-12 北京因数健康科技有限公司 单页应用的页面切换方法及装置、存储介质和电子设备
CN114741149B (zh) * 2022-04-15 2024-02-27 北京懿医云科技有限公司 单页应用的页面切换方法及装置、存储介质和电子设备
CN114780800A (zh) * 2022-04-25 2022-07-22 京东城市(北京)数字科技有限公司 一种多链路路由管理方法和装置

Similar Documents

Publication Publication Date Title
CN108287839B (zh) 一种页面加载方法和设备
CN109918079B (zh) 规则引擎系统的规则更新方法、装置和计算机设备
CN111610978B (zh) 一种小程序转换方法、装置、设备及存储介质
CN113934425A (zh) 页面处理方法、装置、计算机设备及存储介质
CN108804159B (zh) javascript模块加载方法及其预处理方法、装置和计算机设备
CN108829477B (zh) 界面跳转方法、装置、计算机设备和存储介质
CN111679965A (zh) 自动化测试方法、装置、计算机设备和存储介质
CN107766344B (zh) 一种模板渲染的方法、装置及浏览器
CN112905939B (zh) Html5页面资源的加载方法、装置、设备及存储介质
CN109614158B (zh) 一种插件的调用方法、系统、存储介质和处理器
Hossny et al. A case study for deploying applications on heterogeneous PaaS platforms
CN110806873B (zh) 目标控件确定方法、装置、电子设备及存储介质
US20150161082A1 (en) Techniques for analyzing web pages to determine font subsets
CN109597618B (zh) 程序开发方法、装置、计算机设备及存储介质
CN112527415A (zh) 小程序跨平台迁移方法、装置、设备和介质
CN111475161A (zh) 一种访问组件的方法、装置及设备
CN113704110A (zh) 用户界面的自动化测试方法及装置
CN110058849A (zh) 流程图的生成方法、装置、计算机设备以及存储介质
CN112417336B (zh) 页面显示方法、装置、电子设备及存储介质
CN113282354A (zh) 应用程序的h5页面加载方法、装置、设备及存储介质
CN113032078A (zh) 页面展示方法、装置、电子设备和计算机可读存储介质
EP2998885A1 (en) Method and device for information search
CN111679828A (zh) 一种数据处理的方法及装置、电子设备、存储介质
CN112528193A (zh) 页面文案处理方法、页面文案管理方法、装置、终端设备、计算机设备及服务器
CN110362305B (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