# Vue3 + FastAPI 后台管理系统实战教程
## 环境要求
- Node.js >= 18
- Python >= 3.10
## 项目初始化
### 1. 创建项目目录
```bash
mkdir admin-frontend admin-backend
```
### 2. 前端安装 (Vue3 + TypeScript + Vite)
```bash
cd admin-frontend
npm create vite@latest . -- --template vue-ts
npm install
```
### 3. 后端安装 (FastAPI)
创建 requirements.txt:
```txt
fastapi==0.115.6
uvicorn[standard]==0.34.0
pydantic==2.10.4
python-multipart==0.0.20
python-jose[cryptography]==3.3.0
passlib[bcrypt]==1.7.4
sqlalchemy==2.0.37
```
安装依赖:
```bash
cd admin-backend
python -m venv venv
venv\Scripts\activate # Windows
pip install -r requirements.txt
```
## 快速启动
| | 命令 | 访问地址 |
|---|---|---|
| 前端 | cd admin-frontend && npm run dev | http://localhost:5173 |
| 后端 | cd admin-backend && venv\Scripts\activate && uvicorn main:app --reload | http://localhost:8000/docs |
## 技术栈
前端: Vue 3 + TypeScript + Vite + Pinia + Vue Router
后端: FastAPI + SQLAlchemy + Pydantic + JWT
---
## 服务器部署
### 生产环境组件
| 组件 | 开发 | 生产 | 推荐 |
|------|------|------|------|
| 数据库 | SQLite | MySQL/PostgreSQL | MySQL 8.0 |
| 应用服务器 | Uvicorn | Gunicorn + Uvicorn | Gunicorn |
| Web服务器 | - | Nginx | Nginx |
| SSL | - | Let's Encrypt | Certbot |
| 进程管理 | 手动 | systemd | systemd |
### 服务器安装 (Ubuntu)
```bash
# 1. MySQL 数据库
sudo apt install mysql-server
sudo mysql_secure_installation
# 2. Nginx
sudo apt install nginx
# 3. SSL 证书
sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d yourdomain.com
# 4. 防火墙
sudo ufw allow 22 # SSH
sudo ufw allow 80 # HTTP
sudo ufw allow 443 # HTTPS
sudo ufw enable
```
### 部署架构
```text
用户 → Nginx (443) → 前端静态文件
→ /api → FastAPI (8000) → MySQL
```
### systemd 配置
/etc/systemd/system/fastapi.service:
```ini
[Unit]
Description=FastAPI App
After=network.target
[Service]
User=www-data
WorkingDirectory=/var/www/admin-backend
Environment="PATH=/var/www/admin-backend/venv/bin"
ExecStart=/var/www/admin-backend/venv/bin/gunicorn -k uvicorn.workers.UvicornWorker main:app --bind 0.0.0.0:8000
[Install]
WantedBy=multi-user.target
```
```bash
sudo systemctl daemon-reload
sudo systemctl enable fastapi
sudo systemctl start fastapi
```
---
持续更新中...Vue3 + FastAPI 后台管理系统
_