一个基于 Vue 3 + TypeScript + Spring Boot 的前后端分离博客系统，采用 AI 科技感设计风格。

2026-01-26 更新: 添加博客版本历史功能、自定义 MessageBox 组件、优化文档结构！

• 🎨 AI 科技感 UI - 现代化深色主题，渐变发光效果
• 💎 轻拟物设计 - 多层阴影，悬浮交互，流畅动画
• 🚀 前后端分离 - Vue 3 + Spring Boot 独立部署
• 📱 响应式布局 - 完美适配桌面和移动设备
• 🔒 安全加固 - BCrypt 密码加密、JWT 认证、XSS 防护
• 📝 富文本编辑 - 使用 md-editor-v3 支持 Markdown 编辑
• 📜 版本历史 - 文章版本自动保存、对比、恢复
• 🔍 全文搜索 - 支持关键词搜索文章
• 🏷️ 标签分类 - 灵活的内容组织方式
• 💬 评论审核 - 评论内容审核和管理
• 🔐 权限管理 - 完善的权限管理系统
• 🛡️ 代码质量 - 构造器注入、日志规范、常量提取
• 🎯 自定义组件 - 自定义 MessageBox 等通用组件

DBlog/
├── blog-web/           # 后端项目 (Spring Boot 2.7.18 + Java 17)
│   ├── src/main/java/club/javafan/blog/
│   │   ├── service/    # 业务逻辑层（构造器注入）
│   │   ├── controller/ # 控制器层
│   │   ├── domain/     # 实体类
│   │   ├── repository/ # 数据访问层
│   │   └── common/     # 公共组件
│   ├── src/main/resources/
│   │   ├── mapper/     # MyBatis XML
│   │   └── application*.yml
│   └── build.gradle
│
├── blog-frontend/      # 前端项目 (Vue 3 + TypeScript)
│   ├── src/
│   │   ├── api/        # 类型安全的 API 客户端
│   │   ├── components/ # Vue 组件
│   │   ├── views/      # 页面组件
│   │   ├── stores/     # Pinia 状态管理
│   │   ├── router/     # 路由配置
│   │   ├── types/      # TypeScript 类型定义
│   │   └── utils/      # 工具函数
│   ├── package.json
│   └── vite.config.ts
│
├── start-all.sh        # 一键启动脚本
├── stop-all.sh         # 一键停止脚本
└── docs/               # 项目文档

• 框架: Vue 3.5.24 (Composition API + <script setup>)
• 语言: TypeScript 5.x
• 构建工具: Vite 7.2.4
• UI 组件: Element Plus + 自定义组件库
• 路由: Vue Router 4
• 状态管理: Pinia
• HTTP 客户端: Axios (类型安全)
• 富文本编辑器: md-editor-v3 6.3.1
• 样式: SCSS
• 自定义组件: MessageBox（确认对话框）

• 框架: Spring Boot 2.7.18
• 语言: Java 17 (LTS)
• ORM: MyBatis-Plus 3.5.7
• 数据库: MySQL 8.0
• 缓存: Redis (JetCache 2.6.4) + Guava Local Cache
• 安全: BCrypt 密码加密、JWT 认证
• 地理位置: GeoIP2
• 依赖注入: 构造器注入（最佳实践）

• Node.js >= 18
• Java 17
• MySQL 8.0
• Redis 6.0+

# 安装前端依赖
cd blog-frontend
npm install

# 后端依赖会自动下载（Gradle）

# 在 DBlog 根目录执行
./start-all.sh

# 启动后端开发环境 (端口 8000)
cd blog-web
./gradlew bootRun

# 启动后端生产环境 (端口 8100)
cd blog-web
ENV=prd ./gradlew bootRun

# 启动前端 (端口 3000)
cd blog-frontend
npm run dev

# 在 DBlog 根目录执行
./stop-all.sh

cd blog-frontend
npm run build

构建产物在 blog-frontend/dist 目录

cd blog-web
./gradlew build

构建产物在 blog-web/build/libs 目录

• ✅ 密码加密: BCrypt 哈希算法
• ✅ JWT 认证: HS512 算法，密钥强制配置
• ✅ XSS 防护: 评论内容 HTML 清理
• ✅ 文件上传: 扩展名白名单、MIME 类型验证、路径遍历防护
• ✅ SQL 注入防护: MyBatis 参数化查询 + 白名单验证

• ✅ 构造器注入: 所有 Service 类使用构造器依赖注入
• ✅ 日志规范: 统一使用 SLF4J，禁止 printStackTrace
• ✅ 常量提取: 魔法数字和硬编码字符串提取为常量
• ✅ 异常处理: 统一异常处理和日志记录
• ✅ JavaDoc 注释: 关键方法添加文档注释

• 深色背景 (#0f172a)
• 紫色/青色渐变
• 霓虹发光效果
• 浮动动画

• 多层阴影
• 玻璃态效果
• 悬浮交互
• 点击反馈

• 流畅过渡动画
• 响应式布局
• 加载状态提示
• 错误处理

• GET /api/blogs - 获取文章列表（分页）
• GET /api/blogs/{id} - 获取文章详情
• GET /api/blogs/hot - 获取热门文章
• GET /api/blogs/new - 获取最新文章
• GET /api/search - 搜索文章
• GET /api/categories - 获取所有分类
• GET /api/tags - 获取所有标签

• 博客管理：CRUD 操作
• 分类管理：CRUD 操作
• 标签管理：CRUD 操作
• 评论管理：审核、回复
• 图片上传：安全文件上传
• 版本历史：
  • GET /mapi/admin/blogs/{blogId}/versions - 获取文章版本列表
  • GET /mapi/admin/blogs/versions/{versionId} - 获取版本详情
  • POST /mapi/admin/blogs/versions/{versionId}/restore - 恢复到指定版本
  • DELETE /mapi/admin/blogs/versions/cleanup - 清理旧版本

blog-frontend/vite.config.ts

export default defineConfig({
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8100',
        changeOrigin: true
      },
      '/mapi': {
        target: 'http://localhost:8100',
        changeOrigin: true
      }
    }
  }
})

blog-web/src/main/resources/application.yml

• 数据库配置
• Redis 配置
• JWT 密钥配置（必须设置）
• 端口配置（dev: 8000, prd: 8100）

重要: 首次运行前需在 application.yml 中配置 JWT 密钥：

jwt:
  secret: ${JWT_SECRET:your-secret-key-at-least-64-chars-long-for-hs512}

生成安全密钥：openssl rand -base64 64

• 快速开始
• API 路径指南
• 安全配置指南
• 代码重构指南
• 技术迁移指南
• 升级总结

MIT License

dddpeter

DBlog v1.4 | 2026-01-26 更新 | Enjoy coding! 🎉

• ✅ 自动保存文章版本
• ✅ 版本历史查看（分屏对比）
• ✅ 一键恢复到历史版本
• ✅ 自动版本清理机制
• ✅ 版本详情预览

• ✅ MessageBox 自定义对话框组件
• ✅ 支持多种类型（success/warning/info/error）
• ✅ Flexbox 完美居中
• ✅ 优雅的动画效果
• ✅ 统一的项目风格

• ✅ 清理冗余 CLAUDE.md 文档
• ✅ 统一文档管理结构
• ✅ 优化标签验证逻辑
• ✅ 改进文章摘要处理