PYTHON 程序设计 · V2 · 第 13 周（100 分钟 · L27–L30）

把 AI 能力
变成别人能用的网页

命令行里的程序怎么分享？发一个 .py 让人 python main.py？—— Web 服务把你的代码变成一个 URL。本周：FastAPI 后端 → 前端聊天页 → 对话记忆 → AI 结对开发方法论。M5 收官。

所属模块 M5（收官）← → 翻页 · F 全屏

今日课表（100 分钟）

时间	环节	要点
0–10	FastAPI 六行	路由=URL 与函数绑定；Pydantic 模型自动校验；/docs 自动文档
10–22	三种参数	路径/查询/请求体；async def——等 LLM 不阻塞
22–34	封装 /chat	把 llm_chat 包成 POST 服务；health 检查端点
34–46	前端最小集	HTML 三件套 + fetch + async/await；DOM 渲染回复
46–58	联调三坑	CORS / 字段名 / 类型转换——各给排查口诀
58–70	动手练习	运行场：SessionManager 会话隔离 + 超限摘要 + clear
70–80	对话记忆	API 无状态——记忆是你传的 messages；Token 预算与摘要压缩
80–92	五步方法论	需求拆解→架构→增量生成→每步验证→调试；四条结对原则；协作日志
92–100	M5 收官	零件集齐；下周项目启动

M5 收官：llm_chat + /chat + 前端页 + 记忆 = 完整 AI 应用的全部零件。

FastAPI：六行代码一个服务

from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()

class ChatRequest(BaseModel):        # 请求体结构（自动校验）
    message: str

@app.post("/chat")                    # 路由 = URL 与函数的绑定
async def chat(req: ChatRequest):
    return {"reply": await call_llm(req.message)}

# 启动：uvicorn main:app --reload   然后打开 /docs 看自动文档

核心概念：路由（@app.post）+ Pydantic 模型（类型标注自动生成文档）
三种参数：路径参数 /chat/{id}、查询参数 ?model=x、请求体（POST JSON）
async def：等 LLM 响应时不阻塞，单进程也能服务多个请求

前端最小集：HTML 三件套 + fetch

<div id="msgs"></div>  <input id="inp">  <button onclick="send()">发送</button>

async function send() {                 // 和 Python 的 async/await 概念相同
  const r = await fetch("/chat", {
    method: "POST",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify({message: inp.value})
  });
  const data = await r.json();
  msgs.innerHTML += `<p>AI: ${data.reply}</p>`;  // DOM 操作显示回复
}

HTML 搭骨架、CSS 穿衣服、JS 做交互——前端 UI 是 AI 最擅长的领域，给接口定义就能生成
前后端数据流：前端发请求 → 后端调 LLM → 返回 JSON → 前端渲染

前后端联调三大坑

① CORS 报错 浏览器跨域安全机制——在后端加 CORSMiddleware 明确 allow_origins，不是绕开机制。

② 字段不匹配 后端返回 reply，前端读 answer → undefined。对着接口文档逐字核对。

③ 类型转换 JSON 里的数字到了前端是 string——该 Number() 的地方别偷懒。

对话记忆：AI 为什么「失忆」

「我叫张三」

→

AI：（记不住）

→

「我叫什么？」

→

「我不知道」

因为大模型 API 是无状态的——每次调用互相独立。「记忆」是你在 messages 列表里维护的：每次请求把历史一起传过去。

会话隔离：不同用户各自独立的 messages（按 session_id 存字典）
Token 预算：历史超限会报错——把旧消息摘要压缩成一条 system 消息

动手：会话管理器（记忆 + 清空）

交互 · 浏览器内运行（L29 课堂主线简化版）

vibe coding 五步开发流程（L30）

①需求拆解
做什么

→

②架构设计
怎么拆

→

③增量生成
一步步做

→

④每步验证
能跑再往下

→

⑤调试修复

四条结对原则

Prompt 拆解：一次一个模块，不甩整个项目
大改前先 commit
每步验证：写完马上跑
不懂的代码不放过

AI 协作日志 记录：关键 prompt、AI 输出的问题、人工修改及原因——期末项目的强制交付物，也是你自己最好的复盘材料。

随堂小测（3 题）

交互 · 点击选项作答

课后与项目周预告

本周课后

练习：把 llm_chat() 包成 POST /chat，配一个能聊天的前端页

下周：W14 期末项目启动 分组选题 → 需求与 MVP → 架构设计 → 冲刺一（后端 + AI 核心）。你已经集齐了全部零件——去组装自己的应用。提前看项目周课件 →

深入阅读：M5 模块页 · FastAPI 实战 · 实战续

把 AI 能力变成别人能用的网页