FastApi python, React TS 快速构建AI agent开发
二. FastAPI 用于构建高性能的web API框架和服务器的标准ASGI
fastapi 安装：
uv add "fastapi[standard]"
uv add "uvicorn[standard]"
pip install "fastapi[standard]" standard 安装 FastAPI 核心库外，还要把标准可选依赖一起安装
main.py:
from fastapi import FastAPI
app = FastAPI()
@app.get("/")
async def read_root():
return {"Hello": "World"}
@app.get("/items/{item_id}")
async def read_item(item_id: int, q: str | None = None):
return {"item_id": item_id, "q": q}
运行 FastAPI:
uvicorn main:app --reload
运行fastapi:
uvicorn main:app --port 9099 --reload
uv run fastapi dev main.py = uvicorn main:app --port 8000 --reload
FastAPI 官方 CLI，内部启动 uvicorn 服务器，默认监听 8000 端口，并自动开启 Reload（热部署） 模式（代码改了服务器自动重启）。默认运行在 http://127.0.0.1:8000 ，并自动生成交互式文档
Swagger UI：http://127.0.0.1:8000/docs
ReDoc：http://127.0.0.1:8000/redoc
"https://open.bigmodel.cn/api/mcp/web_search/sse?Authorization=
API:https://doc.livetalking.ai/docs/service/
安装插件：
python(microsoft公司)让编辑器vscode,pycharm自动帮你检查语法错误
ruff(astral公司)让编辑器vscode,pycharm帮你自动格式化代码
忽略临时本地文件： pycache
运行uv run fastapi dev main.py 会生成 pycache
路由：url地址和处理函数之间的映射关系，决定服务器应该执行那段代码
参数：参数的作用是让同一个接口能根据不同的输入参数，返回不同的输出结果，实现接口的动态交互
参数分为:
路径参数/user/{name}，ttp://127.0.0.1:8000/users/6 , id: int = Path(..., gt=0, lt=101, description="用户ID，取值范围1-100"),description="用户ID，取值范围1-100"),
查询参数: ?page=1&size=10 , page: int = Query(default=1, ge=1, description="当前页码，必须大于等于1"),
请求体参数：post.body ,username: str = Field(default="掘金-闲云一鹤", description="用户名")
类型注解：用于给参数添加额外的信息和校验，比如限制 ID 的范围值
@app.get("/users/{id}")
async def get_user(
id: int = Path(..., gt=0, lt=101, description="用户ID，取值范围1-100"),
name: str | None = None,
):
return {"msg": f"这是一个用户接口, id为{id}, 姓名为{name}"}
其中 ... 表示必填，gt 表示值必须大于此值，lt 表示值必须小于此值
https://fastapi.tiangolo.com/zh/reference/parameters/?h=gt#fastapi.Path
http 响应：
JSONResponse(默认）
HTMLResponse
FileResponse
交互过程中可以实时切换avatar形象，适合根据不同场景做不同动作。与动作编排的区别：动作编排只能播放提前录制好的音视频；avatar切换在播放动作时可以让数字人说指定的话。
中间件：是一个在每次请求进入 FastAPI 应用函数前/响应返回给客户端前在 被执行的函数
中间件的作用：是为每个请求添加统一的处理逻辑（记录日志，身份认证，跨域，设置响应头，性能监控等）
依赖注入：
作用：使用依赖注入系统来共享通用逻辑，减少代码重复
依赖项：可重用的组件（函数/类），负责提供某种功能或数据
ORM 工具有：SQLALchemy ORM，Django ORM，Tortoise ORM
excel操作：uv add openpyxl
from openpyxl import Workbook
from openpyxl.drawing.image import Image
wb = Workbook()
ws = wb.active
ws.title = "人员表"
img = Image("img.png") # 加载图片
调整图片尺寸（单位为像素）
img.width = 150
img.height = 100
ws.add_image(img, "A1") # 在指定的单元格位置插入图片
wb.save("sample.xlsx")
=实战===========
https://juejin.cn/post/7160521341861363748
https://juejin.cn/post/7307057492059701275
1.查看当前python的版本：uv run python --version
用uv创建项目:uv init
运行项目： uv run main.py
2.在pyproject.toml配置包镜像源：
[[tool.uv.index]]
url = "https://test.pypi.org/simple"
default = true
[[tool.uv.index]]
name = "aliyun"
url = "https://mirrors.aliyun.com/pypi/simple/"
[[tool.uv.index]]
name = "huaweicloud"
url = "https://mirrors.huaweicloud.com/repository/pypi/simple/"
[[tool.uv.index]]
name = "tuna"
url = "https://pypi.tuna.tsinghua.edu.cn/simple/"
3.安装fastapi:
uv add "fastapi[standard]"
uv add "uvicorn[standard]"
4.实例化fastapi
from fastapi import FastAPI
app = FastAPI()
@app.get("/")
async def read_root():
return {"Hello": "World"}
5.运行fastapi:
运行 FastAPI: uvicorn main:app --reload
运行fastapi: uvicorn main:app --port 9099 --reload
uv run fastapi dev main.py
6.APIRouter 路由选择
user.py:router = APIRouter(prefix="/user",tags=["users api"])
main.py:app.include_router(user.router)
7.数据校验利器 Pydantic (BaseModel):自定义验证规则,快速验证
uv add pydantic 面向接口层，做数据验证、序列化 / 反序列化
uv add SQLAlchemy 面向数据库层，做 Python 对象和数据库表的映射、数据库操作
8.1 路径参数： @router.get('/getuser/{user_id}/{name}') = http://127.0.0.1:8000/user/getuser/1/zhangsan
@router.get('/getuser/{user_id}/{name}')
def get_user_by_id(
user_id: int =Path(...,gt=10,lt=100,title="desc"),
name: str =Path(...,min_length=10,max_length=100,title="desc")):
return { "user_id:"+str(user_id)+",name:"+name}
8.2查询参数：出现在 URL 的问号 ? ****之后 http://127.0.0.1:8000/user/getuser/?skip=1&limit=100
@router.get('/getuser/')
def get_user_by_skip(
skip: int = Query(default=0, ge=0),
limit: int = Query(default=20, ge=1, le=100),
):
return { "message": "get_user_by_skip"}
8.3 body参数：post请求 json格式
9.Depends 依赖
@app.get("/data")
def get_data(db: Database = Depends(get_db)):
return get_all_data(db)
10.FastAPI 自动序列化任何返回的字典 dict 。对于更复杂和结构化的数据，使用 Pydantic
11.响应模块
12.连接 MySQL 数据库：
mysql-connector-python 正式生产环境，追求性能和官方支持，使用 MySQL 8.0+ 新特性
pymysql
12.2 sqlalchemy 连接 MySQL 数据库操作数据库
uv add sqlalchemy
- result 返回结果定义：code,msg,data
class ResultResponse:
@staticmethod
def success(data: Any = None, msg: str = "success", code: int = 200) -> JSONResponse:
"""成功响应"""
return JSONResponse(
status_code=status.HTTP_200_OK,
content={
"code": code,
"msg": msg,
"data": data
}
)
@staticmethod
def error(msg: str = "error", code: int = 400, data: Any = None) -> JSONResponse:
"""错误响应"""
return JSONResponse(
status_code=status.HTTP_400_BAD_REQUEST,
content={
"code": code,
"msg": msg,
"data": data
}
)
14.result data 返回值有字段
Pydantic model_validate 类型安全、自动校验 需要定义 Schema
jsonable_encoder 简单、内置 无法控制字段
手动 orm_to_dict 灵活可控 每个模型都要写
response_model 最省心 必须配合路由装饰器
15.前端调用后端接口，要区分传入的参数是query参数还是body json参数
16.llm
Ollama
下载ollama,安装
vscode 执行命名：ollama run deepseek-r1:1.5b
pip install langchain-ollama==0.3.3
agent；
1.uv tool install langgraph-cli
2.langgraph new demo-agent --template new-langgraph-project-python
https://github.com/langchain-ai/new-langgraph-project/archive/refs/heads/main.zip
3.cd demo-agent
4.langgraph dev
app/state
/tools
/nodes
/graphs
/config
.env.development
.env.production
----------------------------------react ts -------------------------------
npx creat-react-app react-basic
npm run start
JSX:在js中编写HTML,js表达式，列表渲染，list.map(),函数，
组件：首字母大写的函数
useState 状态变量:是一个react hook函数 ：setCount(),setForm()
css样式:className="foo"
list.filter(item=>item.userid !==userid)
babeljs.io
ant design:蚂蚁PC组件库
npm install antd --save
import {Button} from antd
router包,页面路由组件
npm -i react-router-dom
@提示符路径：webpack别名 craco
vscode别名jsconfig.json
Form
npm i axios
根域名配置
超时时间
请求拦截器/响应拦截器
redux 管理token
token持久化： redux + localstorage
初始化token:
打包发表
npm run build
本地测试
npm install -g serve
serve -s build
路由懒加载：按需加载：lazy,suspense
包体积分析:source-map-explorer
包优化：CDN 就近访问
使用vite创建项目 react + ts 项目：
npm create vite@latest my-react-app -- --template react-ts
npm i
npm run dev
----------------------------fastapi python ---------------
FastApi python web框架
uvicorn main:app reload
source .venv/bin/activate 进入创建好的虚拟环境
deactivate 退出当前虚拟环境
python --version
pip install --upgrade pip 升级pip
pip install fastapi[all]==0.111.0
pip install -r requirements.txt
fastapi --version
运行fastapi:
uvicorn main:app --port 9099 --reload
from pydantic import BaseModel
Field
FASTAPI内置响应类型：
JSONResponse 默认返回json数据 {“key":"value"}
HTMResponse
PlainTextResponse
FileResponse
StreamingResponse
RedirectResponse
from pydantic import BaseModel
class News(BaseMode):
id: int
title: str
content:str
@app.get("/news/{id}",response_model=News)
async def get_news(id: int):
return {
"id": id,
"title”:f"这是第{id}本书”，
"content”:"这是一本好书”
}
@app.get("/html", response_class=HTMLResponse]
async def get_html():
return "
这是标题
"@app.get("/file")
async def get_file():
file_path = "./files/1.jpeg"
return FileResponse(file_path)
HTTPException:
@app.get("/news/{idl")
async def get_news(id: int):id_list = [1, 2, 3, 4, 5, 6]if id not in id_list:
raise HTTPException(status_code=404，detail="您查找的新闻不存在)
return {"id": id}
orm: sqlalchemy,aiomysql
浙公网安备 33010602011771号