https://jiawen.live 前端开发工程师 Gavin 的个人博客：JavaScript / Vue / React / Node.js zh-CN Mon, 24 Aug 2026 19:37:16 GMT https://jiawen.live/article/59 https://jiawen.live/article/59 Gavin（zzlw）GitHub 作品集 Fri, 14 Aug 2026 09:03:47 GMT https://jiawen.live/article/58 https://jiawen.live/article/58 Rules 靠 AI"自觉"遵守，但自觉不可靠。Hooks 是确定性的护栏——在 Agent 读写文件、执行命令、调用工具的关键节点强制运行你的脚本：自动格式化、拦截危险命令、扫描密钥。讲清事件、配置、决策协议与一组实战脚本。 Sat, 13 Jun 2026 07:54:21 GMT https://jiawen.live/article/57 https://jiawen.live/article/57 光会写代码的 AI 是"瞎子"。MCP（Model Context Protocol）给它装上感官与手脚——读 Figma、跑浏览器、查实时文档、连数据库。这一篇讲清 MCP 是什么、怎么配、前端最该装哪几个，以及绕不开的安全红线。 Fri, 12 Jun 2026 07:53:52 GMT https://jiawen.live/article/56 https://jiawen.live/article/56 AGENTS.md 是"全局常驻"，但很多规范只该在写特定文件时生效。Rules 让你按文件类型、按场景精准注入规则——讲清 4 种触发模式、.mdc 写法、与 AGENTS.md 的分工，以及一组前端规则示例。 Thu, 11 Jun 2026 07:53:34 GMT https://jiawen.live/article/55 https://jiawen.live/article/55 AI 每次对话都是"失忆"开局。CLAUDE.md / AGENTS.md 就是它的长期记忆——把项目是什么、怎么跑、有哪些坑一次写清。这一篇讲清它的加载机制、该写什么、不该写什么，以及一份可直接抄的模板。 Wed, 10 Jun 2026 07:53:17 GMT https://jiawen.live/article/48 https://jiawen.live/article/48 把私有项目开源，写完代码只是开始。一份让人能跑起来的 README、一个明确的 LICENSE、一套「clone 即可复现」的最小启动路径，才是开源的诚意所在。 Fri, 05 Jun 2026 02:00:00 GMT https://jiawen.live/article/51 https://jiawen.live/article/51 AI 让你写得飞快，但怎么保证这些代码敢上线？评审纪律、测试策略、用工程护栏「绑住」AI、安全红线、前端专项检查清单，以及 AI 时代的「完成定义」。 Thu, 04 Jun 2026 07:07:15 GMT https://jiawen.live/article/54 https://jiawen.live/article/54 按 8 大维度给出可直接使用的面试题、考点、参考答案要点，以及"差/合格/优秀"三档评分 rubric。重点是一整组 AI 协作题——考代码评审、识别幻觉、带 AI 把关交付。拿去就能用。 Fri, 29 May 2026 07:24:04 GMT https://jiawen.live/article/53 https://jiawen.live/article/53 8 大考察维度怎么排布、每一轮面试抓什么重点，以及 AI 时代最关键的命题——"闭卷考内功"还是"开卷考协作"。附一套现场协作题模板，让 AI 缝合怪当场现形。 Thu, 28 May 2026 07:23:57 GMT https://jiawen.live/article/52 https://jiawen.live/article/52 Claude 5.0 这类前沿模型出来后，"会写代码"本身在贬值。作为面试官，你要重新定义"什么样的前端值得招"——这一篇给你一套可落地的能力分层模型、人才画像，以及一份正向信号与危险信号清单。 Wed, 27 May 2026 07:23:50 GMT https://jiawen.live/article/38 https://jiawen.live/article/38 一个公开的 AI 对话接口，不限流就是给钱包开了个无底洞。我用三层互补的限流——请求层防刷、会话层防滥用、网关层兜底花费——把「被薅羊毛」的风险摁住。 Fri, 08 May 2026 02:00:00 GMT https://jiawen.live/article/50 https://jiawen.live/article/50 AI 写得好不好，90% 取决于你喂给它的上下文。本篇讲透 rules 文件、@ 引用、计划优先、任务拆解和六种高命中率提示范式，附可直接抄走的模板。 Sun, 03 May 2026 07:07:07 GMT https://jiawen.live/article/49 https://jiawen.live/article/49 一篇写给前端工程师的 Vibe Coding 入门心法——它到底是什么、不是什么，你的角色发生了怎样的转变，以及什么时候该用、什么时候千万别用。 Sat, 02 May 2026 07:07:00 GMT https://jiawen.live/article/37 https://jiawen.live/article/37 同一套提示词，DeepSeek 和 Gemini 表现出截然不同的「性格」——一个推理欲望强、爱多调工具，一个极度克制、走最短路径。聊聊这两种风格在 RAG 场景下各自要怎么调。 Sat, 18 Apr 2026 02:00:00 GMT https://jiawen.live/article/27 https://jiawen.live/article/27 在博客右下角加一个会「打字机式」吐字的 AI 助手。前端用 Server-Sent Events 接收流式响应，用一个 useAiChat 组合式函数收敛全部状态，匿名 token 存在 localStorage。 Sat, 28 Mar 2026 02:00:00 GMT https://jiawen.live/article/35 https://jiawen.live/article/35 文章一发布，几秒后 AI 助手就能答出来。背后是一条「内容变更 → 带签名 Webhook → 写入 R2 → 增量索引」的同步管道。重点讲怎么用 HMAC-SHA256 + 时间戳防重放，把这条管道做安全。 Thu, 05 Mar 2026 02:00:00 GMT https://jiawen.live/article/34 https://jiawen.live/article/34 给 RAG 喂数据有两条路——爬自己的网站，或主动维护干净的 Markdown。我选了后者。因为爬虫抓到的 HTML 混杂着导航、评论、侧边栏，这些噪音会污染向量空间，毁掉召回质量。 Tue, 10 Feb 2026 02:00:00 GMT https://jiawen.live/article/33 https://jiawen.live/article/33 Agent 的本质不是「让模型无所不知」，而是「让模型学会调用工具」。拆解一个工具驱动的 Agent Loop：调用模型 → 解析工具调用 → 执行 → 带结果再调，循环到收敛，并用最大步数防止贪婪死循环。 Tue, 13 Jan 2026 02:00:00 GMT https://jiawen.live/article/45 https://jiawen.live/article/45 个人博客从一个 Koa 单体，长成「API + 前台 SSR + 后台 SPA + 边缘 AI」四个服务。复盘每一步拆分的动因——不是为了微服务而微服务，而是每次都被一个具体痛点推着走。 Tue, 21 Oct 2025 02:00:00 GMT https://jiawen.live/article/32 https://jiawen.live/article/32 不用任何自建中间件，全栈基于 Cloudflare 原生组件（Workers、D1、R2、AI Search、AI Gateway）搭一个能回答「关于我博客」的 AI Agent。这是一次边缘 Serverless AI 的完整实践。 Tue, 16 Sep 2025 02:00:00 GMT https://jiawen.live/article/29 https://jiawen.live/article/29 前端 SPA 怎么在「同一份构建产物」里适配不同环境的 API 地址？答案不是构建期替换，而是容器启动时把环境变量渲染进一个 app-config.js，挂到 window 上供运行时读取。 Tue, 12 Aug 2025 02:00:00 GMT https://jiawen.live/article/26 https://jiawen.live/article/26 SSR 应用有两种「请求 API」的视角——服务端渲染时走容器内网，浏览器水合后走公网域名。用 Nuxt runtimeConfig 的 public / 私有分区优雅地表达这件事。 Thu, 10 Jul 2025 02:00:00 GMT https://jiawen.live/article/47 https://jiawen.live/article/47 个人项目没有 SRE 团队，但「两眼一抹黑」更危险——尤其当系统里有按量付费的 LLM。聊聊用极低成本给个人项目加上可观测性：托管组件自带的日志、健康检查、用量看板。 Thu, 22 May 2025 02:00:00 GMT https://jiawen.live/article/36 https://jiawen.live/article/36 后台点一下「AI 管理」就被登出。排查发现是 Worker 回源到国内服务器验 token，触发了 530。解法不是修网络，而是换架构——把 JWT 验签搬到边缘本地做，彻底不回源。 Wed, 14 May 2025 02:00:00 GMT https://jiawen.live/article/46 https://jiawen.live/article/46 文章保存成功，就该立刻返回——同步到 AI 知识库这种「副作用」绝不该阻塞它，更不该因为下游挂了而让用户发不出文章。聊聊主流程与副作用的解耦原则。 Tue, 22 Apr 2025 02:00:00 GMT https://jiawen.live/article/44 https://jiawen.live/article/44 把一个私有项目开源前，最怕的是密钥泄露。一次真实的「.env 里混进了云厂商 AccessKey」事故，复盘从扫描、历史清理到凭证轮换的完整处置，以及那条最反直觉的铁律。 Tue, 18 Mar 2025 02:00:00 GMT https://jiawen.live/article/43 https://jiawen.live/article/43 一个好的部署脚本不只是 docker compose up。它要按 tag 拉镜像、滚动替换、健康检查、失败自动回滚。拆解我那个几十行的 deploy.sh，看零停机部署的几个关键动作。 Thu, 20 Feb 2025 02:00:00 GMT https://jiawen.live/article/42 https://jiawen.live/article/42 代码和部署配置分在不同仓库，怎么让前者 push 后自动触发后者部署？用 GitHub 的 repository_dispatch 做跨仓库事件桥接，再用「按镜像 tag 部署」实现秒级回滚。 Wed, 15 Jan 2025 02:00:00 GMT https://jiawen.live/article/40 https://jiawen.live/article/40 一台服务器、一个 nginx，把 jiawen.live、api.、admin. 几个域名分发到各自的容器，统一收口 TLS 并开启 HTTP/3。讲网关的模板化配置、HTTP/3 的端口要点和证书热加载。 Wed, 27 Nov 2024 02:00:00 GMT https://jiawen.live/article/39 https://jiawen.live/article/39 用三个 compose 文件——基础拓扑、开发覆盖、生产覆盖——让同一套服务定义既能本地一键热重载，又能生产一键带网关和证书部署。讲清分层覆盖的设计与取舍。 Tue, 15 Oct 2024 02:00:00 GMT https://jiawen.live/article/30 https://jiawen.live/article/30 12-factor 的「一次构建、多处运行」说起来简单，落到前端镜像就是一个问题：配置该在构建期还是运行期注入？我用容器启动时 envsubst 渲染配置的方式，让一个镜像跑遍所有环境。 Fri, 23 Aug 2024 02:00:00 GMT https://jiawen.live/article/25 https://jiawen.live/article/25 用 AWS SDK 的 S3 协议作为统一抽象，让开发环境跑本地 MinIO、生产用阿里云 OSS、未来可换 Cloudflare R2，全靠改环境变量。还要避开 SDK 新版默认校验头踩的坑。 Tue, 02 Jul 2024 02:00:00 GMT https://jiawen.live/article/24 https://jiawen.live/article/24 让后端所有出口长一个样——成功走拦截器包装成统一信封，失败走异常过滤器配语义化错误码。前端从此只写一份处理逻辑，再也不用为每个接口的返回结构打补丁。 Sun, 19 May 2024 02:00:00 GMT https://jiawen.live/article/22 https://jiawen.live/article/22 博客归档页「按年份分组的全部文章」读多写少，适合缓存。但缓存怎么失效才能既实时又稳？我用文章变更事件主动清缓存，再加一个 TTL 兜底，组合出一个稳妥的方案。 Sun, 07 Apr 2024 02:00:00 GMT https://jiawen.live/article/19 https://jiawen.live/article/19 把一套基于 Koa 的个人博客后端用 NestJS + Fastify 重写，记录模块化分层、统一响应、依赖注入带来的可维护性提升，以及为什么选 Fastify 而不是 Express。 Sun, 11 Feb 2024 02:00:00 GMT https://jiawen.live/article/41 https://jiawen.live/article/41 一张泛域名证书覆盖所有子域，DNS-01 验证签发，daemon 模式自动续期，续期后还自动推送到 CDN。讲清这套「签一次、永不操心」的 HTTPS 自动化，以及冷启动的鸡生蛋问题。 Sun, 03 Dec 2023 02:00:00 GMT https://jiawen.live/article/31 https://jiawen.live/article/31 后台要同时访问主站 API 和独立的 AI 服务，两个后端鉴权方式、响应结构都不同。用「每个后端一个 axios 实例 + 拦截器」分层封装，把鉴权、信封解包、401 登出收敛到一处。 Sat, 21 Oct 2023 02:00:00 GMT https://jiawen.live/article/28 https://jiawen.live/article/28 移动端音乐播放器偶尔盖住 AI 对话浮窗。根因是第三方库写死了一个很高的 z-index。复盘这次问题，顺便聊聊一套页面里该如何统一管理「层级」。 Fri, 08 Sep 2023 02:00:00 GMT https://jiawen.live/article/23 https://jiawen.live/article/23 用短命 access token + 长命 refresh token 兼顾安全与体验，再用一个「全局尽力解析、按需强制校验」的身份守卫，让公开接口也能识别登录态。这是我博客后端的鉴权骨架。 Fri, 14 Jul 2023 02:00:00 GMT https://jiawen.live/article/21 https://jiawen.live/article/21 Mongoose 的 Schema 和 TypeScript 类型天然是两份东西，容易写着写着就对不上。Typegoose 用一个 class + 装饰器同时定义二者，让模型既是 schema 又是类型。 Wed, 26 Apr 2023 02:00:00 GMT https://jiawen.live/article/20 https://jiawen.live/article/20 一篇文章既有 MongoDB 的 ObjectId（_id），又有一个从 1 开始自增的数字 id。看似冗余，背后是对 URL 友好性、外部引用稳定性与查询性能的权衡。 Sat, 18 Feb 2023 02:00:00 GMT https://jiawen.live/article/18 https://jiawen.live/article/18 Jenkins 是老牌的开源持续集成工具。一篇覆盖核心概念、安装、声明式 Pipeline、凭据管理与最佳实践的实用指南，帮你把构建-测试-部署自动化跑起来。 Thu, 25 Aug 2022 02:00:00 GMT https://jiawen.live/article/16 https://jiawen.live/article/16 flac 无损好听但体积大、设备兼容性一般。用 ffmpeg 一条循环命令就能批量转成 mp3，还能保留元数据与封面。附码率选择与常见参数说明。 Mon, 09 May 2022 02:00:00 GMT https://jiawen.live/article/11 https://jiawen.live/article/11 从「怎么退出 Vim」到中文乱码、粘贴变形、剪贴板不通、退格键失灵——汇总新手最常卡住的 Vim 问题与解法，配上原因说明。 Mon, 14 Feb 2022 02:00:00 GMT https://jiawen.live/article/13 https://jiawen.live/article/13 早年开发常用「带 --disable-web-security 启动 Chrome」来绕过跨域，但它治标且危险。讲清 CORS 到底是什么、为什么会跨域，以及本地开发的正确解法（代理 / 后端 CORS）。 Wed, 22 Sep 2021 02:00:00 GMT https://jiawen.live/article/10 https://jiawen.live/article/10 在一个 Vim 里同时看多个文件，靠的是窗口（split）、缓冲区（buffer）与标签页（tab）三个概念。讲清它们的区别与高频操作，把多文件编辑流盘顺。 Thu, 17 Jun 2021 02:00:00 GMT https://jiawen.live/article/9 https://jiawen.live/article/9 把 Vim 调成趁手的前端编辑器，关键是几类插件：LSP 补全、语法高亮、文件树、模糊查找、格式化与 Git。整理一套实用配置思路与选型。 Mon, 08 Mar 2021 02:00:00 GMT https://jiawen.live/article/17 https://jiawen.live/article/17 TypeScript 不只是「给 JS 加类型」，它是一套结构化类型系统。从基础类型、接口、泛型到联合/交叉类型，建立写 TS 的核心心智，附 tsconfig 关键开关。 Tue, 12 Jan 2021 02:00:00 GMT https://jiawen.live/article/14 https://jiawen.live/article/14 国内拉 Docker Hub 镜像慢甚至超时，配一个阿里云镜像加速器即可。讲清加速器原理、daemon.json 配置与验证方式，以及它不加速私有仓库这点要注意。 Mon, 30 Nov 2020 02:00:00 GMT https://jiawen.live/article/7 https://jiawen.live/article/7 Nginx 日常用得最多的就那几条命令和几段配置。一份涵盖启停/reload、配置结构、静态站点、反向代理与常见排查的速查。 Wed, 19 Aug 2020 02:00:00 GMT