个人技术博客系统

一个基于 Spring Boot 3 + Vue 3 的现代化个人技术博客系统,采用前后端分离架构,支持文章管理、评论互动、标签分类、学习路线等功能。

技术栈

后端

框架: Spring Boot 3.x
ORM: MyBatis-Plus
数据库: MySQL 8.0
缓存: Redis
安全: Spring Security + JWT
对象存储: MinIO
限流: Resilience4j
监控: Spring Boot Actuator
构建工具: Maven

前端

框架: Vue 3 (Composition API)
构建工具: Vite
UI 组件: Element Plus
状态管理: Pinia
路由: Vue Router
Markdown 编辑器: md-editor-v3
思维导图: jsMind

主要功能

用户端

✅ 文章浏览与搜索
✅ 文章详情与评论
✅ 标签聚合与筛选
✅ 学习路线展示(思维导图可视化)
✅ 暗色模式切换
✅ 响应式布局

管理后台

✅ 文章管理(发布、编辑、删除)
✅ Markdown 编辑器
✅ 图片上传(MinIO 对象存储)
✅ 评论管理
✅ 标签管理
✅ 学习路线管理(思维导图编辑)
✅ 友情链接管理
✅ 关于我管理
✅ 系统设置
✅ 操作日志
✅ 回收站

快速开始

环境要求

JDK 17+
Node.js 16+
MySQL 8.0+
Redis 5.0+
Maven 3.6+
MinIO (可选，用于对象存储)
Docker (可选，用于容器化部署)

后端启动

创建数据库

CREATE DATABASE blog_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

导入数据库表结构

# 导入基础表结构
mysql -u root -p blog_db < blog-backend/src/main/resources/sql/learning_path.sql

# 导入测试数据(可选)
mysql -u root -p blog_db < blog-backend/src/main/resources/sql/learning_path_test_data.sql

修改配置文件

# blog-backend/src/main/resources/application.yml
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/blog_db
    username: root
    password: your_password

  data:
    redis:
      host: localhost
      port: 6379
      password: your_redis_password

# MinIO 配置
minio:
  endpoint: http://localhost:9000
  access-key: admin
  secret-key: admin123456
  bucket-name: blog-uploads

启动 MinIO (可选)

# 使用 Docker 启动 MinIO
docker run -d \
  -p 9000:9000 \
  -p 9001:9001 \
  --name minio \
  -e "MINIO_ROOT_USER=admin" \
  -e "MINIO_ROOT_PASSWORD=admin123456" \
  -v D:/zm/study/JavaDiary/Persional_blog/minio/data:/data \
  minio/minio server /data --console-address ":9001"

# 创建 bucket 并设置访问策略
docker exec minio mc alias set myminio http://localhost:9000 admin admin123456
docker exec minio mc mb myminio/blog-uploads
docker exec minio mc anonymous set download myminio/blog-uploads

启动后端服务

cd blog-backend
mvn clean compile
mvn spring-boot:run

后端服务将运行在 http://localhost:8080/api

前端启动

安装依赖

cd blog-frontend
npm install

启动开发服务器

npm run dev

前端服务将运行在 http://localhost:5173

构建生产版本

npm run build

项目结构

Persional_blog/
├── blog-backend/                 # 后端项目
│   ├── src/main/java/com/blog/
│   │   ├── config/              # 配置类
│   │   │   ├── security/        # Spring Security + JWT
│   │   │   ├── aspect/          # AOP 切面
│   │   │   └── annotation/      # 自定义注解
│   │   ├── controller/          # 控制器
│   │   │   └── admin/           # 管理后台接口
│   │   ├── service/             # 业务逻辑层
│   │   ├── mapper/              # 数据访问层
│   │   ├── entity/              # 实体类
│   │   ├── dto/                 # 数据传输对象
│   │   ├── vo/                  # 视图对象
│   │   ├── utils/               # 工具类
│   │   └── exception/           # 异常处理
│   └── src/main/resources/
│       ├── mapper/              # MyBatis XML
│       ├── sql/                 # SQL 脚本
│       └── application.yml      # 配置文件
│
├── blog-frontend/               # 前端项目
│   ├── src/
│   │   ├── layout/             # 布局组件
│   │   ├── views/              # 页面组件
│   │   │   ├── user/           # 用户端页面
│   │   │   └── admin/          # 管理后台页面
│   │   ├── components/         # 公共组件
│   │   ├── router/             # 路由配置
│   │   ├── store/              # 状态管理
│   │   ├── api/                # API 封装
│   │   ├── utils/              # 工具函数
│   │   └── assets/             # 静态资源
│   └── vite.config.js          # Vite 配置
│
├── doc/                        # 文档目录
├── CLAUDE.md                   # Claude Code 项目说明
└── README.md                   # 项目说明文档

API 接口

公开接口

GET /article/list - 文章列表
GET /article/{id} - 文章详情
GET /tag/all - 所有标签
GET /comment/list - 评论列表
POST /comment/add - 添加评论
GET /learning-path/list - 学习路线列表
GET /learning-path/{id} - 学习路线详情
POST /auth/login - 用户登录
POST /auth/register - 用户注册

管理接口 (需要 ADMIN 权限)

POST /admin/article/save - 保存文章
DELETE /admin/article/{id} - 删除文章
GET /admin/comment/list - 评论管理
POST /admin/tag/save - 保存标签
GET /admin/learning-path/list - 学习路线管理
POST /admin/learning-path/save - 保存学习路线
GET /admin/learning-path/{pathId}/nodes - 获取路线节点
POST /admin/learning-path/node/save - 保存节点

核心特性

1. JWT 认证

无状态认证机制
Token 存储在 Redis 中
自动刷新 Token
权限控制(ADMIN/USER)

2. 学习路线

思维导图可视化展示
支持多层级节点结构
节点可关联文章或外部链接
支持导出为图片
浏览量统计

3. Markdown 编辑

实时预览
代码高亮
图片上传
目录导航

4. 主题切换

支持亮色/暗色模式
自动适配系统主题
主题状态持久化

5. 操作日志

自动记录管理操作
AOP 切面实现
支持日志查询

6. MinIO 对象存储

图片上传到 MinIO
支持公开访问
自动生成唯一文件名
文件大小限制(2MB)

7. Resilience4j 限流

登录限流(5次/分钟)
注册限流(3次/分钟)
评论限流(10次/分钟)
上传限流(20次/分钟)

8. Actuator 监控

健康检查 /actuator/health
应用信息 /actuator/info
性能指标 /actuator/metrics
Prometheus 集成

开发命令

后端

# 编译
mvn clean compile

# 运行
mvn spring-boot:run

# 打包
mvn clean package

# 测试
mvn test

前端

# 安装依赖
npm install

# 开发环境
npm run dev

# 构建生产
npm run build

# 预览构建
npm run preview

配置说明

环境变量

后端支持通过环境变量覆盖配置:

# 数据库
DB_URL=jdbc:mysql://localhost:3306/blog_db
DB_USER=root
DB_PASS=your_password

# Redis
REDIS_HOST=localhost
REDIS_PORT=6379
REDIS_PASSWORD=your_redis_password

# JWT
JWT_SECRET=your_secret_key
JWT_EXPIRATION=604800000

CORS 配置

在 application.yml 中配置允许的跨域来源:

app:
  cors:
    allowed-origins: http://localhost:5173

部署

后端部署

# 打包
mvn clean package -Pprod

# 运行
java -jar blog-backend/target/blog-backend-1.0.0.jar

前端部署

# 构建
npm run build

# 将 dist 目录部署到 Nginx

Nginx 配置示例

server {
    listen 80;
    server_name your-domain.com;

    # 前端静态文件
    location / {
        root /path/to/dist;
        try_files $uri $uri/ /index.html;
    }

    # 后端 API 代理
    location /api {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

常见问题

1. 跨域问题

确保后端 CORS 配置正确,或使用 Nginx 反向代理。

2. JWT Token 过期

Token 默认有效期 7 天,过期后需要重新登录。

3. 文件上传失败

检查 MinIO 服务是否启动，访问 http://localhost:9001 查看 MinIO 控制台。确保 bucket 已创建并设置了正确的访问策略。

4. Redis 连接失败

确保 Redis 服务已启动,检查连接配置是否正确。

5. 限流触发

如果频繁操作触发限流，会返回 429 状态码。请等待一段时间后重试。

6. Controller 路径配置

注意：由于 application.yml 中配置了 context-path: /api，Controller 中的 @RequestMapping 不应该包含 /api 前缀。例如：

✅ 正确：@RequestMapping("/admin/upload")
❌ 错误：@RequestMapping("/api/admin/upload")

开发规范

后端

使用 Lombok 简化代码
统一使用 Result 封装响应
使用 @Log 注解记录操作日志
遵循 RESTful API 设计规范

前端

组件命名使用 PascalCase
使用 Composition API
统一使用 request.js 进行 API 调用
遵循 Vue 3 最佳实践

贡献指南

欢迎提交 Issue 和 Pull Request!

Fork 本项目
创建特性分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
提交 Pull Request

许可证

MIT License

联系方式

作者: 周武俊
邮箱: 1665225546@qq.com
博客: https://your-blog.com

致谢

感谢以下开源项目:

更新日志

v1.1.0 (2026-03-08)

✨ 新增 MinIO 对象存储支持
✨ 新增 Resilience4j 限流功能
✨ 新增 Actuator 监控端点
✨ 新增关于我功能模块
🐛 修复 Controller 路径配置问题
🐛 修复前端 API 请求路径重复问题
📝 完善项目文档

v1.0.0 (2026-03-04)

🎉 项目初始版本发布
✨ 实现文章管理功能
✨ 实现学习路线功能
✨ 实现评论系统
✨ 实现标签管理
✨ 实现用户认证

Name		Name	Last commit message	Last commit date
Latest commit History 8 Commits
.claude		.claude
.idea		.idea
blog-backend		blog-backend
blog-frontend		blog-frontend
doc		doc
.gitignore		.gitignore
CLAUDE.md		CLAUDE.md
Persional_blog.iml		Persional_blog.iml
README.md		README.md
blog-backend.iml		blog-backend.iml
fix-admin-role.sql		fix-admin-role.sql

Folders and files

Latest commit

History

Repository files navigation

个人技术博客系统

技术栈

后端

前端

主要功能

用户端

管理后台

快速开始

环境要求

后端启动

前端启动

项目结构

API 接口

公开接口

管理接口 (需要 ADMIN 权限)

核心特性

1. JWT 认证

2. 学习路线

3. Markdown 编辑

4. 主题切换

5. 操作日志

6. MinIO 对象存储

7. Resilience4j 限流

8. Actuator 监控

开发命令

后端

前端

配置说明

环境变量

CORS 配置

部署

后端部署

前端部署

Nginx 配置示例

常见问题

1. 跨域问题

2. JWT Token 过期

3. 文件上传失败

4. Redis 连接失败

5. 限流触发

6. Controller 路径配置

开发规范

后端

前端

贡献指南

许可证

联系方式

致谢

更新日志

v1.1.0 (2026-03-08)

v1.0.0 (2026-03-04)

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages