个人博客系统

一个基于 React + FastAPI + MySQL 的现代化个人博客系统，支持 Docker 容器化部署。

✨ 特性

• 📝 完整的博客功能（文章发布、编辑、删除）
• 🔐 用户认证与授权系统
• 🏷️ 文章分类与标签管理
• 💬 评论系统
• 📱 响应式设计，支持移动端
• 🔍 文章搜索与筛选
• 📊 数据统计与仪表盘
• 🐳 Docker 容器化部署

🛠️ 技术栈

前端

• React 18 - 现代化前端框架
• React Router - 路由管理
• Axios - HTTP 客户端
• Tailwind CSS - 原子化 CSS 框架
• Zustand - 轻量级状态管理
• React Markdown - Markdown 渲染
• React Hot Toast - 通知提示

后端

• FastAPI - 现代、快速的 Python Web 框架
• SQLAlchemy - ORM 框架
• MySQL 8.0 - 关系型数据库
• JWT - JSON Web Token 认证
• Passlib - 密码加密

部署

• Docker - 容器化
• Docker Compose - 多容器编排
• Nginx - 反向代理服务器

📁 项目结构

personal-blog/
├── frontend/                 # React 前端应用
│   ├── public/              # 静态资源
│   ├── src/                 # 源代码
│   │   ├── components/      # 可复用组件
│   │   ├── pages/          # 页面组件
│   │   ├── store/          # 状态管理
│   │   └── utils/          # 工具函数
│   ├── Dockerfile          # 前端 Docker 配置
│   └── package.json        # 前端依赖
│
├── backend/                 # FastAPI 后端应用
│   ├── main.py             # 主应用入口
│   ├── models.py           # 数据库模型
│   ├── schemas.py          # 数据验证模式
│   ├── auth.py             # 认证相关
│   ├── database.py         # 数据库配置
│   ├── requirements.txt    # Python 依赖
│   └── Dockerfile          # 后端 Docker 配置
│
├── database/               # 数据库相关
│   └── init.sql           # 数据库初始化脚本
│
├── nginx/                  # Nginx 配置
│   └── nginx.conf         # Nginx 配置文件
│
├── docker-compose.yml     # Docker Compose 配置
├── .env                   # 环境变量配置
└── README.md             # 项目说明

🚀 快速开始

环境要求

• Docker 和 Docker Compose
• Git

安装与运行

1. 克隆项目

   git clone <repository-url>
   cd personal-blog

2. 配置环境变量

   cp .env.example .env
   # 编辑 .env 文件，设置你的配置

3. 启动项目

   docker-compose up -d

4. 访问应用

   • 前端应用: http://localhost:3000
   • 后端 API: http://localhost:8000
   • API 文档: http://localhost:8000/docs

5. 停止项目

   docker-compose down

📊 数据库结构

主要数据表

• users - 用户信息表
• posts - 文章信息表
• categories - 分类表
• tags - 标签表
• comments - 评论表

关联关系

• 用户与文章：一对多 (一个用户可以写多篇文章)
• 文章与分类：多对多 (一篇文章可以有多个分类)
• 文章与标签：多对多 (一篇文章可以有多个标签)
• 文章与评论：一对多 (一篇文章可以有多条评论)

🔌 API 接口

认证相关

• POST /api/auth/register - 用户注册
• POST /api/auth/login - 用户登录
• GET /api/auth/me - 获取当前用户信息

文章相关

• GET /api/posts - 获取文章列表
• GET /api/posts/{id} - 获取单篇文章
• POST /api/posts - 创建文章
• PUT /api/posts/{id} - 更新文章
• DELETE /api/posts/{id} - 删除文章

分类和标签

• GET /api/categories - 获取分类列表
• GET /api/tags - 获取标签列表

评论相关

• GET /api/posts/{id}/comments - 获取文章评论
• POST /api/posts/{id}/comments - 发表评论

🎨 前端页面

• 首页 / - 展示最新文章和统计信息
• 博客列表 /blog - 文章列表，支持搜索和筛选
• 文章详情 /post/:id - 单篇文章详情和评论
• 登录 /login - 用户登录
• 注册 /register - 用户注册
• 仪表盘 /dashboard - 用户文章管理
• 写文章 /create-post - 创建新文章
• 编辑文章 /edit-post/:id - 编辑已有文章
• 个人资料 /profile - 用户个人设置

🔧 开发指南

前端开发

cd frontend
npm install
npm start

后端开发

cd backend
pip install -r requirements.txt
uvicorn main:app --reload

数据库迁移

# 进入后端容器
docker-compose exec backend bash

# 运行数据库迁移
alembic upgrade head

📝 功能规划

已完成 ✅

• 用户注册与登录
• 文章的增删改查
• 文章分类和标签
• 评论系统
• 响应式设计
• Docker 容器化部署
• 文章搜索和筛选
• 用户仪表盘
• Markdown 编辑器
• 代码高亮

计划中 📋

• 文章点赞功能
• 文章分享功能
• 文件上传功能
• 邮件通知
• RSS 订阅
• 网站地图
• SEO 优化
• 网站统计分析
• 多语言支持
• 主题切换

🐛 常见问题

1. 数据库连接失败

确保 MySQL 容器已启动，检查环境变量中的数据库配置是否正确。

2. 前端无法访问后端 API

检查 CORS 配置和 API URL 设置，确保前后端容器在同一网络中。

3. Docker 容器无法启动

检查端口是否被占用，查看 Docker 日志获取详细错误信息。

📄 许可证

本项目采用 MIT 许可证。

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📮 联系方式

• 邮箱: your-email@example.com
• GitHub: your-github-username

---

Enjoy Blogging! 🎉