FastAPI+VUE3创建一个项目的步骤模板(一)-编程实验室

先不细究功能细节，先把项目跑起来
一篇文章最多5606个字，因此同样分多P来记录

为fastapi准备环境

# 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，并输入以下代码：

# main.pyfromfastapiimportFastAPIfrompydanticimportBaseModelfromtypingimportList,Optionalfromfastapi.middleware.corsimportCORSMiddleware# 导入 CORS# --------------------------# 1. Pydantic 模型定义# --------------------------# 它定义了任务的数据结构，与你刚才确定的字段一致classTask(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])defread_tasks():returntasks_db# POST /tasks: 创建新任务 (C - Create)@app.post("/tasks",response_model=Task)defcreate_task(task:Task):globalnext_id task.id=next_id next_id+=1tasks_db.append(task)returntask# PUT /tasks/{task_id}: 更新任务状态 (U - Update)@app.put("/tasks/{task_id}",response_model=Task)defupdate_task(task_id:int,task:Task):# 查找任务fori,tinenumerate(tasks_db):ift.id==task_id:tasks_db[i]=task# 替换整个任务对象returntask# 如果没找到，FastAPI 默认会返回 404fromfastapiimportHTTPExceptionraiseHTTPException(status_code=404,detail="Task not found")# DELETE /tasks/{task_id}: 删除任务 (D - Delete)@app.delete("/tasks/{task_id}")defdelete_task(task_id:int):globaltasks_db initial_len=len(tasks_db)# 使用列表推导式删除任务tasks_db=[tfortintasks_dbift.id!=task_id]iflen(tasks_db)==initial_len:fromfastapiimportHTTPExceptionraiseHTTPException(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)规范自动生成交互式文档。这使得测试接口变得非常简单，无需额外工具。

1. 访问 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)

将看到一个名为“Swagger UI”的界面，列出了刚才定义的所有 API 接口。

2. 测试 CRUD 操作

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

接口:GET /tasks
操作:
1. 点击/tasks旁边的GET标签，展开它。
2. 点击右侧的“Try it out”按钮。
3. 点击“Execute”按钮。
预期结果:
在Response body中，你应该会看到一个包含我们初始定义的两个任务的 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）：
```
{"title":"连接前端和后端","is_completed":false}
```
4. 点击“Execute”按钮。
预期结果:
在Response body中，你会看到新创建的任务对象，其中id应该被分配为3：
```
{"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）：
```
{"id":3,"title":"连接前端和后端","is_completed":true}
```
5. 点击“Execute”按钮。
预期结果:
在Response body中，你会看到任务 3 的is_completed字段变成了true。

Vue的创建

# 1. 退出当前的fastvue-todo目录，回到父级目录cd..# 2. 使用 npm (Node Package Manager) 初始化一个 Vue 项目# 如果你没有安装 Node.js/npm，请先安装。npmcreate 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. 进入新的前端目录cdvue-frontend# 4. 安装依赖npminstall# 5. 运行开发服务器npmrun dev