Java - 召田最帅boy

AI对话机器人技术实现文档

本项目在博客页面实现基于Web的AI对话机器人，提供基于文章内容的智能问答。核心功能包括上下文问答、打字机逐字显示、暂停/继续、对话历史本地持久化、快捷常见问题以及响应式布局。技术选型采用原生HTML5 + CSS3 + JavaScript、Marked.js、Highlight.js、Font Awesome，后端通过RESTful API调用AI服务；数据存储使用LocalStorage。系统分为用户界面层、交互逻辑层、数据处理层和服务接口层，AI生成过程通过状态机管理（idle → thinking → generating → paused → completed）。实现重点在打字机效果与增量Markdown渲染同步、暂停状态持久化及多状态切换的稳定性，均通过增量渲染、历史记录标记和统一状态变量等方案解决。

2026-03-17 15:54:44 阅读

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

本文介绍在博客“每日一句”模块中添加英文音频播放功能的完整实现过程。首先分析需求，确定需通过后端代理解决有道词典API的 CORS 限制，提供 `/api/daily-quote/voice` 接口返回音频 URL。随后在前端添加圆形播放按钮，使用 HTML5 Audio API 实现播放、暂停及结束状态的切换，并通过 CSS 设置默认、播放中（粉色脉冲）两种视觉效果，实现 PC 与移动端的响应式适配。文中还总结了跨域代理、DOM 加载时机、响应式设计等关键技术点及用户体验细节，展示了一个前后端协同、兼顾 UI 与交互的实用小功能。

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

使用自定义图片作为Emoji表情的技术实现

本文介绍在 Web 项目中实现基于自定义 PNG 图片的 Emoji 系统的完整方案。通过在 /static/img/emoji/ 统一存放表情图片，并采用有意义的英文/拼音命名，使用 JavaScript 定义路径、文件名列表，利用正则 \[:name:\] 将文本代码转换为 <img> 标签实现显示；在编辑器中点击面板插入对应 <img>，提交前再将图片恢复为 [:name:] 纯文本存储。配套 CSS 设定内联表情和响应式面板样式，并提供面板显示/隐藏、点击冒泡控制等交互逻辑。进阶可加入 IntersectionObserver 懒加载、localStorage 记录最近使用、按分类展示等功能。方案优势在于纯文本存储便于查询、可随时扩展新表情、跨平台兼容且视觉统一。

2026-03-16 17:11:25 阅读

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

在博客详情页加入左侧侧边栏，可展示按浏览量排序的前5篇热门文章和按发布时间排序的前3篇最新文章，提升阅读发现和停留时长。实现思路包括：①在 MySQL 中仅查询 id、标题、URL、浏览量、发布时间、缩略图等必要字段，避免大字段导致的性能损耗；②Service 层使用 Spring Cache 缓存查询结果，实现一次查询复用；③Controller 通过一次查询得到全部侧边栏数据，使用 Java 8 Stream 按浏览量降序取前5篇作为热门文章，直接取前3条作为最新文章，并在模型中分别放入 `hotArticles`、`latestArticles`；④前端采用 Thymeleaf 渲染列表，CSS 使用 `position: sticky` 实现滚动固定，媒体查询在 PC（≥1024px）显示左侧栏，移动端自动隐藏；⑤通过排名颜色、浏览量图标、标题省略号等细节提升可视化效果。整体方案兼顾功能完整、响应式布局和查询性能。

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

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

本文详述在个人博客中实现分享卡片的完整方案。首先通过HTML Overlay 弹出卡片窗口，利用 Canvas API 绘制背景、标题、摘要、作者信息及二维码，并自行实现文本自动换行函数以控制行数。二维码采用 qrcode.js 异步生成后绘入画布。卡片支持高清渲染、响应式布局（PC 与移动端）以及一键保存为 PNG。文中提供了颜色、字体、布局的 UI 设计细节、获取文章元数据的脚本以及性能优化要点，帮助开发者快速构建兼具美观与实用的博客分享功能。

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

视觉盛宴：手把手教你实现一个现代化的弹幕墙

本文系统阐述了如何打造现代化弹幕墙，包括采用玻璃拟态风格与多主题配色的视觉设计，利用 transform+keyframes 实现流畅滚动并通过轨道管理与安全轨道检测防止弹幕重叠。针对不同设备和全屏/非全屏状态，提供动态轨道数计算、居中或顶部布局的响应式方案，并实现速度调节、暂停播放等交互控制。最后给出 GPU 加速、DOM 回收、对象池等性能优化措施，形成视觉吸引、交互顺畅且易于扩展的弹幕系统。

2026-03-12 11:31:19 阅读

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

本文详解在 Spring Boot 博客系统中实现 AI 智能摘要的完整方案。通过前后端分离架构，后端提供 AiSummaryService 接口并基于 OpenAI 兼容 API 调用智谱 AI、Moonshot、GPT‑4 等模型生成限定字数的摘要；在 controller 中暴露 /api/ai-summary 接口，完成文章内容抽取、HTML 清洗和异常处理。配置文件统一管理 API 密钥、模型、参数。前端采用 Thymeleaf 页面，利用 JavaScript 实现打字机动画展示摘要，并在 AI 调用失败时回退本地关键词或首段摘要。文中还列出支持的国内 AI 服务商及对应模型，提供完整代码示例与实现细节。

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

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

本文详细介绍在博客底部实现“每日一句”功能的完整方案。后端采用 Spring Boot，使用 RestTemplate 调用有道词典 API，并通过 ConcurrentHashMap 按日期缓存，提供降级备用句子；前端采用原生 JavaScript、CSS3，利用 fetch 拉取数据并存入 localStorage，实现双层缓存，避免重复请求。通过 CSS 省略号与 .expanded 类实现长句展开收起，配合媒体查询实现桌面、平板、手机的响应式布局。整体架构保证每日更新、稳定可靠、性能优化和良好交互体验。

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

使用Java代码制作二维码（超级简单）

本文介绍了在 Java 项目中使用开源库 ZXing 快速生成二维码的完整流程。先通过 Maven 引入 core 与 javase 包，再设置字符集、容错级别、边距等 EncodeHint 参数，使用 QRCodeWriter 将内容编码为 BitMatrix，并借助 MatrixToImageWriter 输出 PNG。随后提供了在二维码中心嵌入 Logo、修改前景/背景颜色的实现技巧，以及将生成逻辑封装为 QRCodeService 供复用。文中示例了 Spring Boot 控制器实时返回二维码图片，并列出中文乱码、识别率低、边距不足等常见问题及解决方案，最后给出用户绑定、电子票务、支付、Wi‑Fi 分享等典型应用场景。

2021-10-15 11:50:11 阅读

Math.abs()竟然返回了负数？

Math.abs 在普通数值下返回非负，但对 int 最小值 Integer.MIN_VALUE 会返回其本身的负数。原因是补码表示下 ‑Integer.MIN_VALUE 超出 int 最大范围，产生溢出，JDK 已在注释中将其定义为合法特例。使用时应先检测该边界，或将值提升为 long、BigInteger，或使用 Math.addExact、Math.multiplyExact 等安全方法，以避免溢出风险。

2021-11-04 16:26:05 阅读

打牌记账-使用手册

打牌记账是一款无需注册、跨平台的实时多人记账工具，适用于麻将、斗地主等棋牌。核心功能包括创建/加密房间、最多8人协作、实时同步、自动盈亏计算、结算统计、历史记录、二维码或链接邀请。使用流程为打开浏览器→创建或加入房间（可设密码）→输入昵称→点击输家卡片选择赢家并记账，房主可在局终结算并锁定房间。提供“我加入的房间”查看未结/已结算记录，支持昵称修改、记录查询。系统采用 BCrypt 加密密码、WebSocket 异步广播，保障安全与高并发。常见问题涵盖房间号、人数上限、昵称冲突、密码遗忘等。

2026-02-27 15:47:53 阅读

打牌记账-技术文档

本项目为多人打牌记账小程序，解决纸笔记账易错、同步慢、历史难查的问题。目标实现实时同步、最多8人协作、数据持久化、跨平台访问以及简洁易用。技术选型包括 Spring Boot、MyBatis‑Plus、MySQL、WebSocket、原生 HTML5/JS、Thymeleaf 等，后端采用分层架构（Controller、Service、Mapper），前端通过浏览器直接访问。核心功能实现房间管理（8 位唯一码、房主自动设定、乐观锁控制人数）和用户管理（加入校验、昵称唯一、在线状态），并通过 WebSocket 推送记账操作，实现实时、多人协作的数字化记账。

2026-02-28 14:36:05 阅读