个人博客系统

一个基于 Vue 3 + FastAPI 的现代化个人博客系统，支持文章管理、分类标签、内存优化和文件管理。

项目结构

game_demo/
├── frontend/              # 前端项目
│   ├── public/           # 静态资源
│   ├── src/              # 源代码
│   │   ├── components/   # Vue 组件
│   │   ├── views/        # 页面视图
│   │   ├── router/       # 路由配置
│   │   ├── stores/       # Pinia 状态管理
│   │   ├── services/     # API 服务
│   │   ├── utils/        # 工具函数
│   │   └── types/        # TypeScript 类型定义
│   ├── index.html        # HTML 模板
│   ├── package.json      # 前端依赖
│   └── vite.config.ts    # Vite 配置
│
├── backend/              # 后端项目
│   ├── web/              # Web 应用
│   │   ├── app/          # 应用代码
│   │   │   ├── routers/  # API 路由
│   │   │   ├── services/ # 业务服务
│   │   │   ├── models.py # 数据库模型
│   │   │   ├── schemas.py# Pydantic 模型
│   │   │   ├── auth.py   # 认证模块
│   │   │   ├── database.py# 数据库配置
│   │   │   ├── config.py # 配置文件
│   │   │   └── main.py   # FastAPI 应用
│   │   ├── uploads/      # 上传文件目录
│   │   └── static/       # 前端构建产物
│   ├── run.py            # 启动脚本
│   ├── requirements.txt  # Python 依赖
│   └── .env.example      # 环境变量示例
│
├── .gitignore            # Git 忽略文件
└── requirements.txt      # 项目总依赖文件

技术栈

前端

• Vue 3 + TypeScript
• Vite
• Tailwind CSS
• Pinia (状态管理)
• Vue Router
• Markdown-it (Markdown 渲染)

后端

• FastAPI
• SQLAlchemy (异步 ORM)
• SQLite (数据库)
• JWT 认证
• Pillow (图片处理)
• psutil (内存监控)

快速开始

环境要求

• Node.js >= 16
• Python >= 3.9

前端安装与运行

cd frontend
npm install
npm run dev

后端安装与运行

cd backend
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate
pip install -r requirements.txt
python run.py

构建部署

# 构建前端
cd frontend
npm run build

# 启动后端（会自动服务前端静态文件）
cd backend
python run.py

功能特性

核心功能

• ✅ 文章发布与管理
• ✅ 分类与标签系统
• ✅ Markdown 编辑器
• ✅ 图片上传与优化
• ✅ 深色/浅色主题切换
• ✅ 响应式设计

高级特性

• ✅ 文件管理系统（自动备份、清理）
• ✅ 内存优化（LRU缓存、内存监控）
• ✅ 定时任务（归档清理、孤立文件清理）
• ✅ 性能监控 API

环境变量配置

复制 backend/.env.example 为 backend/.env 并配置：

SECRET_KEY=your-secret-key-here
DATABASE_URL=sqlite+aiosqlite:///./blog.db

监控接口

管理员可访问以下监控接口：

• GET /api/monitoring/memory - 内存使用统计
• GET /api/monitoring/cache - 缓存统计信息
• GET /api/monitoring/system/health - 系统健康状态