博客 - 召田最帅boy

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

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

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

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

文章阐述Spring Boot IOC的核心原理与架构，展示容器启动流程、Bean 生命周期及各阶段回调；比较构造器、Setter、字段、方法四种依赖注入方式并推荐构造器注入；通过 @Profile、@Conditional 实现环境化条件装配；系统梳理单例、原型、请求、会话、应用等作用域及其线程安全设计；结合工厂模式演示在 IOC 中动态获取实现；最后介绍延迟加载、循环依赖解决、AOP、健康检查等生产级最佳实践，为微服务和云原生项目落地提供完整指南。

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‑jdk8 与 mapstruct‑processor 依赖，定义 `CommentInfoConverter` 接口并在 `map` 方法中把 `HttpServletRequest` 参数转换为 `Comments` 实体，Controller 只需调用该转换器即可，使业务层代码简洁。最后给出运行时出现的 NullPointerException 堆栈，提示在 MapStruct 处理器获取版本信息时出错，需检查依赖版本或构建环境。

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