Vue进阶(六十七)页面刷新路由传参丢失问题分析及解决

news2024/10/6 6:45:08

文章目录

    • 一、前言
    • 二、问题排查
    • 三、延伸阅读
      • 3.1 Apache服务器access_log日志
      • 3.2 浏览器的常见User Agent 各字段的解释

一、前言

问题描述:Vue项目上线后,在IE浏览器上,从A页面跳转至B页面,B页面通过data中接收来自A页面的参数信息,并在created页面生命周期调用服务接口serviceB.1,返回数据后进行B页面数据渲染展示。B页面刷新后,serviceB.1接口入参丢失且未做入参非空校验,导致serviceB.1全表查询,导致内存溢出。

二、问题排查

通过查看Apache应用服务器access_log日志,发现用户在当前页面做了刷新操作。

通过查看代码得知路由传参获取在data中通过this.$route.query.param方式实现。在mounted钩子函数中进行方法调用。

初步怀疑data中获取的参数在页面刷新时由于异步获取导致,在mouted钩子函数执行时还未获取到路由传参。

解决方法是通过设置延时解决,但是延时大小取值不好精准衡量。可在钩子函数方法执行前获取路由传参。

三、延伸阅读

3.1 Apache服务器access_log日志

在这里插入图片描述

Apache的access.log文件在每次有用户访问时都会被记录。这可以是用户浏览网站、下载文件、提交表单或进行其他类型的请求。每条记录都会包含该请求的详细信息,包括:

  • IP地址:请求的客户端IP地址。
  • 时间戳:请求发生的时间。
  • 请求方法:请求使用的HTTP方法(例如GET或POST)。
  • 请求的资源:客户端请求的URL。
  • 状态码:服务器响应的HTTP状态码(例如200或404)。
  • 数据量:服务器响应的数据量。
  • 引用页面:如果存在,该请求的来源页面。
  • User-Agent:客户端使用的浏览器的信息。

可以通过以下步骤来调整Apache的配置,来决定记录的信息种类和细节。

  1. 打开Apache的配置文件:可以使用文本编辑器打开Apache的配置文件,通常位于/etc/httpd/conf/httpd.conf

  2. 查找LogFormat指令:该指令定义了您希望在access.log中记录的信息。

  3. 调整格式字符串:在LogFormat指令中,可以调整格式字符串以指定希望记录的信息。可以参考Apache文档,了解可用的格式字符串字符。

  4. 保存更改:保存更改并退出文本编辑器。

  5. 重新启动Apache:使用以下命令重新启动Apache以使更改生效:

    shell sudo service httpd restart

3.2 浏览器的常见User Agent 各字段的解释

User Agent是指浏览器在向服务器发送请求时,会在请求头中添加的一段字符串,用于标识浏览器的类型、版本、操作系统等信息。常见的User Agent包括以下字段:

  1. Mozilla/5.0:表示浏览器使用的是Mozilla浏览器引擎,版本号为5.0。

  2. (Windows NT 10.0; Win64; x64):表示操作系统为Windows 10,使用的是64位架构。

  3. AppleWebKit/537.36:表示浏览器使用的是Webkit引擎,版本号为537.36。

  4. (KHTML, like Gecko):表示浏览器使用的是KHTML渲染引擎,类似于Gecko。

  5. Chrome/91.0.4472.124:表示浏览器为Chrome,版本号为91.0.4472.124。

  6. Safari/537.36:表示浏览器为Safari,版本号为537.36。

  7. Edge/91.0.864.59:表示浏览器为Edge,版本号为91.0.864.59。

  8. Mozilla/4.0:表示浏览器使用的是Mozilla浏览器引擎,版本号为4.0。

  9. (compatible; MSIE 7.0; Windows NT 6.0):表示浏览器为IE7,操作系统为Windows Vista。

  10. (Windows NT 6.1; WOW64; Trident/7.0; AS; rv:11.0) like Gecko:表示浏览器为IE11,操作系统为Windows 7,使用的是Trident引擎。

  • Mozilla/5.0: 网景公司浏览器的标识,由于互联网初期浏览器市场主要被网景公司占领,很多服务器被设置成仅响应含有标志为Mozilla的浏览器的请求,因此,新款的浏览器为了打入市场,不得不加上这个字段。

  • Windows NT 6.3 : Windows 8.1的标识符;

  • WOW64: 32位的Windows系统运行在64位的处理器上;

  • AppleWebKit/537.36:苹果公司开发的呈现引擎;

  • KHTML:是Linux平台中Konqueror浏览器的呈现引擎KHTML;

  • Geckeo:呈现引擎;

  • like Gecko:表示其行为与Gecko浏览器引擎类似;

例如User-Agent 信息如下:

User-Agent: Mozilla/5.0(Windows NT10.0; WOW64; Trident/7.0; rv:11.0) like Gecko

上述代理信息可以解析为:应用系统运行在Win10, IE11浏览器上,使用的Trident引擎。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/978474.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JavaScript简称“JS”简单介绍

JavaScript简称“JS” JavaScript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为 开发 Web 页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中, JavaScript 基于原型编…

使用自定义注解和SpringAOP捕获Service层异常,并处理自定义异常

目录 一 自定义异常二 自定义注解三 注解切面处理类四 使用 一 自定义异常 /*** 自定义参数为null异常*/ public class NoParamsException extends Exception {//用详细信息指定一个异常public NoParamsException(String message){super(message);}//用指定的详细信息和原因构…

Matlab图像处理-低通滤波

低通滤波 频域低通滤波法可以去除或削弱图像的高频成分,以去掉噪声使图像平滑。 理想低通滤波器是指输入信号在通带内所有频率分量完全无损地通过,而在阻带内所有频率分量完全衰减。 低通滤波的效果是图像去噪声平滑增强,但同时也抑制了图…

关于10月份美国FDA化妆品强制注册通知要求及注意事项

根据美国法律,产品是化妆品还是药物取决于产品的预期用途。如果商品是化妆品用途,那FDA要求产品在FDA系统上进行申报即可;如果化妆品带有药用功效,在查验时要出具FDA正本。 1.所有在美市场流通的化妆品制造商皆须于2023/12/29前完…

nuxt3项目使用pdfjs-dist预览pdf

使用的包的源代码是 pdfjs - npm 但是我们实际上项目中使用的是pdfjs打包后的dist文件,也就是pdfjs-dist - npm 所以我们需要使用这个命令 npm i pdfjs-dist 我们可以克隆pdfjs这个包来看源代码,里面有使用的例子,也可以根据源代码自己打…

18|乐观豁达:黄州重生的苏轼

好诗相伴,千金不换。你好,我是天博。 从这一讲开始,我们进入了这门课的最后一个主题:“见自己”。在这个主题里,我们会把重点放在“诗词给了我们什么”上,也就是怎样从诗词里汲取对我们有帮助的精神力量。…

中级深入--day19

鼠标动作链 有些时候,我们需要再页面上模拟一些鼠标操作,比如双击、右击、拖拽甚至按住不动等,我们可以通过导入 ActionChains 类来做到: 示例: #导入 ActionChains 类 from selenium.webdriver import ActionChains…

异步编程 - 01 漫谈异步编程发展史

文章目录 同步编程vs异步编程异步编程小故事单JVM异步地处理一些事情,而不需要知道异步任务的结果主线程等待异步任务的执行结果Future确实可以获取异步任务的执行结果,但是获取其结果还是会阻塞调用线程的,并没有实现完全异步化处理 --> …

LabVIEW应用开发——LabVIEW2019保姆级介绍、安装、第一个程序

一、前言 LabVIEW是一种程序开发环境,由美国国家仪器(NI)公司研制开发,类似于C和BASIC开发环境,但是LabVIEW与其他计算机语言的显著区别是:其他计算机语言都是采用基于文本的语言产生代码,而Lab…

JavaSE-日志

世上只有想不通的人,没有走不通的路。 文章目录 1. 日志概述2. Logback日志框架3. Logback快速入门4. Logback配置详解输出位置设置日志级别设置 1. 日志概述 通过日志可以查看程序运行的过程和详情。 输出语句的弊端: 信息只能展示在控制台。不能将其记…

java读取服务器数据包并下载至本地目录

jsch包如果没有的话,可评论联系我,我私发给你,或者通过https://mvnrepository.com/artifact/com.jcraft/jsch/0.1.55进行下载,添加至工程目录 package com.hbisdt.dqbasic.modular.util;import com.jcraft.jsch.*;import java.i…

OpenShift 4 - 利用 OpenShift 的 OAuth Proxy 实现应用身份认证

《OpenShift / RHEL / DevSecOps 汇总目录》 说明:本文已经在 OpenShift 4.13 的环境中验证 文章目录 部署测试应用只有认证用户才能访问只有有权的用户才能访问使用 ServiceAccount 访问参考 说明: 本文需要集群中除了管理员外还有一个一般用户。另外除…

Leetcode 1486.数组异或操作

给你两个整数,n 和 start 。 数组 nums 定义为:nums[i] start 2*i(下标从 0 开始)且 n nums.length 。 请返回 nums 中所有元素按位异或(XOR)后得到的结果。 示例 1: 输入:n 5, …

NPM 常用命令(四)

目录 1、npm diff 1.1 描述 1.2 过滤文件 1.3 配置 diff diff-name-only diff-unified diff-ignore-all-space diff-no-prefix diff-src-prefix diff-dst-prefix diff-text global tag workspace workspaces include-workspace-root 2、npm dist-tag 2.1 常…

79 # koa 相应结果设置

返回的类型可能是文件流,或者是对象的等方式,需要我们对 body 的类型进行判断在返回。 判断是否是 string 或者 buffer 、流、对象 if (typeof body "string" || Buffer.isBuffer(body)) {res.end(body); } else if (body instanceof Strea…

大模型参数高效微调技术原理综述(三)-P-Tuning、P-Tuning v2

随着,ChatGPT 迅速爆火,引发了大模型的时代变革。然而对于普通大众来说,进行大模型的预训练或者全量微调遥不可及。由此,催生了各种参数高效微调技术,让科研人员或者普通开发者有机会尝试微调大模型。 因此&#xff0c…

面试题速记:JavaScript有哪些数据类型,它们的区别是?

JavaScript有哪些数据类型,它们的区别? JavaScript共有八种数据类型,分别是 Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。 其中 Symbol 和 BigInt 是ES6 中新增的数据类型: ●Symbol 代表创建后独一无二…

vue3 element - plus 安装使用教程

下边是安装教程 element - plus 是针对 vue3 开发 一个 Vue 3 UI 框架 | Element Plus (element-plus.org)https://element-plus.org/zh-CN/ 安装 element - plus ui 库 # 选择一个你喜欢的包管理器# NPM $ npm install element-plus --save# Yarn $ yarn add elemen…

python 学习笔记(4)—— webdriver 自动化操作浏览器(基础操作)

安装 web driver: 使用 driver 前,需要下载与浏览器版本相对应的 driver。如要在 Chrome 浏览器上操作,就要下载Chrome Driver。 几个常用浏览器的参考和下载地址: Edge Driver:https://developer.microsoft.com/en…

C++内存区堆和栈

在C中,内存分成5个区,堆、栈、自由存储区、全局/静态存储区和常量存储区。 栈,就是那些由编译器在需要的时候分配,在不需要的时候自动清除的变量的存储区。里面的变量通常是局部变量、函数参数等。 堆,就是那些…