### 使用 FastAPI 创建 Python API 并从前端调用 #### 安装 FastAPI 和 Uvicorn 为了开始使用 FastAPI，需要先安装必要的库。可以通过 pip 来完成这一步骤。 ```bash pip install fastapi uvicorn ``` #### 初始化项目结构 建立清晰的文件夹和文件可以帮助更好地管理代码。通常情况下，会有一个 `main.py` 文件来定义应用程序逻辑以及其它辅助性的模块用于处理不同的功能[^1]。 #### 创建 FastAPI 应用实例 在 `main.py` 中导入 FastAPI 类并创建一个应用对象： ```python from fastapi import FastAPI, HTTPException from pydantic import BaseModel import json app = FastAPI() class Item(BaseModel): name: str description: str | None = None price: float tax: float | None = None @app.post("/items/") async def create_item(item: Item): item_dict = item.dict() if item.tax: price_with_tax = item.price + item.tax item_dict.update({"price_with_tax": price_with_tax}) return {"item": item_dict} @app.get("/") def read_root(): return {"message": "Welcome to the FastAPI demo"} ``` 这段代码展示了如何设置基本路径 `/` 返回欢迎消息，并定义了一个 POST 请求处理器用来接受 JSON 数据作为输入参数[^2]。 #### 启动服务器 要让这个服务跑起来，在终端执行如下命令: ```bash uvicorn main:app --reload ``` 这里的 `--reload` 参数可以让开发者模式下自动重启服务器当检测到源码变化时非常有用[^3]。 #### 自动生成文档 得益于内置的支持，只需访问 http://localhost:8000/docs 或者 http://localhost:8000/redoc 即可看到由 Swagger UI 提供的人机界面版本或是 ReDoc 样式的 API 文档页面。 #### 前端调用方法 对于前端来说，可以利用 JavaScript (比如 Fetch API) 发送 AJAX 请求给上述创建好的 RESTful 接口。下面是一个简单的例子展示怎样发送 GET 请求获取根 URL 的响应数据： ```javascript fetch('http://localhost:8000/') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); ``` 如果想要测试刚才实现的商品提交接口，则可以用类似的方式构造带有 body 的 POST 请求： ```javascript const newItem = { name: 'example', description: 'An example item.', price: 9.99, }; fetch('http://localhost:8000/items/', { method: 'POST', // or 'PUT' headers: {'Content-Type': 'application/json'}, body: JSON.stringify(newItem), }) .then((response) => response.json()) .then((data) => {console.log('Success:', data)}) .catch((error) => {console.error('Error:', error)}); ``` 这样就完成了从零搭建一个简易版的在线商店商品管理系统的过程，并学会了前后端交互的基础方式。