本站实践

浏览该分类下的所有文章

基于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 阅读

实现响应式图片查看器：轻量级lightbox解决方案

本文详述如何使用原生 HTML、CSS 与 JavaScript 构建一个轻量级、响应式的 Lightbox 组件。首先定义包含图片和放大/缩小按钮的 HTML 结构，并通过 CSS 实现全屏居中、半透明背景及圆形按钮的视觉效果。随后编写 JavaScript，实现点击任意图片弹出 Lightbox、滚轮或按钮控制缩放、拖拽移动、双指捏合手势的触摸缩放，以及点击背景或图片恢复默认状态以关闭弹窗。整个方案无需外部库，兼容桌面和移动端，提供平滑动画和良好交互体验。

2024-07-08 17:30:41 阅读

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

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

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

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

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

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

实现平滑滚动的“返回顶部”按钮

本文介绍了在网页中实现平滑滚动的“返回顶部”按钮的完整步骤。首先在 HTML 中使用 `<button>` 并加入 SVG 图标、`aria-label` 与 `tabindex` 提升可访问性；随后通过 CSS 将按钮固定在右下角、设置圆形外观、透明度过渡、悬停提示和图标淡出效果；最后利用 jQuery 在按钮点击时调用 `$('html, body').animate({scrollTop:0},'slow')` 实现平滑返回顶部。整体实现兼顾视觉交互和无障碍需求，提升长页面的用户体验。

2024-07-31 16:20:33 阅读

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

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

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

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 阅读

HTML集成优雅的实时输入清除功能

本文介绍了在网页表单中实现实时输入清除的完整方案。通过在输入框右侧嵌入一个隐藏的“×”图标（HTML + <span>），利用 CSS 将图标定位于输入框内部，并通过 JavaScript 监听 input、focus、blur 等事件，在有内容时显示图标、点击后清空文本并隐藏图标。实现步骤简洁、代码可复用，能够提升表单的交互便利性和整体用户体验。

2024-07-11 11:29:39 阅读

HTML实现复制当前链接到剪切板

文章演示了在HTML页面中通过按钮实现复制当前页面链接到剪切板的完整步骤：使用<a>标签获取链接，点击按钮时动态创建隐藏的<input>，将链接写入并选中，调用 document.execCommand("Copy") 执行复制，依据返回值或异常弹出成功、失败或错误提示，从而实现“一键分享”。

2022-09-23 18:25:44 阅读

HTML页面嵌入视频的方案

文章介绍了在HTML页面中使用 `<iframe>` 标签嵌入视频的基本方法，示例代码演示了如何通过 `src` 指定YouTube视频地址、设置宽高、允许全屏及相关权限。若需禁止自动播放，可在 `allow` 属性中加入 `autoplay=false`，并可通过 `style` 调整布局。整个实现简洁且可直接复制使用。

2022-07-19 17:39:32 阅读

什么？十行代码实现了斗图？

文章介绍了在评论区实现“斗图”的两种方案：上传图片或直接输入图片链接。由于上传会占用服务器存储且对非表情包用户不便，作者选用第二种方式，即在评论框输入以 http/https 开头的图片地址，提交后通过 JavaScript 检测并自动包装成 `<img>` 标签显示。文中提供了相应的 HTML textarea 示例和核心 JS 代码，并演示了使用方法，推荐使用表情包网站复制图片地址直接粘贴即可。

2022-08-24 23:34:47 阅读

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

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

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