fastapi_vuejs_simple 启动指南（FastAPI + Vue）

本项目包含后端（FastAPI + SQLModel）与前端（Vue 3 + Vite）。按下面步骤即可本地运行与开发。

---

环境要求

• Python 3.10/3.11（建议使用虚拟环境）
• Node.js ≥ 18（建议 LTS 版本）
• MySQL（如使用 MySQL；也可改为本地 SQLite 便于快速体验）

---

后端启动（FastAPI）

目录：fastapi_vuejs_simple/app

1. 安装依赖（示例，无 requirements.txt 时可直接安装）

cd fastapi_vuejs_simple/app
python -m venv .venv
. .venv/Scripts/Activate.ps1
pip install fastapi[standard] sqlmodel pymysql python-dotenv uvicorn

2. 配置数据库连接

• 编辑 fastapi_vuejs_simple/app/.env:1，设置 DATABASE_URL
  • MySQL 示例：mysql+pymysql://user:password@localhost:3306/herodb?charset=utf8mb4
  • SQLite 快速体验：sqlite:///./app.db

3. 运行后端（启动即自动创建缺失表）

uvicorn api:app --reload --port 8000

• 参见入口文件：01-fastapi-vuejs-crud/app/api.py:1
• 打开接口文档验证：http://127.0.0.1:8000/docs

---

前端启动（Vue + Vite）

目录：fastapi_vuejs_simple/frontend

1. 配置后端地址

• 编辑或创建 fastapi_vuejs_simple/frontend/.env:1

VITE_API_BASE=http://127.0.0.1:8000

2. 安装依赖并启动

cd fastapi_vuejs_simple/frontend
npm install
npm run dev

• 默认开发地址：http://127.0.0.1:5173
• 关键调用封装：fastapi_vuejs_simple/frontend/src/api.ts:1
• 入口页面：fastapi_vuejs_simple/frontend/src/App.vue:1

---

生产构建与预览（前端）

cd fastapi_vuejs_simple/frontend
npm run build
npm run preview

• 打包产物目录：fastapi_vuejs_simple/frontend/dist

---

常见问题

• 无法连接后端：
  • 确认后端 http://127.0.0.1:8000/docs 可访问
  • 确认前端 .env 的 VITE_API_BASE 与后端一致，修改后需重启 npm run dev
• CORS 错误：
  • 后端已启用 CORS（01-fastapi-vuejs-crud/app/api.py:17），如有自定义域名，请在后端允许该来源
• 数据库错误（500）：
  • 确认 app/.env 中 DATABASE_URL 正确
  • 使用 MySQL 时先创建数据库：CREATE DATABASE herodb DEFAULT CHARACTER SET utf8mb4;
  • 快速体验可暂时用 SQLite：sqlite:///./app.db

---

结构参考

fastapi_vuejs_simple/
├─ app/                      # 后端
│  ├─ api.py                 # FastAPI 入口，注册路由与 CORS（启动建表）
│  ├─ database.py            # Engine/Session 与建表方法
│  ├─ models.py              # SQLModel 表模型
│  ├─ schemas.py             # API 请求/响应模式
│  ├─ crud.py                # 业务逻辑（数据库读写）
│  └─ .env                   # DATABASE_URL
└─ frontend/                 # 前端
   ├─ src/
   │  ├─ api.ts             # 后端 API 调用封装（使用 VITE_API_BASE）
   │  ├─ App.vue            # 页面入口
   │  ├─ components/        # 组件目录（HeroCard/HeroModal 等）
   │  └─ main.ts            # 启动入口
   └─ .env                  # VITE_API_BASE（前端后端地址）