博客

在博客中搜索相关文章

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

实现基于 Web 的 AI 对话机器人，嵌入博客文章页面，提供文章上下文的智能问答。核心功能包括打字机逐字显示、生成过程暂停/继续、对话历史本地持久化、快捷预设问题及响应式布局。前端采用原生 HTML5、CSS3、JavaScript，配合 Marked.js 解析 Markdown、Highlight.js 代码高亮、Font Awesome 图标；后端通过 RESTful API 调用 AI 服务，数据存储使用 LocalStorage。系统划分为界面层、交互层、数据层和服务层，采用状态机管理 idle、thinking、generating、paused 等状态。针对打字机与 Markdown 同步、暂停状态持久化、多状态切换不一致等难点，分别实现增量渲染、保存暂停标记和统一状态变量等解决方案。

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

留言板表情系统技术实现：从代码输入到直观显示的演进

本文记录了博客留言板表情系统的技术演进：从最初的[:表情名:]文本编码因记忆成本高、交互不直观而体验差，重构为“所见即所得”。采用 contenteditable 替代 textarea 实现图片即时插入，并通过实时双向同步将图片转回代码存入后端；页面加载时解析代码转为 <img>。动态生成表情面板，精确在光标位置插入，兼容回复框及移动端响应式布局与触摸事件。加入懒加载、输入防抖等性能优化，对比数据表明表情使用率、用户满意度显著提升。

2026-02-04 09:07:35 阅读

Spring Boot IOC架构落地与最佳实践

Spring Boot IOC是微服务松耦合的基石，文章先阐述容器层次、启动流程及 Bean 的完整生命周期，推荐构造器注入并结合 @Profile、@Conditional 实现环境化配置。进一步解析单例、原型、请求等多种作用域及线程安全设计，展示工厂模式在多实现支付服务中的使用。最后介绍延迟加载、循环依赖处理及监控、健康检查等生产实践，提供落地指南与最佳实践。

2026-01-29 10:16:45 阅读

为代码块添加复制按钮的完整实现方案

文章介绍在博客或技术文档页面为每个代码块自动添加复制按钮的完整实现方案。通过在 Thymeleaf 渲染的 `pre` 元素外层包裹 `div` 实现相对定位；CSS 统一视觉样式并提供悬停、点击及复制成功的反馈效果；JavaScript 在 `DOMContentLoaded` 后遍历所有 `pre`，动态创建按钮，使用 `navigator.clipboard` 复制代码文本，点击后显示“已复制”并在 2 秒后恢复。方案兼顾性能、现代浏览器兼容和可访问性，并提出快捷键、主题定制、批量复制等扩展建议。

2025-07-10 14:21:17 阅读

现代Web表情选择器组件：分类系统与实现详解

本文介绍了构建专业级 Web 表情选择器的核心——分类系统与实现。采用 7 大主题分类（表情、人物、动物、食物、旅行、物体、符号），每类配以图标、表情数量（约 70‑90 条）和代表 Emoji。通过 HTML 结构实现标签页与对应面板的切换，并给出每个分类的具体 Emoji 示例代码，展示如何在页面中组织、渲染并交互式展示完整的表情库。文章还说明了作者对原有库的归类与补充工作。

2025-06-28 00:00:31 阅读

基于URL弹窗的图片链接生成功能技术实现

实现了在博客系统中通过弹窗输入图片URL并自动生成 `<img>` 标签插入编辑框的功能。核心包括模态对话框、正则校验 JPG/PNG/GIF/WEBP、实时预览、基于 Map 的 UUID 管理、光标位置控制以及删除操作。文中提供关键代码、响应式预览样式，并给出 CORS 与 Content‑Security‑Policy 安全建议。最后展望了拖拽上传、云存储、尺寸调节、懒加载等扩展方向。

2025-05-28 15:16:11 阅读

构建可定制的表情选择器组件

本文示例了如何使用 HTML、CSS 与 JavaScript 构建一个可高度定制的表情选择器组件。先搭建包含触发按钮、选择面板和文本框的基本结构；随后通过 CSS 为按钮和面板添加尺寸、圆角、鼠标指针等样式，实现美观且响应式的界面；核心在于 JavaScript：在页面加载时动态生成 Emoji 按钮列表，点击按钮即可将对应表情插入目标文本域，并阻止事件冒泡；点击触发按钮切换面板显示，点击页面其他位置自动隐藏。整体实现简洁、易扩展，适用于聊天、评论等场景，提供良好用户体验。

2024-07-30 07:04:26 阅读

场景题

文章分别介绍了微信红包、秒杀系统、扫码登录、单点登录和本地缓存的实现要点。红包采用实时内存计算、随机算法、Cache计数防超发；秒杀需防超卖、限流、Redis预减库存、URL动态化、异步下单等；扫码登录通过二维码ID关联Token，分待扫描、已扫待确认、已确认三阶段完成；SSO实现全局会话与局部会话的令牌授权及统一注销；本地缓存关注数据结构、容量上限、LRU/FIFO等淘汰策略、过期时间和线程安全。

2023-03-01 18:18:32 阅读

mapstruct的基本使用

MapStruct 是基于注解的编译期代码生成器，可通过普通 getter/setter 实现类型安全、无反射的对象映射，避免手写冗余代码并在编译时捕获映射不完整或类型不匹配的问题。文章先展示了原始的博客评论接口实现，代码臃肿且不易维护，随后引入 MapStruct 依赖并创建 `CommentInfoConverter` 接口，在其中通过默认方法把 `HttpServletRequest` 的参数转换为 `Comments` 实体，控制层只需调用 `commentInfoConverter.map(request)` 即可完成对象构建，代码更简洁。最后给出运行时报的 `NullPointerException` 堆栈，提示在使用旧版 1.2.0.CR1 时可能出现内部处理错误。

2022-09-08 14:41:00 阅读