博客

在博客中搜索相关文章

微信公众号API+Redis实现内容访问控制

实现基于微信公众号验证码的文章解锁功能：未关注用户仅能阅读文章前1/3，底部“查看全文”引导关注；关注后发送关键词“博客”即获6位数字验证码，验证码存入Redis（5 分钟有效、单次使用），前端通过 CSS max‑height 与渐变遮罩实现内容截断。用户验证成功后在浏览器 LocalStorage 标记全局解锁状态，实现全站解锁。后端采用 Spring Boot 提供验证码生成/验证 API 与微信消息处理接口，配合 Redis 保存验证码，整体架构为 浏览器 ↔ Spring Boot ↔ Redis ←→ 微信服务器。实现步骤包括 Redis 配置、验证码服务实现、微信接入及前端交互逻辑。

2026-03-26 16:05:09 阅读

SpringBoot结合ip2region实现博客评论显示IP属地

本文介绍在Spring Boot博客系统中使用ip2region实现评论IP属地显示的完整方案。通过IpParseUtil类的getIpAddr获取请求IP，再用parse方法解析为“国家|区域|省份|城市|ISP”或自定义字段列表。将解析结果写入Comment实体的location字段，在前端页面读取并展示。文章还列出所需技术栈（Spring Boot、MySQL、HTML/CSS/JS、ip2region、Commons IO、Lombok）以及关键代码实现和集成步骤，帮助开发者快速为评论添加地理位置信息，提高互动体验。

2024-07-16 17:21:58 阅读

博客的评论与回复功能的实现

文章详述了在个人博客中实现完整评论与回复功能的全过程。首先设计评论表结构，加入blogId、parentId等字段以实现关联和层级关系；随后在页面构建评论表单，利用QQ接口自动获取昵称、头像和邮箱。前端通过jQuery捕获提交和回复操作，构造请求数据并使用Ajax发送至后端。后端Controller接收参数并保存评论，随后根据parentId为‑1的根评论遍历并组织子评论，实现三级嵌套显示。关键点在于新评论置顶、子评论紧随父评论显示，以及通过parentId实现评论的层级结构。全文提供了实体类、HTML、JS及后端代码示例，帮助读者快速搭建可交互的博客评论系统。

2022-08-24 02:34:33 阅读

博客导流到微信公众号

文章介绍了在个人博客中通过 OpenWrite 的“博客导流公众号”功能，将首次访问的读者引导关注微信公众号并获取验证码，从而为公众号带来流量。实现步骤包括：在 OpenWrite 平台注册登录后，进入“增长工具”→“博客导流公众号”，填写博客域名和长期有效的二维码图片链接；在公众号后台设置触发关键字（如“博客”）用于发送验证码；在博客页面嵌入指定的 JavaScript 代码并在文章外层添加 id 为 “container” 的 div。用户仅需一次操作，体验影响不大，却能有效提升公众号关注度。

2022-08-20 23:56:40 阅读

Spring Boot博客系统集成AI智能摘要功能实战

本文示例了在 Spring Boot 博客系统中集成 AI 智能摘要的完整实现。通过在后端定义 AiSummaryService 接口并实现调用 OpenAI 兼容的 AI 接口（如智谱 AI、Moonshot、GPT‑4 等），在 controller 中提供 /api/ai-summary 接口，返回去除 HTML 的纯文本摘要。前端使用 Thymeleaf 页面与 JavaScript，调用该 API 后用打字机动画逐字展示摘要，并在 AI 服务不可用时回退到本地关键词或首段摘要。配置文件中可灵活设置 API 地址、模型、密钥、max‑tokens 等参数，实现前后端分离、可配置的 AI 摘要功能。

2026-03-12 09:31:47 阅读

一次OOM排查实录

日志在运行时被硬截断，排查后发现是 Linux OOM Killer 将进程强制 kill，根因是 2 GB 服务器同时运行 3 个未限制堆大小的 Spring Boot 项目、MySQL 8.0 和监控组件，JVM 默认占用近 3 GB，MySQL 参数又消耗数百 MB，且没有 Swap 作为缓冲。通过为每个 JVM 设置‑Xms/‑Xmx（如 512 M、256 M），调小 MySQL 的 innodb_buffer_pool、max_connections、关闭 performance_schema 并添加 2 GB swap，内存使用降至安全范围，进程不再被 OOM Killer 杀死。经验教训是：小内存机器必须限制 JVM、精简 MySQL 配置并配置 swap，长期方案是迁移数据库或升级机器。

2026-04-23 23:39:08 阅读

博客文章“部分展示+验证解锁”实现

本文介绍在博客中实现“部分展示+验证解锁”阅读限制的完整方案。通过自动计算文章高度，仅显示前1/3并加底部虚化遮罩，配合“查看全文”按钮触发验证弹窗。用户扫码关注公众号、发送关键词获取验证码，校验成功后在本地存储全局解锁标识，文章平滑展开并显示成功动画。实现核心包括HTML结构划分、CSS变量控制截断高度与过渡、JS负责高度计算、锁定/解锁逻辑及验证码校验。文中还提供响应式布局、全局解锁持久化及后续优化建议，如后端API动态验证码、微信自动回复、有效期控制、数据统计和A/B测试等。

2026-03-26 10:55:33 阅读

博客文章分享卡片功能设计与实现

本文介绍了在博客中实现分享卡片的完整方案。通过 HTML Overlay 弹窗、Canvas 绘制和 qrcode.js 生成二维码，实现卡片展示文章标题、摘要、作者、时间等信息，并支持保存为图片。重点阐述了 Canvas 高分辨率绘制、文本手动换行、二维码异步绘制以及响应式 CSS 适配 PC 与移动端的技巧，配以颜色、字体等 UI 设计细节，并提供获取文章数据和下载图片的代码实现，完成一个兼顾性能与体验的分享功能。

2026-03-12 17:48:11 阅读

从点击到滑动：博客图片浏览体验的进化与实现

本文介绍在博客系统中实现图片左右翻动查看的完整方案。通过 initArticleImages() 收集并过滤文章区图片，构建 Lightbox 组件并提供放大、缩放、触摸滑动、键盘方向键和 ESC 关闭等交互。核心代码包括 HTML 结构、CSS 样式以及管理图片索引、导航按钮状态、边界检查的 JavaScript，实现平滑导航、按钮禁用提示和响应式布局。文章还强调性能优化、可访问性和用户体验要点，并指出该查看器可复用于产品展示、相册等多图场景。

2025-07-08 11:45:13 阅读

博客侧边栏热门文章与最新文章功能实现详解

本文介绍在 Spring Boot + Thymeleaf 项目中为博客文章详情页实现侧边栏的热门文章（浏览量前5）和最新文章（发布时间前3）功能。通过只查询必要字段的 SQL、@Cacheable 缓存，实现一次查询复用；在控制器使用 Java 8 Stream 按浏览量降序排序并截取前5篇，直接取前3篇作为最新文章。前端采用 Thymeleaf 循环渲染，CSS 使用 sticky 定位保持左侧固定，媒体查询实现 PC 端显示、移动端隐藏，并通过颜色、圆点、文字截断等样式提升可读性。整体方案兼顾性能、响应式布局和用户体验。

2026-03-13 18:04:35 阅读

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

本文介绍在 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 阅读