|
| 1 | +# 全栈 FastAPI 模板项目 |
| 2 | + |
| 3 | +<a href="https://github.com/fastapi/full-stack-fastapi-template/actions?query=workflow%3ATest" target="_blank"><img src="https://github.com/fastapi/full-stack-fastapi-template/workflows/Test/badge.svg" alt="Test"></a> |
| 4 | +<a href="https://coverage-badge.samuelcolvin.workers.dev/redirect/fastapi/full-stack-fastapi-template" target="_blank"><img src="https://coverage-badge.samuelcolvin.workers.dev/fastapi/full-stack-fastapi-template.svg" alt="Coverage"></a> |
| 5 | + |
| 6 | +## 项目简介 |
| 7 | + |
| 8 | +本项目是一个基于 FastAPI + React 的全栈开发模板,前后端分离,支持本地开发与生产部署,适合快速搭建中大型管理系统、SaaS 平台等。 |
| 9 | + |
| 10 | +## 技术栈 |
| 11 | + |
| 12 | +- ⚡ **后端**:FastAPI、SQLModel、Pydantic、PostgreSQL |
| 13 | +- 🚀 **前端**:React、TypeScript、Vite、Chakra UI |
| 14 | +- 🧪 **测试**:Pytest、Playwright |
| 15 | +- 🐋 **容器化**:Docker Compose 支持 |
| 16 | +- 🔒 JWT 认证、邮箱找回密码、超级用户权限 |
| 17 | +- 📚 自动生成的 API 文档(Swagger UI) |
| 18 | +- 🌑 支持暗黑模式 |
| 19 | + |
| 20 | +## 功能演示 |
| 21 | + |
| 22 | +### 登录页 |
| 23 | + |
| 24 | + |
| 25 | + |
| 26 | +### 后台管理 |
| 27 | + |
| 28 | + |
| 29 | + |
| 30 | +### 创建用户 |
| 31 | + |
| 32 | + |
| 33 | + |
| 34 | +### 数据项管理 |
| 35 | + |
| 36 | + |
| 37 | + |
| 38 | +### 用户设置 |
| 39 | + |
| 40 | + |
| 41 | + |
| 42 | +### 暗黑模式 |
| 43 | + |
| 44 | + |
| 45 | + |
| 46 | +### API 文档 |
| 47 | + |
| 48 | + |
| 49 | + |
| 50 | +--- |
| 51 | + |
| 52 | +## 本地运行与开发 |
| 53 | + |
| 54 | +### 1. 安装依赖 |
| 55 | + |
| 56 | +分别进入 backend 和 frontend 目录安装依赖: |
| 57 | + |
| 58 | +```bash |
| 59 | +# 后端依赖(在 backend 目录) |
| 60 | +uv sync |
| 61 | + |
| 62 | +# 前端依赖(在 frontend 目录) |
| 63 | +npm install |
| 64 | +``` |
| 65 | + |
| 66 | +### 2. 配置环境变量 |
| 67 | + |
| 68 | +复制根目录下的 `.env` 文件,根据实际情况填写数据库、超级用户、密钥等信息,例如: |
| 69 | + |
| 70 | +```env |
| 71 | + |
| 72 | +FIRST_SUPERUSER_PASSWORD=123456 |
| 73 | +POSTGRES_SERVER=localhost |
| 74 | +POSTGRES_PORT=5432 |
| 75 | +POSTGRES_DB=fastapi(数据库名称) |
| 76 | +POSTGRES_USER=postgres(数据库用户名) |
| 77 | +POSTGRES_PASSWORD=123456(数据库密码) |
| 78 | +``` |
| 79 | + |
| 80 | +### 3. 初始化数据库 |
| 81 | + |
| 82 | +如使用 Alembic 迁移工具,需先初始化数据库表结构: |
| 83 | + |
| 84 | +```bash |
| 85 | +# 激活虚拟环境(在 backend 目录) |
| 86 | +.venv\Scripts\activate |
| 87 | +# 执行数据库迁移 |
| 88 | +alembic upgrade head |
| 89 | +``` |
| 90 | + |
| 91 | +### 4. 启动后端服务 |
| 92 | + |
| 93 | +```bash |
| 94 | +# 激活虚拟环境(如未激活) |
| 95 | +.venv\Scripts\activate |
| 96 | +# 启动 FastAPI 后端 |
| 97 | +uvicorn app.main:app --reload |
| 98 | +``` |
| 99 | + |
| 100 | +后端默认监听 http://localhost:8000 |
| 101 | + |
| 102 | +### 5. 启动前端服务 |
| 103 | + |
| 104 | +```bash |
| 105 | +# 在 frontend 目录下 |
| 106 | +npm run dev |
| 107 | +``` |
| 108 | + |
| 109 | +前端默认监听 http://localhost:5173 |
| 110 | + |
| 111 | +### 6. 访问项目 |
| 112 | + |
| 113 | +- API 文档: [http://localhost:8000/docs](http://localhost:8000/docs) |
| 114 | +- 前端页面: [http://localhost:5173](http://localhost:5173) |
| 115 | + |
| 116 | +--- |
| 117 | + |
| 118 | +## 常见问题 FAQ |
| 119 | + |
| 120 | +**Q: 注册/登录时报 500 错误?** |
| 121 | +- 检查 .env 文件格式,不能有命令行,只能有 KEY=VALUE 格式的环境变量。 |
| 122 | +- 确认数据库已初始化(执行 alembic upgrade head)。 |
| 123 | +- 检查数据库连接信息与账号密码。 |
| 124 | + |
| 125 | +**Q: 前端页面无法访问后端 API?** |
| 126 | +- 检查 .env 中的 BACKEND_CORS_ORIGINS 配置,确保包含前端地址。 |
| 127 | +- 检查后端服务是否在 8000 端口正常运行。 |
| 128 | + |
| 129 | +**Q: 如何生成 SECRET_KEY?** |
| 130 | +```bash |
| 131 | +python -c "import secrets; print(secrets.token_urlsafe(32))" |
| 132 | +``` |
| 133 | + |
| 134 | +--- |
| 135 | + |
| 136 | +## License |
| 137 | + |
| 138 | +本项目基于 MIT 协议开源。 |
0 commit comments