python fastapi 前后端数据交互
时间: 2025-05-27 18:34:03 浏览: 62
### 如何在Python FastAPI中实现前后端的数据交互
#### 1. 后端定义接口并返回HTTP状态码
通过`FastAPI`框架可以轻松定义RESTful API接口。例如,在创建资源时可以通过`status_code`参数指定HTTP响应的状态码[^1]。
```python
from fastapi import FastAPI, HTTPException
from pydantic import BaseModel
from typing import List
app = FastAPI()
class Item(BaseModel):
name: str
@app.post("/items/", status_code=201)
async def create_item(item: Item):
return {"name": item.name}
```
以上代码展示了如何通过POST请求向服务器发送数据,并返回成功创建的HTTP状态码`201 Created`[^1]。
---
#### 2. 定义CRUD操作以支持更复杂的数据交互
为了展示完整的前后端交互流程,下面是一个简单的任务管理系统的后端逻辑示例[^3]:
```python
# 导入必要的模块
from fastapi import FastAPI, HTTPException
from pydantic import BaseModel
from typing import List
app = FastAPI()
tasks_db = []
task_id_counter = 1
# 数据模型定义
class TaskBase(BaseModel):
title: str
class Task(TaskBase):
id: int
status: str = "待完成"
class TaskResponse(BaseModel):
tasks: List[Task]
# 获取所有任务
@app.get("/api/tasks", response_model=TaskResponse)
async def get_tasks():
return TaskResponse(tasks=tasks_db)
# 创建新任务
@app.post("/api/tasks", response_model=Task)
async def create_task(task_create: TaskBase):
global task_id_counter
new_task = Task(id=task_id_counter, title=task_create.title)
tasks_db.append(new_task)
task_id_counter += 1
return new_task
```
此部分实现了GET和POST两种方法,分别用于获取任务列表以及新增任务[^3]。
---
#### 3. 前端调用后端API
前端通常会使用JavaScript库(如Axios或Fetch)发起异步请求到后端API。以下是一个基于HTML和JavaScript的例子[^2]:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Frontend Example</title>
</head>
<body>
<h1>任务管理系统</h1>
<!-- 输入框 -->
<input type="text" id="taskTitleInput" placeholder="输入任务名称..." />
<button onclick="createTask()">添加任务</button>
<!-- 显示区域 -->
<ul id="taskList"></ul>
<script>
// 添加任务函数
function createTask() {
const inputElement = document.getElementById('taskTitleInput');
const title = inputElement.value;
fetch('/api/tasks', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ title })
}).then(response => response.json())
.then(data => refreshTasks());
inputElement.value = ''; // 清空输入框
}
// 更新任务列表显示
function refreshTasks() {
fetch('/api/tasks')
.then(response => response.json())
.then(data => {
const ul = document.getElementById('taskList');
ul.innerHTML = '';
data.tasks.forEach(task => {
const li = document.createElement('li');
li.textContent = `${task.id}: ${task.title} (${task.status})`;
ul.appendChild(li);
});
});
}
// 页面加载完成后刷新任务列表
window.onload = () => refreshTasks();
</script>
</body>
</html>
```
这段代码演示了如何从前端界面收集用户输入并通过AJAX请求将其提交给后端服务[^2]。
---
### 总结
上述内容涵盖了从后端API设计到前端页面开发的整体过程。后端负责处理业务逻辑并与数据库交互,而前端则专注于用户体验并将用户的动作转化为网络请求传送给后端。
---
阅读全文
相关推荐


















