Rookie Blog

基于 Spring Boot 3 + Vue 3 的现代化全栈个人博客系统

项目介绍

Rookie Blog 是一款采用前后端分离架构的现代化个人博客系统。

• 后端：基于 Spring Boot 3、MyBatis Plus 与 Sa-Token 构建，集成了 Elasticsearch 全文检索、Redis 缓存与消息队列等主流技术，提供高性能、高可用的 API 服务。
• 前端：基于 Vue 3 (Composition API)、TypeScript 与 Vite 开发，采用 Glassmorphism（毛玻璃）设计风格，实现了全端响应式布局、沉浸式 Markdown 阅读体验与流畅的交互动画。

项目前后端深度协同，代码规范严谨，注释详尽，旨在为开发者提供一个功能完整、设计优雅的全栈博客解决方案，也是学习现代化 Web 开发的绝佳实战案例。

---

技术栈

前端 (Frontend)	后端 (Backend)	数据与中间件
Core: Vue 3 (Composition API) Language: TypeScript 5.0+ Build: Vite 5 State: Vue Reactive Store Router: Vue Router 4 Style: SCSS (Sass) UI/Anim: GSAP, Glassmorphism	Framework: Spring Boot 3.5.7 ORM: MyBatis Plus 3.5.7 Auth: Sa-Token 1.44.0 Search: Elasticsearch 8.13.2 Doc: SpringDoc (OpenAPI 3) Utils: Lombok, JBCrypt	Database: MySQL 8.0.33 Cache: Redis 7.0 Search: Elasticsearch 8.13 Environment: JDK 21

核心功能

用户体验 (前端) 沉浸阅读: Markdown 实时渲染、代码高亮、公式图表支持 流畅交互: 优雅的骨架屏 Loading、Toast 提示与过渡动画 响应式设计: 完美适配 Desktop, Tablet, Mobile 全终端 暗黑模式: 一键切换深色/浅色主题，自动持久化配置 国际化: 完整的中英文多语言支持 (i18n)

服务能力 (后端) 全文检索: 基于 Elasticsearch 的高性能文章/内容搜索 社区互动: 无限级评论回复、点赞、收藏与防刷机制 权限管理: 基于 Sa-Token 的细粒度 RBAC 权限控制 数据统计: 文章阅读量、点赞数实时统计与热度分析 系统服务: 邮件异步发送、操作日志记录、全局异常处理

项目结构

本项目采用多分支架构管理，前后端代码独立存储：

Rookie-Blog/
├── backend/              # 后端项目 (backend分支)
│   ├── rookie-blog-app/       # 启动模块
│   ├── rookie-blog-web/       # 接口层
│   ├── rookie-blog-service/   # 业务层
│   ├── rookie-blog-repository/# 持久层
│   ├── rookie-blog-domain/    # 领域层
│   └── rookie-blog-common/    # 公共模块
├── frontend/             # 前端项目 (frontend分支)
│   ├── src/
│   │   ├── api/         # API接口
│   │   ├── components/  # 公共组件
│   │   ├── composables/ # 组合式函数 (Hooks)
│   │   ├── locales/     # 国际化资源 (i18n)
│   │   ├── router/      # 路由配置
│   │   ├── store/       # 状态管理 (Pinia/Store)
│   │   ├── styles/      # 全局样式 (SCSS)
│   │   ├── utils/       # 工具函数
│   │   └── views/       # 页面组件
│   ├── public/          # 静态资源
│   └── package.json     # 依赖配置
└── README.md             # 本文档 (main分支)

分支名称	技术栈	说明
backend	Spring Boot 3, MySQL, Redis, ES	后端 API 服务核心代码
frontend	Vue 3, TypeScript, Vite	前端 Web 应用源代码
main	Markdown, Docs	主分支，存放项目总文档与索引

快速开始

1. 获取代码

建议分别克隆前后端分支到本地：

# 1. 克隆后端代码
git clone -b backend https://github.com/patton174/Rookie-Blog.git backend

# 2. 克隆前端代码
git clone -b frontend https://github.com/patton174/Rookie-Blog.git frontend

2. 环境要求

组件	后端要求	前端要求
运行环境	JDK 21 或 17+	Node.js 18+
数据库	MySQL 8.0+, Redis 5.0+	-
其他	Elasticsearch 8.x (可选)	-

3. 启动运行

后端启动 (Backend):

1. 初始化数据库：执行 sql 目录下的 article.sql 和 user.sql。
2. 修改 application.yml 配置数据库与 Redis 连接。
3. 运行 RookieBlogApplication.java。
4. 接口文档地址：http://localhost:8080/api/doc

前端启动 (Frontend):

1. 进入前端目录：cd frontend
2. 安装依赖：npm install
3. 启动服务：npm run dev
4. 访问地址：http://localhost:5173

---

贡献者风采

感谢每一位参与 Rookie Blog 开发的贡献者，是你们让这个项目变得更好。

开源协议

本项目采用 MIT License 开源协议。

Made by Rookie Blog Team