Posts

跳转到脚本列表🚀 什么是书签栏的脚本？ 用过油猴脚本自然不会对书签栏脚本感到陌生，与油猴不同的是，书签栏脚本的触发方式是点击书签，而不会自动触发。以下是演示GIF： 演示动图 使用方式 以Chrome浏览器为例，第一步：右键书签栏，选择添加网页 添加网页 第二步：在名称处填写脚本名称，网址处填写脚本，最后点击保存即可！ 输入脚本 脚本分享 1.页面自动刷新 功能： 点击之后输入秒数t（未作限制，请输入数字），页面会自动进行 t 秒一次的刷新，无限循环；如果需要停止，再次单击，点击取消或者输入0即可刷新一次自动取消。 1 javascript: var t=prompt("Time(s)="); var current = location.href; if (t) {setTimeout('reload()', 1000 * t); function reload() { setTimeout('reload()', 1000 * t); var fr4me = '<frameset cols=\'*\'>\n<frame src=\'' + current + '\' />'; fr4me += '</frameset>'; with (document) { write(fr4me); void (close()); }; };}else{location.replace(current);}; 2. Video自动播放 功能：点击之后输入速度t即可实现视频倍速播放，点击取消或者输入0即可恢复1倍速播放。 1 javascript: var t=prompt("speed = "); if(t){document....

关于Vue和VueComponent 一个重要的内置关系:VueComponent.prototype.proto===vue.prototype 一个重要的内置关系 为什么要有这个关系？ 让组件实例对象(vc)可以访间到Vue原型上的属性、方法. ref属性 1.被用来给元素或子组件注册引用信息(id的替代者) 2.应用在htm1标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc) 3.使用方式: 打标识: <h1 ref="xxx">.....</h1>或<School ref="xxx"></School> 获取:this.$refs.xxx 配置项props 功能: 让组件接收外部传过来的数据 (1).传递数据: <Demo name="xxx"/> (2).接收数据: 第一种方式(只接收): props:['name'] 第二种方式(限制类型): props:{ name:String } 第三种方式(限制类型、限制必要性、指定默认值): 1 2 3 4 5 6 7 props:{ name:{ type:String,//类型限制 required:true,//必要性 default:"JQF"//默认值 } } 备注: props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告, 若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据. mixin(混入) 功能: 可以把多个组件共用的配置提取成一个混入对象 使用方式: 第一步：定义混合 1 2 3 4 5 6 const mixData={ data(){....

使用 FRP + Guacamole 搭建个人远程桌面访问方案全过程记录 项目背景 由于家庭网络通常没有固定公网 IP，且部分办公环境无法安装传统远程控制软件，需要搭建一套： 不依赖家庭公网 IP、不需要路由器端口转发、支持纯浏览器访问、可远程控制 Windows 桌面的方案。 最终方案：用 FRP 打通「公网 VPS → 家庭 Windows」的隧道，再用部署在 VPS 上的 Apache Guacamole 提供浏览器端远程桌面（RDP）访问。 整体架构 外部客户端（任意浏览器） ↓ 公网 ↓ 阿里云 VPS ├── frps（FRP 服务端，Docker） └── Guacamole + guacd + postgres（Docker） ↓ FRP 隧道 家庭 Windows 主机 └── frpc（FRP 客户端，开机自启） ↓ 目标服务 RDP（127.0.0.1:3389） 数据流：浏览器 → Guacamole(8080) → guacd → VPS:13389 → frps → frpc → 127.0.0.1:3389 环境信息 项目 说明 VPS 阿里云，Ubuntu 24....

使用 Cloudflare Tunnel + MeshCentral 搭建个人远程控制环境全过程记录 项目背景 由于部分办公环境存在限制，例如： 公司电脑无法获取管理员权限； 无法安装传统远程控制软件； 无法直接通过公网访问家里的电脑； 家庭网络通常没有固定公网 IP； 因此需要搭建一套： 不依赖公网 IP、不需要路由器端口转发、支持浏览器访问、支持远程桌面控制的个人远程访问方案。 最终方案： 公司电脑 ↓ 浏览器访问 ↓ Cloudflare Tunnel ↓ 家庭电脑 ↓ MeshCentral ↓ 控制家庭设备 整体采用： Cloudflare Tunnel：负责安全内网穿透； MeshCentral：负责远程设备管理和桌面控制； 自定义域名：提供稳定访问入口。 最终访问地址： https://remote.******.com 一、三台电脑工作模式说明 整个系统涉及三台设备： 1. 家庭主机（服务器端） 作用： 作为远程控制目标，同时运行 MeshCentral 和 Cloudflare Tunnel。 运行环境： Windows 系统 主要功能： 软件 功能 MeshCentral 提供远程控制服务 cloudflared 将本地服务安全暴露到公网 Node....

背景 在为 ACMUSIC（网易云第三方客户端）的私人FM模块添加镜面倒影效果时，遇到了一个有趣的技术挑战：镜面倒影明明 DOM 结构正确、transform 也没问题，但就是不可见。这篇文章记录了排查过程和最终的解决方案。 1. 三层结构设计 倒影系统采用三层嵌套结构： .fm-card-wrapper（3D 变换容器） ├─ .fm-card（封面卡片，340×340, border-radius 28px） └─ .fm-reflection-plane（倒影裁剪平面） └─ .fm-reflection（倒影元素，scaleY(-1) 翻转） └─ img（封面图片，340×340） 关键设计思路： plane：position 在卡片正下方，overflow: hidden + border-radius: 28px 负责裁剪倒影可见区域和圆角 reflection：position 在 plane 内部，通过 transform: scaleY(-1) 实现垂直镜像 img：复用封面图片，object-fit: cover 填充 2. 核心 CSS 2.1 Plane——裁剪平面 1 2 3 4 5 6 7 8 9 10 11 12 .fm-reflection-plane { position: absolute; left: 0; top: 100%; // 紧贴卡片底部 width: 100%; height: 410px; // 关键：高度要足够大 overflow: hidden; // 裁剪可见区域 pointer-events: none; border-radius: 28px; // 与卡片圆角一致 // 真正的可见高度由 clip-path 控制 clip-path: inset(0 0 300px 0); // 顶部 110px 可见 } 2....

Vue中支持的事件 资源事件 事件名称 何时触发 error 资源加载失败时。 abort 正在加载资源已经被中止时。 load 资源及其相关资源已完成加载。 beforeunload window，document 及其资源即将被卸载。 unload 文档或一个依赖资源正在被卸载。 网络事件 事件名称 何时触发 online 浏览器已获得网络访问。 offline 浏览器已失去网络访问。 焦点事件 事件名称 何时触发 focus 元素获得焦点（不会冒泡）。 blur 元素失去焦点（不会冒泡）。 WebSocket 事件 事件名称 何时触发 open WebSocket 连接已建立。 message 通过 WebSocket 接收到一条消息。 error WebSocket 连接异常被关闭（比如有些数据无法发送）。 close WebSocket 连接已关闭。 会话历史事件 事件名称 何时触发 pagehide A session history entry is being traversed from....

重定向后页面回退反复跳转bug 问题 在网易云项目时，由于Api所返回数据的问题，在Video搜索界面出现Mv的结果，这样就导致当点击的视频为Mv时，无法在Video页面利用传入的id参数渲染Video 问题图示 解决办法 想到利用判断，在得到MV之后跳转到MV播放界面，也即重定向redirect： 1 2 3 4 5 6 this.$router.push({ name: 'MvPlay', query: { id: this.id, } }) 但是，这就出现了页面回退之后又前进这样反复的BUG，于是想到replace，修改为： 1 2 3 4 5 6 this.$router.replace({ name: 'MvPlay', query: { id: this.id, } }) 这样，在Video页面重定向到Mv页面后，不会留下在Video页面的历史，所以就不会出现上面的BUG了！

在网易云项目时，在歌手详情页点击相似的歌手跳转到query参数不同的另一个歌手详情页时，出现地址栏query参数变化，而页面却没有实时更新的现象，经过搜索找到以下解决方案： 方案一：watch监听路由 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 watch: { // 方法1 //监听路由是否变化 '$route' (to, from) { if(to.query.id !== from.query.id){ this.id = to.query.id; this.init();//重新加载数据 } } } //方法 2 设置路径变化时的处理函数 watch: { '$route': { handler: 'init', immediate: true } } 方案二：给router-view添加一个不同的key 给router-view添加一个不同的key，这样即使是公用组件，只要url变化了，就一定会重新创建这个组件。 1 <router-view :key="$route.fullpath"></router-view> 小洁🙎🏼‍♀️ 抽象问题描述：同一path的页面跳转时路由参数变化，但是组件没有对应的更新。 实际原因：主要是因为获取参数写在了created或者mounted路由钩子函数中，路由参数变化的时候，这个生命周期不会重新执行。

《聪明人和傻子和奴才》 这篇散文诗作于1925年12月26日，鲁迅最初将其发表于1926年1月4日《语丝》周刊第60期。 奴才总不过是寻人诉苦。只要这样，也只能这样。有一日，他遇到一个聪明人。 “先生！”他悲哀地说，眼泪联成一线，就从眼角上直流下来。“你知道的。我所过的简直不是人的生活。吃的是一天未必有一餐，这一餐又不过是高粱皮，连猪狗都不要吃的，尚且只有一小碗……” “这实在令人同情。”聪明人也惨然说。 “可不是么！”他高兴了。“可是做工是昼夜无休息的：清早担水晚烧饭，上午跑街夜磨面，晴洗衣裳雨张伞，冬烧汽炉夏打扇。半夜要煨银耳，侍候主人耍钱；头钱从来没分，有时还挨皮鞭……。” “唉唉……”聪明人叹息着，眼圈有些发红，似乎要下泪。 “先生！我这样是敷衍不下去的。我总得另外想法子。可是什么法子呢？……” “我想，你总会好起来……” “是么？但愿如此。可是我对先生诉了冤苦，又得你的同情和慰安，已经舒坦得不少了。可见天理没有灭绝……” 但是，不几日，他又不平起来了，仍然寻人去诉苦。 “先生！”他流着眼泪说，“你知道的。我住的简直比猪窠还不如。主人并不将我当人；他对他的叭儿狗还要好到几万倍……” “混帐！”那人大叫起来，使他吃惊了。那人是一个傻子。 “先生，我住的只是一间破小屋，又湿，又阴，满是臭虫，睡下去就咬得真可以。秽气冲着鼻子，四面又没有一个窗……。” “你不会要你的主人开一个窗的么？” “这怎么行？……” “那么，你带我去看去！” 傻子跟奴才到他屋外，动手就砸那泥墙。 “先生！你干什么？”他大惊地说。 “我给你打开一个窗洞来。” “这不行！主人要骂的！” “管他呢！”他仍然砸。 “人来呀！强盗在毁咱们的屋子了！快来呀！迟一点可要打出窟窿来了！……”他哭嚷着，在地上团团地打滚。 一群奴才都出来了，将傻子赶走。 听到了喊声，慢慢地最后出来的是主人。 “有强盗要来毁咱们的屋子，我首先叫喊起来，大家一同把他赶走了。”他恭敬而得胜地说。 “你不错。”主人这样夸奖他。 这一天就来了许多慰问的人，聪明人也在内。 “先生。这回因为我有功，主人夸奖了我了。你先前说我总会好起来，实在是有先见之明……。”他大有希望似的高兴地说。 “可不是么……”聪明人也代为高兴似的回答他。

用vue.js写成的页面中，可能出现由于外部请求导致的页面展示阻塞现象，进而导致模板语法{{xxx}}直接展示在页面上，这其实跟页面加载的流程有关，整个页面加载的流程是： 解析html结构 -> 加载外部脚本和样式表文件 -> 解析并执行脚本代码 -> 构造HTML DOM模型 -> 加载图片等外部文件 -> 页面加载完毕 所以，当HTML加载的时候，就会把{{}} 当成文本加载出来，只有当vue初始化完成后，才会把{{}}解析成vue的语法。 遇到这种情况有以下几种解决方案： 方案一(不推荐)：在head里面加入引入vue的script标签 如果把引入vue的script放到head里面，那页面就不会出现{{}}，因为在body之前，vue就已经引入进并且加载完成了。 方案二：v-text|v-html 使用v-text插入文字，使用v-html插入HTML结构，替换原本使用的模板语法{{xxx}} 方案三：template 使用<template>标签包裹要渲染的HTML结构，那么只有vue解析时才会展示出该结构 方案四：v-cloak指令 + CSS样式 标签上的v-cloak属性在被vue解析到时会自动去掉，那么我们可以利用CSS的属性选择器，给有v-cloak属性的元素设置display:none样式，那么，在加载HTML时自然不会显示{{xxx}}，而在vue解析时又会显示出来，问题得以解决！