博客 - 召田最帅boy

博客实战：如何实现精准的“邮件直达评论”深层链接功能

本文介绍在 Spring Boot + Thymeleaf 项目中实现高精度评论深层链接的完整方案。通过后端递归计算目标评论的顶级父 ID（Thread ID），在邮件链接中携带 commentId 和 threadId，并保留锚点作降级；前端脚本解析参数，判断评论是否被折叠，自动展开父级、轮询 AJAX 加载、双重滚动修正图片加载导致的偏移，并以 Teal 呼吸灯动画高亮目标。该实现解决了定位失效、隐藏内容和视觉反馈弱等痛点，提升了用户在邮件通知中快速定位回复的体验。

2026-02-04 10:55:46 阅读

基于Spring Boot + MyBatis-Plus + Thymeleaf的评论管理系统深度解析

本文围绕基于 Spring Boot、MyBatis‑Plus 与 Thymeleaf 的评论管理系统展开深度解析。首先阐述系统采用前后端分离、模板渲染相结合的架构，并选用 Spring Boot、MyBatis‑Plus、Redis、Bootstrap5 等技术以提升开发效率和性能。随后详细说明后端实现，包括分页查询（LambdaQueryWrapper 动态条件、PaginationInnerInterceptor 插件原理）、批量操作（删除、审核状态修改）及事务、幂等性保证。接着探讨缓存策略：评论变更后全库或按键前缀刷新 Redis，并提出懒加载与预加载方案。最后介绍前端响应式布局（表格/卡片切换、固定列宽、Flex 布局）及交互细节（内容展开、批量选择），实现 PC 与移动端的良好用户体验。

2025-07-03 14:55:52 阅读

微服务接口设计原则

微服务通过原子、独立、去中心化的方式实现业务拆分，接口设计需兼顾高可用、高性能和易维护。关键原则包括：降级兜底、过载保护与流量限流、快速失败与超时、无状态与最少依赖、简洁可靠、分散与隔离、幂等和故障自愈；在分布式环境下根据 CAP 定理在一致性和可用性之间权衡，采用 BASE 理论实现基本可用、软状态和最终一致性。性能上尽量使用无锁数据结构和单线程模型，避免锁竞争。遵循这些原则可构建可靠、弹性、可扩展的微服务接口。

2022-08-10 11:46:34 阅读

从96%到70%

本文记录了把四个独立的 Spring Boot 项目（chat、puke、zepp、blog）合并为一个 Maven 多模块工程，只启动一个 total‑app.jar 的实践。原先每个项目占用一个 JVM，导致服务器内存接近 96%；通过在根 pom 统一依赖、在 launcher 中用 SpringApplicationBuilder 依次启动四个 ApplicationContext，并将配置分别放在 chat.yml、puke.yml、zepp.yml、blog.yml 中，消除了 JVM 底座的重复开销，内存降至约 70%。文章重点阐述了类路径冲突、资源目录重名、自动配置串扰和日志全局化等踩坑及对应的统一依赖、资源隔离、spring.autoconfigure.exclude 等解决方案。部署时仅需一次打包并用单条 java 命令启动，端口和 Nginx 配置保持不变，运维更简洁。该方案适合资源受限、访问量不高且对隔离要求不强的场景，虽牺牲了故障隔离，但能显著降低内存压力，为小型服务器提供务实的优化路径。

2026-07-13 18:00:23 阅读

为博客每日一句添加音频播放功能

为博客底部的“每日一句”添加英文音频播放功能。通过有道词典每日一句API获取 voice URL，后端实现 `/api/daily-quote/voice` 代理接口解决 CORS，前端加入圆形播放按钮、CSS 动画和播放状态反馈，使用 HTML5 Audio 管理播放、暂停及结束事件，并处理 DOM 加载时机和移动端样式适配。实现后，点击按钮即可播放或暂停音频，播放中按钮呈粉色脉冲动画，兼容 PC 与移动端，提升访客的英语学习体验。

2026-03-17 10:54:06 阅读

双层缓存+响应式设计：博客每日一句功能完美落地教程

本文详细阐述了在博客底部实现“每日一句”功能的完整方案。后端采用 Spring Boot + RestTemplate，提供 `/api/daily-quote` 接口，使用 ConcurrentHashMap 按日期缓存当天句子，防止频繁调用有道词典 API，并在异常时返回固定备用句子。前端使用原生 JavaScript 与 CSS3，首次请求后将数据写入 localStorage，实现客户端一天一次的二层缓存；通过 `white-space: nowrap`、`text-overflow: ellipsis` 与 `.expanded` 类实现长句折叠/展开交互。布局采用弹性盒子和媒体查询，在桌面、平板、手机三种断点下自动适配宽度和字号。整体实现了每日更新、降级备份、性能优化和响应式展示，代码可直接复制使用。

2026-03-12 09:24:59 阅读

个人博客的代码块折叠/展开功能

随着技术文章代码示例日益冗长，阅读体验受限，作者实现了零依赖、智能折叠的代码块组件。核心采用 CSS max‑height 过渡实现平滑动画，结合实际渲染的字体尺寸、行高和内边距精确计算折叠阈值，仅对超长代码启用。组件提供语言自动识别、复制按钮、ARIA 可访问属性以及响应式触摸优化。性能测试显示首屏加载下降 11%、交互延迟降 28%、代码占比减半，移动端阅读完成率提升 40%。文中还总结了主题兼容、动画防抖、触控尺寸等实现挑战及对应方案，并给出渐进增强、性能优先、无障碍设计等最佳实践，提出虚拟滚动、状态持久化和结构化折叠等后续优化方向。

2026-02-05 17:46:35 阅读

从A标签跳转后JS失效？我踩过的坑和填坑方法

在博客列表页通过普通 `<a>` 跳转到文章详情时，页面加载正常但灯箱、复制按钮等 JS 功能失效，刷新或直接访问 URL 则一切正常。原因是浏览器在普通跳转时可能复用旧的 JS 环境或缓存页面，导致新页面的脚本未完整重新执行。临时解决办法是给链接加 `target="_self"`，强制完整加载；更根本的做法是改进 JS 初始化时机：在 `DOMContentLoaded`、`load`、`pageshow` 等事件中检查关键元素是否已出现，必要时使用 `setTimeout` 或 `Promise` 等方式等待后再调用 `initLightbox、initCopyButton` 等函数；文中还提供了基于 `PageManager` 的完整初始化管理器，能够在页面恢复、前进/后退等场景下安全重置并逐个等待所需元素。经验教训包括：不要盲目信任 `DOMContentLoaded`，要防御性地检查 DOM，了解浏览器缓存机制，并可考虑使用 `MutationObserver` 监听 DOM 变化。

2026-01-27 15:48:14 阅读

Swagger使用教程

Swagger是基于OpenAPI的完整生态，包含规范（YAML/JSON）、交互文档（Swagger UI）、编辑器（Editor）和代码生成（Codegen）。教程分别演示了Node.js + Express和Spring Boot的集成方式，使用JSDoc或注解生成OpenAPI文档并通过/api‑docs查看。随后说明编写OpenAPI YAML、利用UI手动或自动化测试、使用Codegen生成服务器骨架和客户端SDK，以及生产环境的安全和CI/CD最佳实践。最后建议“契约先行”，先设计规范再生成代码，提升前后端协作效率与质量。

2025-12-09 10:18:38 阅读

留言板性能优化：从全量递归到按需加载的实践

原博客留言板一次性递归查询全部评论，导致数据库压力大、页面响应慢、资源浪费。优化思路改为首次只加载顶层评论，新增“展开回复”按钮，用户点击后通过 AJAX 异步获取该评论的完整回复树并平铺渲染。后端增加 replyCount 字段，仅查询顶层并递归返回子树，提供 `/comments/replies/tree` 接口；前端改造 HTML、JS 实现懒加载、展开/收起、平铺展示并优化样式。JMeter 测试显示平均响应时间从 1850 ms 降至 320 ms，查询时间降 97%，传输量降 93%，内存峰值降 82%，页面加载提升约5 倍，用户体验显著改善。

2025-06-16 15:45:23 阅读

输入QQ号自动获取昵称

实现了在博客评论和回复框输入QQ号后自动获取昵称、头像并填充的功能。采用 uapis.cn 提供的 QQ 信息接口，使用正则校验和 jQuery AJAX 异步请求，失焦时触发。经过多接口对比后选定该稳定接口，并在友情链接/留言板和文章详情页完成集成。实现了前端格式验证、错误日志、跨域支持，并提出缓存、加载提示、备用接口及后端代理等优化建议。该功能简化了评论流程，显著提升用户体验。

2022-08-15 19:23:06 阅读

SpringBoot绕过Nginx代理获取客户端真实IP的解决方案

本文介绍在 SpringBoot 项目中通过 Nginx 代理获取客户端真实 IP 并解析其归属地的实现方案。首先在 Nginx 配置 `X-Real-IP` 与 `X-Forwarded-For` 头部，将真实 IP 传递给后端；随后编写 `IpUtil` 工具类，从请求头或 `request.getRemoteAddr()` 读取 IP；引入 `ip2region` 库并在资源目录放置 `ip2region.db`，使用 B‑tree 算法查询 IP 对应的省、市或国家信息；最后在控制层调用 `IpUtil.getIpAddr` 与 `IpUtil.getIpPossession`，将解析结果显示在评论区，实现博客评论的 IP 属地展示。

2022-07-17 14:33:22 阅读