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，筛选条件为：目标公…...
(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目：3442. 奇偶频次间的最大差值 I 思路 ：哈希，时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况，哈希表这里用数组即可实现。 C版本： class Solution { public:int maxDifference(string s) {int a[26]…...
DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：
在 HarmonyOS 应用开发中，手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力，既支持点击、长按、拖拽等基础单一手势的精细控制，也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档，…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能，多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统，涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能，适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
pam_env.so模块配置解析
在PAM（Pluggable Authentication Modules）配置中， /etc/pam.d/su 文件相关配置含义如下： 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块，负责验证用户身份&am…...
如何将联系人从 iPhone 转移到 Android
从 iPhone 换到 Android 手机时，你可能需要保留重要的数据，例如通讯录。好在，将通讯录从 iPhone 转移到 Android 手机非常简单，你可以从本文中学习 6 种可靠的方法，确保随时保持连接，不错过任何信息。 第 1…...
【Oracle】分区表
个人主页：Guiat 归属专栏：Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...
技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列？2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...
智能AI电话机器人系统的识别能力现状与发展水平
一、引言 随着人工智能技术的飞速发展，AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术，在客户服务、营销推广、信息查询等领域发挥着越来越重要…...
SQL慢可能是触发了ring buffer
简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...