记录一次老平台改造通知用户刷新页面,纯前端实现
记录一次老平台改造通知用户刷新页面,纯前端实现
- 方案概述
- 背景
- 现状
- 问题本质
- 方案设计
- 前提
- 设计
- 实现
- 其他补充
- 写在最后的话
- 抛出一个问题
方案概述
背景
前端构建完上线,用户还停留还在老页面,用户不知道网页重新部署了,跳转页面的时候有时候js连接hash变了导致报错跳不过去,并且用户体验不到新功能。
客户打网页后,长时间不关闭对应标签页,也不刷新页面(在中后台管理项目挺常见的),且期间服务器页面有更新,经常出现
现状
目前我们或者合作商情况有如下几种情况:
- 目前路由hash模式,也就是锚点的形式,造成缓存问题;
- 在用户无感知的情况下升级平台,而用户因历史访问,无法获取最新的资源,造成用户体验差;
- 升级平台后,可能出现资源访问不到情况;
在现有的平台体系中,由于现在平台架构趋于一个成熟的阶段,基于改动最小、影响最小的原则的情况下,来设计适合目前平台的一套合理的方案解决这些问题;
问题本质
目前平台采用的hash的模式处理,也就是我们常说的锚点的形式,改方式的和history的不同是,histroy 的每次url变化都会像后端服务器请求,会重载页面index.html,这就是单页面history 需要在服务器上配置重定向到index.html的原因;而我们平台使用hash的形式,这种形式,只有在首次加载或者刷新页面的时候会重新请求服务器的index.html,相应的资源在这种情况下才会加载新的资源,url 地址变换并不会向history一样请求服务器,而是前端自主完成,所以在第一次访问完成之后,主要的js已经加载啦,后面操作都是根据主js的相关解析,请求相应的资源!所以在这种情况更新系统 造成资源是旧的或者资源请求不到的情况!
方案设计
前提
基于目前的平台框架,一切改动不能脱离现有的框架,对现有的入侵最小,其他的项目直接复用。
设计
-
打包生成的目录生成相应的项目指纹信息,也就是表示,可以是版本号、时间戳、哈希值等等;
-
路由钩子触发检测当前版本或者资源是否最新状态,来处理相应的逻辑,流程图如下
tips:
上面流程有点改动,改成点击菜单触发,这个在生产环境上大量测试上的改动。
实现
-
编写rollup(vite)插件
-
vite打包改造,下面可以根据项目需要是否考虑加入,viite本身的打包模式,文件发生变动,打出来的文件名hash 会发生变化,未改动的文件还是之前的文件名格式
tips
: 上面为了好看,当然也可以不改,默认输出的就是带hash的js文件; -
路由钩子处理菜单上点击菜单处理
tips
: 为啥没有放到钩子里面处理,是因为点击菜单会有请求资源直接报错啦,不会走钩子,所以无法触发更新的接口,当然可以放到离开的钩子上处理,目前用的保守做法,点击前置触发。
- 服务器Nginx上配置,红色部分是为了重载index.html禁止缓存这个html信息
通过 nginx ,禁用缓存:
# nginx.conf
location / {root html;root /Volumes/wanglaibin/work/vite-project/distindex index.html index.htm;if ( $uri = '/index.html' ) { # disabled index.html cacheadd_header Cache-Control "no-cache, no-store, must-revalidate";}try_files $uri $uri/ /index.html;
}
直接通过 html meta 标签禁用缓存:
<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="0" /></head>
</html>
其他补充
浏览器放大缩小,tab页激活触发
document.addEventListener('visibilitychange', async () => {if (document.visibilityState === 'visible') {console.log('当前会话被激活')await versionCheck()console.log('当前会话被激活-end')}})
浏览器聚焦触发
window.addEventListener('focus', async() => {console.log('当前会话成为焦点')await versionCheck()console.log('当前会话成为焦点-end')})
浏览器js资源加载失败
window.addEventListener('error', async (err) => {const errTagName = (err?.target as any)?.tagNameif (errTagName === 'SCRIPT'){console.log('js 资源加载失败')await versionCheck()console.log('js 资源加载失败-end')}},true)
写在最后的话
其实具体到项目场景更为复杂,所以我们都是从问题入手、排查、方案等处理方式,不同的项目不同的处理方式,当然目前的对于当前来说更好的!当然可能过几个月就不一定啦!
抛出一个问题
其他我们平台还有比较棘手,目前已经处理,在测试过程中。我可以跟你们描述下问题就是可以一个浏览器多个tab可以登陆不同的账号,也可以登陆相同的账号,不同的账号不同的token,相同的账号也是不同的token 但是这些token写到session里面,页面内部也可以新开tab,内部新开的tab是相同的token,系统也要有一个token续期的功能,系统内部新开的tab 保证token同步不能失效,系统内部两个token ,一个接口token,一个刷新token,要用刷新token在失效前换取新的token之后同步到系统内部新开的tab中,但是但不能影响其他的账号登陆以及相同账号登陆的token。
或许为啥这样设计,没办法历史原因,现在就是后端不动,前端做token续期。
相关文章:
记录一次老平台改造通知用户刷新页面,纯前端实现
记录一次老平台改造通知用户刷新页面,纯前端实现 方案概述背景现状问题本质 方案设计前提设计实现 其他补充写在最后的话抛出一个问题 方案概述 背景 前端构建完上线,用户还停留还在老页面,用户不知道网页重新部署了,跳转页面的时…...
ubuntu22.04 使用可以用的镜像源获取你要的镜像
默认的是不行的 不管pull啥镜像 仍然会出现这个错误 Error response form daemon:Get "https://registry-1.docker.io/v2": net/http: request canceled while waiting for connection (Client.Timeout exceeded while await) 操作方法是 如果在目录没有/etc/docker…...
Chrome扩展程序开发示例
项目文件夹内文件如下: manifest.json文件内容: {"manifest_version": 3,"name": "我的法宝","description": "我的有魔法的宝贝","version": "1.0","icons": {"…...
Linux 下使用飞鸽传书实现与Windows飞秋的通信
最近把单位的办公电脑换成Linux系统,但是其他同事们都使用飞秋2013进行局域网通信和文件传输,经过一番尝试,发现飞鸽传书For Linux 2014能够实现两者的互相通信。 飞鸽传书ForLINUXLinux版下载_飞鸽传书ForLINUX免费下载_飞鸽传书ForLINUX1.2…...
docker批量创建cloudstack虚拟主机脚本
批量创建cloudstack脚本 #!/bin/bash # 配置变量 container_prefix"cloudworker-" base_ip"192.168.1." start_ip2 #开始ip start_container2 #上同 end_container4 #结束ip 包括 network_name"my_macvlan_network" image_name"dockedahi:…...
SpringBoot项目集成MinIO
最近在学习MinIO,所以想让自己的SpringBoot项目集成MinIO,在网上查阅资料,并进行操作的过程中遇到一些问题,所以想把自己遇到的坑和完成步骤记录下来供自己和各位查阅。 一. MinIO的下载安装以及基本使用 1. 下载地址:https://d…...
【Flutter】常用样式、方法、组件(长期更新中)
一、样式设置 设置颜色透明度:color: Color(0xff4B9E32).withOpacity(0.08) 二、常用方法 数组排序:list.sort(); **升序**:(obj1, obj2) > obj1.compareTo(obj2) **降序**:(obj1, obj2) > obj2.compareTo(obj1)obj1.co…...
dbus接口方法的variant类型传参详解
python实现c++中so库调用及dbus服务开发-CSDN博客 之前写的这篇博文介绍了如何创建一个dbus服务,但是注册的接口方法的入参还是比较简单的,实际上dbus的参数类型有很多种,调用方式也有多种,我们来逐一介绍下。 其实基础数据类型,如字符串、整型、浮点型、布尔型等大多数…...
【时时三省】(NIT计算机考试)Word的使用方法
山不在高,有仙则名。水不在深,有龙则灵。 ----CSDN 时时三省 一、软件简介 Microsoft Word,简称Word,是微软公司开发的一款文字处理软件,广泛应用于文档编辑、排版、打印等领域。无论是撰写论文、报告、简历…...
spring技术点
引入对象 Autowired 和 Resource的区别 Autowired 和 Resource的区别 valid 参数校验 jarkata进行SpringMVC校验 常规当前进行校验的配置操作,参考文档如下进行操作。 SpringMVC校验注解不生效 List类型参数校验 由于list类型默认不能进行标注校验实现&#x…...
工业—使用Flink处理Kafka中的数据_ChangeRecord1
使用 Flink 消费 Kafka 中 ChangeRecord 主题的数据,当某设备 30 秒状态连续为 “ 预警 ” ,输出预警 信息。当前预警信息输出后,最近30...
实验日志——DETR
DETR训练日志 1. 代码来源 代码源自作者的Github: https://github.com/facebookresearch/detr?tabreadme-ov-file 2. 数据来源 在DETR中只使用了COCO2017数据集,其中训练集有118288张图像,验证集有5001张数据,测试集有40671张数据&#…...
前端常用缓存技术深度剖析
🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…...
汽车IVI中控开发入门及进阶(三十七):基于HFP协议的蓝牙电话
概述: HFP全称Hands-free Profile,是一款让蓝牙设备控制电话的软件,多用于汽车上。此类设备最常见的例子是车载免提装置与蜂窝电话或可穿戴无线耳机一起使用。该配置文件定义了支持免提配置文件的两个设备如何在点对点的基础上相互交互。免提模式的实现通常使耳机或嵌入式免…...
分布式系统架构1:共识算法Paxos
1.背景 今天开始更新分布式的文章,工作几年后还没系统的学习分布式的内容,趁着还有时间学习沉淀的时候多输出些文章 2.为什么需要分布式共识算法 思考:现在你有一份随时变动的数据,需要确保它正确存储在网络的几台不同机器上&a…...
大语言模型应用Text2SQL本地部署实践初探
自从两年前OpenAI公司发布ChatGPT后,大模型(Large Language Model,简称LLM)相关技术在国内外可谓百家争鸣,遍地开花,在传统数据挖掘、机器学习和深度学习的基础上,正式宣告进入快速发展的人工智能(Artificial Intellig…...
C# WPF抽奖程序
C# WPF抽奖程序 using Microsoft.Win32; using System; using System.Collections.Generic; using System.Diagnostics; using System.IO; using System.Linq; using System.Text; using System.Threading; using System.Threading.Tasks; using System.Windows; using System.…...
linux运维命令
防火墙相关命令 防火墙规则查看 firewall-cmd --list-all 禁ping firewall-cmd --permanent --add-rich-rulerule protocol valueicmp drop firewall-cmd --reload 执行完以上命令后,通过firewall-cmd --list-all查看规则生效情况 firewall-cmd --list-all 其…...
环境兼容: Vue3+ELement-plus
题目:环境兼容: Vue3ELement-plus 前言 身为小白的我也在负责一个项目咯,开发的是Vue3项目,然后就搜阅多篇文章,整理了这个。内容很多是转载的,拼成的我这个文章。 Element-plus简介 Element-plus 是基于…...
解决 PyTorch 中的 AttributeError: ‘NoneType‘ object has no attribute ‘reshape‘ 错误
这里写目录标题 一、错误分析二、错误原因三、解决方案1. 检查损失函数2. 检查前向传播3. 检查 backward 函数4. 检查梯度传递 四、前向传播与反向传播1. 前向传播2. 反向传播3. 自定义 backward 函数示例反向传播过程:常见的错误:1:损失函数…...
Unity 设计模式-命令模式(Command Pattern)详解
命令模式(Command Pattern)是一种行为型设计模式,它将请求封装成对象,从而使得可以使用不同的请求、队列或日志请求,以及支持可撤销的操作。命令模式通常包含四个主要角色:命令(Command…...
如何解决maven项目使用Ctrl + /添加注释时的顶格问题
一、问题描述 相信后端开发的程序员一定很熟悉IDEA编译器和Maven脚手架,使用IDEA新建一个Maven工程,通过SpringBoot快速构建Spring项目。在Spring项目pom.xml文件中想添加注释,快捷键Ctrl /,但是总是顶格书写。 想保证缩进统一…...
网络安全信息收集(总结)更新
目录 重点: 前言: 又学到了,就是我们什么时候要子域名收集,什么时候收集域名,重点应该放前面 思考: 信息收集分为哪几类,什么是主域名,为什么要收集主域名,为什么要收…...
微服务-seata分布式事务
1.简述 1.1.什么是分布式事务 事务:是应用程序中一系列严密的操作,所有操作必须成功完成,要么全部失败,ACID 特性。本地事务:关系型数据库中,由一组SQL组成的一个执行单元,该单元要么整体成功,要么整体失败ÿ…...
(亲测好用)YOLO格式txt数据集转COCO格式json
1、数据集结构形式 YOLO格式数据集: b文件夹下有images和labels两个文件夹,分别存放图片和标签格式的数据。 两个文件夹下分别有train、val、test三个文件夹,里面存放对应的数据。 COCO数据集格式: COCO格式数据文件夹下有三个…...
LVS的DR模式是否依赖内核的数据包转发
LVS的DR模式是否依赖内核的数据包转发 是的,LVS(Linux Virtual Server) 的 DR(Direct Routing)模式 依赖于 内核的数据包转发。在 DR 模式下,数据包的转发行为是由 Linux 内核进行的,因此正确配…...
沿着数组的指定轴对每行(列)应用一个函数np.apply_along_axis
【小白从小学Python、C、Java】 【考研初试复试毕业设计】 【Python基础AI数据分析】 沿着数组的指定轴 对每行(列)应用一个函数 np.apply_along_axis [太阳]选择题 根据题目代码,执行的结果是? import numpy as np array np.array([[1, 2, 3],…...
BEPUphysicsint定点数3D物理引擎使用
原文:BEPUphysicsint定点数3D物理引擎使用 - 哔哩哔哩 上一节給大家介绍了BEPUphysicsint的一些基本的情况,这节课我们来介绍它的基本使用,本节主要从以下5个方面来介绍: (1) 创建一个物理世界Space,并开启模拟迭代; (2) 添加一个物理物体…...
LinuxUDP编程
由于UDP是无连接、尽力传输的,所以Server端绑定完IP、端口号后,使用recvfrom可以阻塞等待客户端的数据,而且Client端通过sendto发送的数据包直接发送到互联网(也是基于IP、端口号)这种操作是不担保Server端是否收到的&…...
Elasticsearch vs 向量数据库:寻找最佳混合检索方案
图片来自Shutterstock上的Bakhtiar Zein 多年来,以Elasticsearch为代表的基于全文检索的搜索方案,一直是搜索和推荐引擎等信息检索系统的默认选择。但传统的全文搜索只能提供基于关键字匹配的精确结果,例如找到包含特殊名词“Python3.9”的文…...
Android显示系统(07)- OpenGL ES - 纹理Texture
Android显示系统(02)- OpenGL ES - 概述 Android显示系统(03)- OpenGL ES - GLSurfaceView的使用 Android显示系统(04)- OpenGL ES - Shader绘制三角形 Android显示系统(05)- OpenGL…...
C#加速Bitmap存图
如果希望大幅提高图像保存速度,特别是在处理非常大的图像时,可以尝试以下更直接、更高效的方法: 1. 避免使用 Bitmap 类的 Save 方法 Bitmap.Save 方法的速度受限于 GDI 库的操作,尤其是对于非常大的图像,它可能会经历…...
打通Vue3+Flask(python3)+Mysql-实现简单数据交互
一、需要准备的工具 下载python3,Vscode,pycharm(这里用的社区版),phpstudy_pro,Node.js(建议下载长期支持版本,版本不宜过低,比如18,20),Vue.js…...
PT8M2102 触控型 8Bit MCU
1 产品概述 ● PT8M2102 是一款基于 RISC 内核的8位 MTP 单片机,内部集成了电容式触摸感应模块、TIMER,PWM、LVR、LVD、WDT等外设,其主要用作触摸按键开关,广泛适用于触控调光、电子玩具、消费电子、家用电器等领域,具…...
【PyQt5教程 一】Qt Designer 安装及其使用方法说明,附程序源码
目录 一、PyQt5介绍: (1)PyQt简介: (2)PyQt API: (3)支持的环境: (4)安装: (5)配置环境变量…...
Spark on Yarn安装配置,大数据技能竞赛(容器环境)
Spark on Yarn模式,即把Spark作为一个客户端,将作业提交给Yarn服务,由于在生产环境中,很多时候都要与Hadoop使用同一个集群,因此采用Yarn来管理资源调度,可以有效提高资源利用率。 环境说明: 服…...
★ 数据结构 ★ 排序
Ciallo~(∠・ω< )⌒☆ ~ 今天,我将和大家一起学习数据结构中的各种排序~ ❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️❄️ 澄岚主页:椎名澄嵐-CSDN博客 数据结构专栏:https://blog.csdn.net/2302_80328146/categ…...
数据结构 (26)图的遍历
前言 数据结构中的图遍历是指从图中的任一顶点出发,按照某种方法访问图中的所有顶点,且每个顶点只访问一次。 一、遍历方法 遍历主要有两种方法:深度优先搜索(DFS)和广度优先搜索(BFS)。 1.深度…...
用vue框架写一个时钟的页面
你可以使用Vue框架来创建一个简单的时钟页面。首先,你需要在HTML文件中引入Vue框架的CDN: <script src"https://cdn.jsdelivr.net/npm/vue"></script>然后,创建一个包含时钟功能的Vue实例: <div id&qu…...
【Android】View的工作流程——measure
1.View的工作流程入口 1.1DecorView被加载到Window中 看到这里你对Activity的构成有一定的了解,每个 Activity 都有一个与之关联的 Window 对象,而 DecorView 是这个 Window 的根视图。当DecorView被创建以及加载资源的时候,此时它的内容还…...
day35—蓝桥杯2024年第16届校赛模拟第二期-T4(最小花费)
【问题描述】 小蓝有一个整数,初始值为 1 ,他可以花费一些代价对这个整数进行变换。 小蓝可以花费 1 的代价将整数增加 1 。 小蓝可以花费 3 的代价将整数增加一个值,这个值是整数的数位中最大的那个(1 到 9)。 小蓝可…...
Java 中 List 接口的学习笔记
1. 什么是 List? 在 Java 中,List 是一个接口,属于 Java Collections Framework。它表示一个有序的集合,可以包含重复元素。List 接口允许通过索引访问元素,提供了多种实现方式,如 ArrayList 和 LinkedLis…...
朗新科技集团如何用云消息队列 RocketMQ 版“快、准、狠”破解业务难题?
作者:邹星宇、刘尧 朗新科技集团:让数字化的世界更美好 朗新科技集团股份有限公司是领先的能源科技企业,长期深耕电力能源领域,通过新一代数字化、人工智能、物联网、电力电子技术等新质生产力,服务城市、产业、生活中…...
hive hms和hs2的sql执行日志分析
HMS日志: 2024-12-02 15:39:20,811 INFO org.apache.hadoop.hive.metastore.HiveMetaStore: [pool-8-thread-114]: 114: source:10.11.17.999 get_all_databases 2024-12-02 15:39:20,812 INFO org.apache.hadoop.hive.metastore.HiveMetaStore.audit: [pool-8-thre…...
Mybatis-plus 多租户插件
前言 本篇主要分析Mybatis-plus 多租户插件,然后根据多租户插件在延伸到其他场景 案例 Mybatis-plus官网对多租户插件已有详细讲解,这里就不在附上使用案例。 源码分析 MybatisPlus官方是由TenantLineInnerInterceptor这个拦截器进行多租户功能处理…...
浅谈新能源汽车感应钥匙一键启动的步骤和特点
随着汽车智能化技术的发展,无钥匙启动系统还可以与其他智能系统进行集成,如智能车载系统、远程控制系统等。这使得车主可以通过智能手机等智能设备远程控制车辆的启动、解锁、上锁等操作,进一步提升了使用的便捷性和智能化水平。新能源汽车…...
012 路由信息协议RIP
路由信息协议RIP 作为度量(Metric)来衡量到达目的网络的距离 RIP是一种基于距离矢量D-V(Distance-Vector)算法的协议,它使用跳数(Hop Count)作为度量(Metric)来衡量到达目的网络的距离。 默认情况下,路由器到与它直接相连网络的跳数为0,因此…...
008.精读《Apache Paimon Docs - Table w/o PK》
文章目录 1. 引言2. 基本概念2.1 定义2.2 使用场景 3. 流式处理3.1 自动小文件合并3.2 流式查询 4. 数据更新4.1 查询4.2 更新4.3 分桶附加表 5 总结 1. 引言 通过本文,上篇我们了解了Apache Paimon 主键表,本期我们将继续学习附加表(Append…...
在 Windows WSL 上部署 Ollama 和大语言模型:从镜像冗余问题看 Docker 最佳实践20241208
🛠️ 在 Windows WSL 上部署 Ollama 和大语言模型:从镜像冗余问题看 Docker 最佳实践 ⭐ 引言 随着大语言模型(LLM)和人工智能技术的迅猛发展,开发者们越来越多地尝试在本地环境中部署模型进行实验。 但部署过程中常…...
微信小程序uni-app+vue3实现局部上下拉刷新和scroll-view动态高度计算
微信小程序uni-appvue3实现局部上下拉刷新和scroll-view动态高度计算 前言 在uni-appvue3项目开发中,经常需要实现列表的局部上下拉刷新功能。由于网上相关教程较少且比较零散,本文将详细介绍如何使用scroll-view组件实现这一功能,包括动态高度计算、下拉刷新、上拉加载等完整…...