GUI 路由与静态资源处理说明
本文档说明了在将前端 SPA（Vue + Vite）构建产物由后端（aiohttp）托管时，如何处理静态资源与前端路由以避免深层链接（deep link）访问时出现 、空白页或 ERR_INVALID_RESPONSE 的问题。
问题背景在开发模式下，Vite 的开发服务器会对所有未命中静态资源的请求返回 index.html，从而让前端使用 HTML History 模式的 router（createWebHistory）来处理路径。但在生产环境，当前端静态文件被打包放到后端并由后端静态路由提供时：
直接在地址栏输入深层链接（例如 /gui/home/settings）会向后端发起请求。若后端没有将未命中静态资源的请求回退到 index.html，则服务器会返回 或其他错误，导致页面空白或浏览器报错。
若后端把根路径重定向为 /gui/index.html，浏览器地址栏会显示 /index.html，前端 router 会把路径解析为 /index.html 而不是 / 或 /home，导致路由无法匹配并出现空白。
目标
...
JavaScript 事件流：深入理解事件处理和传播机制
是一种机制，用于描述和处理事件在 DOM 树中的传播过程.
、事件流的发展流程
)事件处理是通过在 DOM 元素上直接定义事件处理属性来实现的，称为 DOM 级事件
const button = document.getElementById(;myButton;);button.onclick = function() &#;console.log(;按钮被点击;);&#;;
)addEventListener 方法允许为一个元素的同一个事件类型添加多个处理程序，并且可以控制事件的捕获阶段.DOM
const button = document.getElementById(;myButton;);button.addEventListener(;click;, function() &#;console.log(;按钮被点击;);&#;);
)DOM 级事件规范定 ...
在JavaScript中，有几种方式可以实现原型继承：
构造函数继承：通过调用父类的构造函数来创建子类的实例，并将父类的属性和方法复制到子类的实例中。这种方式只能继承父类的实例属性和方法，无法继承父类的原型属性和方法。
function Parent(name) &#; this.name = name;&#;function Child(name) &#; Parent.call(this, name);&#;var child = new Child(;Alice;);console.log(child.name); // Alice
原型链继承：将子类的原型对象指向父类的实例，从而实现继承父类的属性和方法。这种方式可以继承父类的实例属性和方法，也可以继承父类的原型属性和方法，但是所有子类的实例共享父类的属性和方法。
function Parent(name) &#; this.name = name;&#;Parent ...
同步等待函数
修改JS\CSS等文件后，浏览器不会自动更新缓存问题解决方案、直接后台禁用js等文件缓存，忽略每次请求都请求js等带来的性能问题、js等文件增加版本号控制，可能存在浏览器比较老的浏览器存在兼容性问题，现在可以忽略
禁用console的日志输出// 取消当前页面的console的log输出(function () &#; const originalConsoleLog = console.log; console.log = function (...args) &#; if (args.length > && typeof args[] === ;string;) &#; return; // 忽略包含特定字符串的日志 &#; originalConsoleLog.apply(console, args); &#;; // ...
对象数组去重var array = [ &#; id: , name: "张三"&#;, &#; id: , name: "李四"&#;, &#; id: , name: "张龙"&#;, &#; id: , name: "赵虎"&#;, &#; id: , name: "王朝"&#;, &#; id: , name: "刘金刚"&#;, &#; id: , name: "马汉"&#;,] var obj = &#;&#;; /* * 方法一 reduce函数 * 按照id 相同进行去重* ...
js中模拟点击a标签方式打开新页面function imitateClick(url)&#; let aEle = document.createElement("a"); aEle.setAttribute("href", url); aEle.setAttribute("target", "_blank"); aEle.setAttribute("id", "previewJumpEle"); // 防止重复添加 if (!document.getElementById("previewJumpEle")) &#; document.body.appendChild(aEle); &#; // 模拟点击 aEle.click(); (aEle.remove && aEle. ...
