FastAPI+VUE3创建一个项目的步骤模板(一)

先不细究功能细节，先把项目跑起来

一篇文章最多5606个字，因此同样分多P来记录

为fastapi准备环境

Bash 复制代码

# 1. 创建项目文件夹
mkdir fastvue-todo
cd fastvue-todo

# 2. 创建并激活虚拟环境 (推荐)
python -m venv venv
# Windows:
# venv\Scripts\activate
# Linux/macOS:
source venv/bin/activate

# 3. 安装必要的库
# fastapi: 核心框架
# uvicorn: ASGI 服务器，用于运行应用
# pydantic: FastAPI 用它来进行数据验证和序列化 (用于定义你的 Task 模型)
# python-multipart: 用于处理表单数据，尽管我们主要用 JSON，但装上无妨
pip install fastapi uvicorn pydantic python-multipart
# ❗ 我们还需要安装 CORS 库，用于让前端可以访问后端
pip install python-multipart "uvicorn[standard]" fastapi

建立fastapi文件

在 fastvue-todo 目录下创建一个文件 main.py，并输入以下代码：

python 复制代码

# main.py

from fastapi import FastAPI
from pydantic import BaseModel
from typing import List, Optional
from fastapi.middleware.cors import CORSMiddleware # 导入 CORS

# --------------------------
# 1. Pydantic 模型定义
# --------------------------
# 它定义了任务的数据结构，与你刚才确定的字段一致
class Task(BaseModel):
    id: int # 唯一标识
    title: str # 任务内容/描述
    is_completed: bool = False # 状态，默认未完成

# --------------------------
# 2. FastAPI 初始化
# --------------------------
app = FastAPI()

# --------------------------
# 3. 配置 CORS
# --------------------------
# 这允许在不同端口运行的前端 (Vue 3) 访问这个后端 (FastAPI)。
# ⚠️ 注意: 在实际生产环境中，你应该将 "*" 替换为你的前端域名，例如: ["http://localhost:5173"]
origins = [
    "http://localhost",
    "http://localhost:8000",
    "http://localhost:5173", # Vue 3/Vite 默认端口
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins, # 允许的来源列表
    allow_credentials=True, # 允许 Cookie/认证信息
    allow_methods=["*"], # 允许所有 HTTP 方法 (GET, POST, PUT, DELETE)
    allow_headers=["*"], # 允许所有 HTTP 头
)

# --------------------------
# 4. 简单的数据存储 (内存中)
# --------------------------
# 生产环境应该使用数据库，这里为了快速启动，我们使用一个列表来模拟存储
tasks_db: List[Task] = [
    Task(id=1, title="学习 FastAPI", is_completed=False),
    Task(id=2, title="搭建 Vue 3 前端", is_completed=True),
]
next_id = 3 # 用于分配下一个任务 ID

# --------------------------
# 5. API 路由定义 (CRUD)
# --------------------------

# GET /tasks: 读取所有任务 (R - Read All)
@app.get("/tasks", response_model=List[Task])
def read_tasks():
    return tasks_db

# POST /tasks: 创建新任务 (C - Create)
@app.post("/tasks", response_model=Task)
def create_task(task: Task):
    global next_id
    task.id = next_id
    next_id += 1
    tasks_db.append(task)
    return task

# PUT /tasks/{task_id}: 更新任务状态 (U - Update)
@app.put("/tasks/{task_id}", response_model=Task)
def update_task(task_id: int, task: Task):
    # 查找任务
    for i, t in enumerate(tasks_db):
        if t.id == task_id:
            tasks_db[i] = task # 替换整个任务对象
            return task
    # 如果没找到，FastAPI 默认会返回 404
    from fastapi import HTTPException
    raise HTTPException(status_code=404, detail="Task not found")

# DELETE /tasks/{task_id}: 删除任务 (D - Delete)
@app.delete("/tasks/{task_id}")
def delete_task(task_id: int):
    global tasks_db
    initial_len = len(tasks_db)
    # 使用列表推导式删除任务
    tasks_db = [t for t in tasks_db if t.id != task_id]
    
    if len(tasks_db) == initial_len:
        from fastapi import HTTPException
        raise HTTPException(status_code=404, detail="Task not found")
    
    return {"message": "Task deleted successfully"}

运行后端(fastapi)

在命令行中，确保你在 fastvue-todo 目录下，并执行：

复制代码

uvicorn main:app --reload
这里的main是指文件名main.py  是将其映射为app
现在你的 FastAPI 后端应该已经在运行了，默认地址是 http://127.0.0.1:8000。

测试运行起来的API接口

FastAPI 的一个巨大优势是它基于 OpenAPI (Swagger) 规范自动生成交互式文档。这使得测试接口变得非常简单，无需额外工具。

访问 API 文档

请确保后端仍在运行中（如果在命令行中运行了 uvicorn main:app --reload，它应该一直运行着）。

打开浏览器，访问以下地址：
$http://127.0.0.1:8000/docs\](http://127.0.0.1:8000/docs)\\text{\[http://127.0.0.1:8000/docs\](http://127.0.0.1:8000/docs)}\[http://127.0.0.1:8000/docs\](http://127.0.0.1:8000/docs)$
测试 CRUD 操作

A. 读取所有任务 (R - Read All)

接口: GET /tasks
操作:
1. 点击 /tasks 旁边的 GET 标签，展开它。
2. 点击右侧的 "Try it out" 按钮。
3. 点击 "Execute" 按钮。

预期结果:
在 Response body 中，你应该会看到一个包含我们初始定义的两个任务的 JSON 数组：

json 复制代码

[
  {
    "id": 1,
    "title": "学习 FastAPI",
    "is_completed": false
  },
  {
    "id": 2,
    "title": "搭建 Vue 3 前端",
    "is_completed": true
  }
]

B. 创建新任务 (C - Create)

接口: POST /tasks
操作:
1. 点击 /tasks 旁边的 POST 标签，展开它。
2. 点击 "Try it out" 按钮。
3. 在 Request body 区域，修改 JSON 内容（id 字段可以省略或设置为任意值，因为后端会分配新的 ID）：
  json 复制代码
```
{
  "title": "连接前端和后端",
  "is_completed": false
}
```
4. 点击 "Execute" 按钮。
预期结果:
在 Response body 中，你会看到新创建的任务对象，其中 id 应该被分配为 3 ：
json 复制代码
```
{
  "id": 3,
  "title": "连接前端和后端",
  "is_completed": false
}
```

C. 更新任务状态 (U - Update)

接口: PUT /tasks/{task_id}
操作: 我们来将 ID 为 3 的新任务标记为已完成。
1. 点击 /tasks/{task_id} 旁边的 PUT 标签，展开它。
2. 点击 "Try it out" 按钮。
3. 在 task_id 路径参数中输入 3。
4. 在 Request body 区域，输入完整的任务对象（确保包含 ID）：
  json 复制代码
```
{
  "id": 3,
  "title": "连接前端和后端",
  "is_completed": true 
}
```
5. 点击 "Execute" 按钮。
预期结果:
在 Response body 中，你会看到任务 3 的 is_completed 字段变成了 true。

Vue的创建

bash 复制代码

# 1. 退出当前的fastvue-todo目录，回到父级目录
cd ..

# 2. 使用 npm (Node Package Manager) 初始化一个 Vue 项目
# 如果你没有安装 Node.js/npm，请先安装。
npm create vue@latest

# 提示: 遇到提示时，输入以下选项
# Project name: (输入) vue-frontend
# Add TypeScript? (输入) No
# Add JSX Support? (输入) No
# Add Vue Router? (输入) No
# Add Pinia? (输入) No
# Add Vitest? (输入) No
# Add Cypress? (输入) No
# Add ESLint? (输入) No

# 3. 进入新的前端目录
cd vue-frontend

# 4. 安装依赖
npm install

# 5. 运行开发服务器
npm run dev