Vue进阶（六十七）页面刷新路由传参丢失问题分析及解决
文章目录
- 一、前言
- 二、问题排查
- 三、延伸阅读
- 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的配置，来决定记录的信息种类和细节。
打开Apache的配置文件：可以使用文本编辑器打开Apache的配置文件，通常位于
/etc/httpd/conf/httpd.conf。查找
LogFormat指令：该指令定义了您希望在access.log中记录的信息。调整格式字符串：在
LogFormat指令中，可以调整格式字符串以指定希望记录的信息。可以参考Apache文档，了解可用的格式字符串字符。保存更改：保存更改并退出文本编辑器。
重新启动Apache：使用以下命令重新启动Apache以使更改生效：
shell sudo service httpd restart
3.2 浏览器的常见User Agent 各字段的解释
User Agent是指浏览器在向服务器发送请求时，会在请求头中添加的一段字符串，用于标识浏览器的类型、版本、操作系统等信息。常见的User Agent包括以下字段：
Mozilla/5.0：表示浏览器使用的是Mozilla浏览器引擎，版本号为5.0。(
Windows NT 10.0; Win64; x64)：表示操作系统为Windows 10，使用的是64位架构。
AppleWebKit/537.36：表示浏览器使用的是Webkit引擎，版本号为537.36。(
KHTML, like Gecko)：表示浏览器使用的是KHTML渲染引擎，类似于Gecko。
Chrome/91.0.4472.124：表示浏览器为Chrome，版本号为91.0.4472.124。
Safari/537.36：表示浏览器为Safari，版本号为537.36。
Edge/91.0.864.59：表示浏览器为Edge，版本号为91.0.864.59。
Mozilla/4.0：表示浏览器使用的是Mozilla浏览器引擎，版本号为4.0。(
compatible; MSIE 7.0; Windows NT 6.0)：表示浏览器为IE7，操作系统为Windows Vista。(
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引擎。
相关文章：
Vue进阶（六十七）页面刷新路由传参丢失问题分析及解决
文章目录 一、前言二、问题排查三、延伸阅读3.1 Apache服务器access_log日志3.2 浏览器的常见User Agent 各字段的解释 一、前言 问题描述：Vue项目上线后，在IE浏览器上，从A页面跳转至B页面，B页面通过data中接收来自A页面的参数信…...
阿里云ubuntu服务器搭建ftp服务器
阿里云ubuntu服务器搭建ftp服务器 服务器环境安装步骤一.创建用户二.安装 vsftp三 配置vsftp四.配置阿里云安全组 服务器环境 阿里云上的云服务器，操作系统为 ubuntu20.04。 安装步骤 一.创建用户 为什么需要创建用户？ 这里的用户，指的是…...
03 卷积操作图片
一、均值滤波 # 卷积操作 # 输入图片. input, 必须是4维tensor(图片数量, 图片高度, 图片的宽度, 图片的通道数) # filters, 卷积核, 必须是4维的tensor(卷积核的高度和宽度, 输入图片的通道数, 卷积核的个数) # strides, 步长, 卷积核在图片的各个维度上的移动步长, (1, 1, 1,…...
软考：中级软件设计师:程序语言基础：表达式，标准分类，法律法规，程序语言特点，函数传值传址
软考：中级软件设计师:程序语言基础：表达式 提示：系列被面试官问的问题，我自己当时不会，所以下来自己复盘一下，认真学习和总结，以应对未来更多的可能性 关于互联网大厂的笔试面试，都…...
Java“牵手”1688商品详情数据，1688商品详情API接口，1688API接口申请指南
1688平台商品详情接口是开放平台提供的一种API接口，通过调用API接口，开发者可以获取1688商品的标题、价格、库存、月销量、总销量、库存、详情描述、图片等详细信息 。 获取商品详情接口API是一种用于获取电商平台上商品详情数据的接口，通过…...
stable diffusion实践操作-批次出图
系列文章目录 stable diffusion实践操作 文章目录 系列文章目录前言一、批次出图介绍1.1 webUI设置1.2 参数介绍 二、批次出图使用2.1 如何设置2.1 效果展示 总结 前言 本章主要介绍SD批次出图。 想要一次产生多张图片的时候使用。 一、批次出图介绍 1.1 webUI设置 1.2 参数…...
LeetCode热题100 【cpp】题解（一）哈希表和双指针
文章目录 1. 两数之和49. 字母异位词分组128. 最长连续序列283. 移动零11. 盛最多水的容器15. 三数之和42. 接雨水 题单链接： LeetCode 热题 100 1. 两数之和 leetcode题目链接 题解1：暴力枚举 时间复杂度： O ( n 2 ) O(n^2) O(n2) class …...
Python爬虫常见代理池实现和优化
在这篇文章中，我们将探讨Python爬虫中常见的代理池实现和优化方法。在爬取网站数据时，为防止被目标网站封禁IP，我们通常会使用代理IP进行访问。一个高效且稳定的代理池可以帮助我们轻松应对各种反爬策略。 首先，我们来了解一下…...
前端面试的话术集锦第 3 篇：进阶篇上
这是记录前端面试的话术集锦第三篇博文——进阶篇上，我会不断更新前端面试话术的博文。❗❗❗ 1 谈谈变量提升 当执⾏JS代码时，会⽣成执⾏环境，只要代码不是写在函数中的，就是在全局执⾏环境中，函数中的代码会产⽣函数执⾏环境，只此两种执⾏环境。 b() // call b conso…...
【文字到语音的论文总结】
1.文字到语音的整个过程 文字到语音的一般整体结构 主要是下面这个流程，每个网络可能会把其中两者或是三者融合在一起来； 长度不同的问题 生成的语音可能和文字的长度并不一样，因此需要解决这个问题 Tactron使用的是交叉注意力的方式解…...
E. Data Structures Fan(思维 + 异或前缀和)
Problem - E - Codeforces 给你一个整数数组 a1, a2,..., an，以及一个由 n 个字符组成的二进制字符串† s。 Augustin 是一个数据结构的爱好者。因此，他请你实现一个可以回答 q 个查询的数据结构。这里有两种类型的查询： Plain Text "1…...
初学python爬虫学习笔记——爬取网页中小说标题
初学python爬虫学习笔记——爬取网页中小说标题 一、要爬取的网站小说如下图 二、打开网页的“检查”，查看html页面 发现每个标题是列表下的一个个超链接，从183.html到869.html 可以使用for循环依次得到： x range(183,600) for i in x:pr…...
The WebSocket session [x] has been closed and no method (apart from close())
在向客户端发送消息时，session关闭了。 不管是单客户端发送消息还是多客户端发送消息，在发送消息之前判断session 是否关闭 使用 isOpen() 方法...
前端实现展开收起的效果 (react)
需求背景：需要实现文本的展开收起效果，文本是一行一行的，数据格式是数组结构。 如图所示（图片已脱敏） 简单实现：使用一个变量控制展开收起效果。 展开收起逻辑部分（react） const […...
ABY2.0：更低的通信开销
参考文献： [ABY] Demmler D, Schneider T, Zohner M. ABY-A framework for efficient mixed-protocol secure two-party computation[C]//NDSS. 2015.[ABY3] Mohassel P, Rindal P. ABY3: A mixed protocol framework for machine learning[C]//Proceedings of the…...
vue项目预览图片
1.图片为本地上传的预览： <input type"file" ref"file"/> <img :src"imgUrl"/>let fr new FileReader()fr.readAsArrayBuffer(this.$refs.file.files[0])fr.addEventListener("loadend", (e) > {let buff…...
Tomcat 安装
1.关闭防火墙 2.安装JDK包 3. 4。添加环境变量 5.刷新配置文件 6.解压文件 7.启动tomcat 8. 9.编写tomcat.service文件 vim /etc/systemd/system/tomcat.service 10.刷新服务 11.打开浏览器访问：192.168.2.100:8080/，正常可以看到以下界面...
计算机网络的故事——HTTP报文内的HTTP信息
HTTP报文内的HTTP信息 文章目录 HTTP报文内的HTTP信息一、HTTP 报文二、请求报文及响应报文的结构三、编码提升传输速率 一、HTTP 报文 HTTP报文是由多行（CRLF作换行符）数据构成的字符串文本，HTTP报文可以分为报文首部和报文主体两部分&…...
CF1120 D. Power Tree 巧妙的图论转化
传送门 [前题提要]:无 题目描述: 就是给你一棵树,然后每个点有花费,然后你可以选一个点,付费后对这个点的子树的所有叶子结点增减任意权值. 考虑有一个人会给这棵树的所有叶子结点赋值(值我们不知道),输出最小的花费,使得无论它如何赋值,我们使用上述的花 费都能使所有的叶子…...
【算法训练-字符串 三】最长公共子串、最长公共子序列
废话不多说，喊一句号子鼓励自己：程序员永不失业，程序员走向架构！本篇Blog的主题是【】，使用【】这个基本的数据结构来实现，这个高频题的站点是：CodeTop，筛选条件为：目标公…...
Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动
一、前言说明 在2011版本的gb28181协议中，拉取视频流只要求udp方式，从2016开始要求新增支持tcp被动和tcp主动两种方式，udp理论上会丢包的，所以实际使用过程可能会出现画面花屏的情况，而tcp肯定不丢包，起码…...
通过Wrangler CLI在worker中创建数据库和表
官方使用文档：Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后，会在本地和远程创建数据库： npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库： 现在，您的Cloudfla…...
高等数学（下）题型笔记（八）空间解析几何与向量代数
目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...
Nginx server_name 配置说明
Nginx 是一个高性能的反向代理和负载均衡服务器，其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机（Virtual Host）。 1. 简介 Nginx 使用 server_name 指令来确定…...
Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级
在互联网的快速发展中，高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司，近期做出了一个重大技术决策：弃用长期使用的 Nginx，转而采用其内部开发…...
WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成
厌倦手动写WordPress文章？AI自动生成，效率提升10倍！ 支持多语言、自动配图、定时发布，让内容创作更轻松！ AI内容生成 → 不想每天写文章？AI一键生成高质量内容！多语言支持 → 跨境电商必备&am…...
Spring是如何解决Bean的循环依赖：三级缓存机制
1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间互相持有对方引用，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...
【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化
缓存架构 代码结构 代码详情 功能点： 多级缓存，先查本地缓存，再查Redis，最后才查数据库热点数据重建逻辑使用分布式锁，二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...
python打卡day49@浙大疏锦行
知识点回顾： 通道注意力模块复习空间注意力模块CBAM的定义 作业：尝试对今天的模型检查参数数目，并用tensorboard查看训练过程 一、通道注意力模块复习 & CBAM实现 import torch import torch.nn as nnclass CBAM(nn.Module):def __init__…...
react更新页面数据，操作页面，双向数据绑定
// 路由不是组件的直接跳转use client，useEffect，useRouter，需3个结合， use client表示客户端 use client; import { Button,Card, Space,Tag,Table,message,Input } from antd; import { useEffect,useState } from react; impor…...