hnugreycrow's blog

eidetic /aɪˈdetɪk/ ：形容词，意为”异常清晰的，过目不忘的” 正如其名，希望这个工具能帮你记住每一个复制的瞬间。 Eideticlip 是一款基于 Electron 和 Vue 3 开发的智能剪贴板管理工具。它能够自动记录您复制的所有文本内容，构建完整的剪贴板历史，让您随时回溯、查找并重用之前的复制记录。 作为学习 Electron 开发的一个小项目，它在功能上可能不如 Windows 系统自带的剪贴板历史完善，但提供了更加个性化和可控的管理体验。 核心功能亮点📋 智能历史记录 自动保存：后台静默记录所有复制的文本内容 快速检索：轻松查找之前的复制记录，支持关键词搜索 一键重用：点击即可重新使用历史剪贴板内容 ⌨️ 高效操作体验 全局快捷键：自定义唤醒快捷键，随时调出剪贴板历史 系统托盘集成：最小化至系统托盘，不干扰正常工作流程 即时呼出：通过快捷键快速唤出界面，提升工作效率 🎨 个性化定制 主题切换：支持亮色与暗色主题，适应不同使用环境 数据保存周期：可自定义历史记录的保存时长 快捷键自定义：根据使用习惯设置专属快捷键 界面展...

最近翻 Vue3 文档，重新过了一遍响应式的基础内容。之前用的时候总有些细节记不清，比如 ref 和 reactive 到底该怎么选、为什么有时候改了数据页面不更，这次特意整理了笔记（过程中也借助了大模型辅助梳理逻辑、补充细节😉），主要是给自己后续查着方便，内容以复习要点为主，可能有理解不到位的地方，先记下来慢慢修正。 官方文档：响应式基础 | Vue.js (vuejs.org) 一. 声明响应式状态1. 组合式 API：ref()定义：ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回： 123import { ref } from 'vue'const count = ref(0)count.value++ // 修改值 模板使用：无需 .value，自动解包；可直接在事件监听器中修改（如@click=”count++”）。 优势：支持所有数据类型（原始值、对象等），可传递给函数并保持响应性。 简化语法：在<script setup>中，顶层声明的ref和方法可直接在模板使...

在Electron开发过程中，我遇到一个有趣的问题：使用import Database from "better-sqlite3"导入模块时，不仅出现类型声明文件缺失的警告，还会报__filename is not defined的运行时错误。而换成const Database = require("better-sqlite3")后，一切正常。这个现象背后，其实是JavaScript两种主流模块系统——ESM与CommonJS的差异在作祟。 问题现象与直接原因当使用ES模块语法导入better-sqlite3时，会遇到两个问题： 类型检查错误：无法找到模块“better-sqlite3”的声明文件 运行时错误：ReferenceError: __filename is not defined 而切换到CommonJS的require语法后，这两个问题都消失了。要理解其中的原因，我们需要先深入了解ESM与CommonJS这两种模块系统的核心差异。 模块化的两种 “流派”：ESM 和 CommonJSJavaScript 一开始是没有 “...

在 Vue 组件开发中，属性传递是核心场景之一。props 适用于明确声明的属性，但当需要灵活传递未声明的属性或事件、封装第三方组件时，透传 Attributes 成为更高效的解决方案。 一、什么是透传 Attributes？官方定义：透传 Attributes 指传递给组件但未被声明为 props 或 emits 的 attribute 或 v-on 事件监听器，最常见的包括 class、style、id 以及自定义事件等。 在 Vue3 中，透传 Attributes 会被收集到组件实例的 $attrs 中，可通过 useAttrs()（script setup）或 this.$attrs（选项式 API）访问。 访问 $attrs 的两种方式 script setup 中：useAttrs () 12import { useAttrs } from 'vue';const attrs = useAttrs(); 选项式 API 中：this.$attrs 12345export default { mounted()...

什么是响应性响应性是一种声明式处理变化的编程范式：当依赖数据变化时，依赖其计算的结果会自动更新。例如 Excel 中单元格通过公式关联，修改源单元格时目标单元格自动更新；而 JavaScript 默认不具备此特性，需通过特定机制实现。 官方文档：深入响应式系统 | Vue.js (vuejs.org) Vue 中响应性的实现原理Vue 通过拦截对象属性的读写操作，追踪依赖并在数据变化时触发更新，核心依赖Proxy（用于reactive）和getter/setter（用于ref）实现。 1. 响应式对象的创建 reactive()实现：通过 Proxy 创建对象代理，拦截属性的get（读取）和set（修改）操作： 123456789101112function reactive(obj) { return new Proxy(obj, { get(target, key) { track(target, key); // 追踪依赖 return target[key]; }, set(targ...

在之前的服务器环境中，手动安装并配置MySQL的过程较为繁琐，因此我转而采用Docker容器化方案进行部署，通过标准化镜像和持久化存储机制，实现了更高效的数据库环境管理与版本控制。 这篇笔记就记录下用 Docker 部署 MySQL 的全过程，给自己留个存档。 一、准备工作1. 搜索MySQL镜像（可选）1docker search mysql ❌问题：搜索出现超时，配置了国内镜像源也没用 2. 拉取MySQL 5.7镜像因为听说指定版本拉取更稳妥，避免后续出现版本兼容问题，所以我选择了 5.7 版本： 1docker pull mysql:5.7 3. 创建MySQL目录1234mkdir -p ~/mysql/{log,data,conf}# 进入创建好的mysql目录cd ~/mysql log目录打算用来存 MySQL 的运行日志 data目录很重要，用来存数据库的数据，这样就算容器没了，数据也还在 conf目录用来放一些自定义的配置文件 二、部署MySQL容器1. 运行MySQL容器123456docker run -p 3307:3...

一、数据卷核心概念1.1 定义数据卷是宿主机文件系统中的一个目录或文件，通过挂载机制与容器内指定路径关联，实现宿主机与容器的双向数据共享。 1.2 本质 类似Linux的mount命令，容器访问挂载路径时实际操作的是宿主机数据卷 数据卷独立于容器生命周期，容器删除后数据仍保存在宿主机 二、数据卷的三大核心作用数据卷的设计初衷，就是为了解决容器与数据分离的问题，其核心作用可以概括为三点： 2.1 容器数据持久化 场景：数据库、日志文件等需要长期保存的数据 案例：MySQL容器挂载数据卷后，即使容器崩溃，数据库文件仍可通过数据卷恢复 2.2 宿主机与容器双向交互 实时同步特性： 宿主机修改卷目录文件 → 容器内立即生效（如本地代码编辑后容器热更新） 容器生成数据（日志、配置）→ 实时同步到宿主机（方便本地查看分析） 2.3 多容器数据共享 场景：前端容器与后端容器共享静态资源、多个服务共享配置文件 案例：Nginx（展示静态页）与Node.js（生成静态页）通过数据卷自动同步资源 三、数据卷的基础操作实践3.1 创建并挂载数据卷（基础命令）使用docker run命令时，...

整理了 Docker 核心命令的用法，从服务管理到容器操作，方便后续复习查阅。 一、Docker服务基础操作（守护进程管理）1.1 服务启停控制 启动：systemctl start docker✅ 核心功能：启动Docker守护进程（dockerd），初始化镜像/容器管理环境⚠️ 注意：启动失败用journalctl -u docker查日志 停止：systemctl stop docker✅ 核心功能：终止守护进程及所有运行中容器⚠️ 注意：先手动停止重要容器，避免数据未持久化 重启：systemctl restart docker✅ 核心场景：修改配置文件（如/etc/docker/daemon.json）后生效 1.2 服务状态查询 命令：systemctl status docker✅ 核心功能：查看服务运行状态及最近日志🔍 状态解读： 绿色active (running)：正常运行 红色inactive (dead)：已停止 二、镜像操作命令（Image）2.1 镜像获取与搜索 拉取镜像：docker pull <镜像名:标签...

在 SpringBoot 项目开发中，Lombok 注解突然失效是一个很常见的问题，表现为明明添加了 @Data 等注解，却在编译时出现 “找不到符号”（如缺失 getter/setter 方法）的错误。本文记录了我在项目中遇到该问题的排查过程，分析了 Lombok 注解失效与 Maven 编译插件（maven-compiler-plugin）配置、版本管理之间的关系，并总结了可行的解决方案和最佳实践。 在开发SpringBoot项目时，相信很多同学都遇到过Lombok注解突然失效的问题：代码里明明加了@Data注解，编译时却报”找不到符号”（比如缺失getter/setter方法）。最近我在项目中就遇到了类似问题，通过排查终于找到原因，在这里记录一下整个过程和解决方案。 问题现象项目中使用了Lombok的@Data、@Getter等注解，但编译时出现一系列”找不到符号”错误： 1234567java: 找不到符号 符号: 变量 log 位置: 类 org.hnu.tablerecognition.common.interceptor.JwtTok...