从零开始:前端转型 AI Agent 直到就业——第十八天
1. 今日目标今天是前端转型 AI Agent 的第十八天。经过前十七天的学习我们已经掌握了 Python 基础、LangChain 核心概念、Agent 工作流设计等关键知识。今天的目标是打通从本地 Agent 原型到可部署服务的最后一公里完成一个能对外提供 API 服务的 Agent 应用并理解部署上线的基本流程。2. 回顾与定位在开始今天的内容之前先快速回顾一下前十七天的学习路径第 1-5 天Python 语法、虚拟环境、依赖管理完成前端思维到后端思维的初步转换第 6-10 天LangChain 基础、Prompt 工程、模型调用封装第 11-15 天Agent 核心机制ReAct、Tool Calling、记忆管理、多工具编排第 16-17 天构建了一个本地可运行的 Agent 原型具备联网搜索和简单问答能力今天我们要做的就是把第 17 天完成的本地原型改造成一个可以通过 HTTP 接口访问的服务。3. 为什么需要服务化本地脚本和线上服务之间隔着几个关键差异并发处理本地脚本一次只能服务一个请求线上服务需要同时处理多个用户请求接口标准化前端调用后端需要统一的 RESTful API 或 WebSocket 协议状态管理Agent 的多轮对话需要会话隔离不同用户不能互相干扰可观测性线上环境需要日志、监控、错误追踪而不是简单的 print作为前端开发者我们对 HTTP 协议、JSON 序列化、异步请求这些概念并不陌生这恰恰是服务化改造中最大的优势。4. 技术选型我们选择FastAPI作为 Web 框架原因如下性能优秀基于 Starlette 和 Pydantic异步原生支持上手简单对前端开发者友好装饰器风格类似 Express自动文档内置 Swagger UI调试方便类型提示与 Python 类型系统完美结合减少运行时错误安装依赖pipinstallfastapi uvicorn5. 改造本地 Agent 为 API 服务5.1 项目结构调整将原来的单文件脚本拆分为清晰的项目结构agent-service/ ├── app/ │ ├── __init__.py │ ├── main.py # FastAPI 入口 │ ├── agent.py # Agent 核心逻辑 │ ├── schemas.py # 请求/响应模型 │ └── session.py # 会话管理 ├── requirements.txt └── .env5.2 定义请求与响应模型# app/schemas.pyfrompydanticimportBaseModelfromtypingimportOptionalclassChatRequest(BaseModel):message:strsession_id:Optional[str]NoneclassChatResponse(BaseModel):reply:strsession_id:strusage:Optional[dict]None5.3 封装 Agent 调用# app/agent.pyfromlangchain.agentsimportAgentExecutorfromlangchain.memoryimportConversationBufferMemoryclassAgentService:def__init__(self):self.memory_map{}self.agentself._build_agent()def_build_agent(self):# 复用第 17 天构建的 Agent 逻辑# 这里省略具体实现保持与之前一致passdefchat(self,message:str,session_id:str)-str:ifsession_idnotinself.memory_map:self.memory_map[session_id]ConversationBufferMemory()# 调用 Agent 并返回结果returnself.agent.invoke({input:message})5.4 创建 FastAPI 入口# app/main.pyfromfastapiimportFastAPIfromapp.schemasimportChatRequest,ChatResponsefromapp.agentimportAgentServiceimportuuid appFastAPI(titleAI Agent Service)agent_serviceAgentService()app.post(/chat,response_modelChatResponse)asyncdefchat(request:ChatRequest):session_idrequest.session_idorstr(uuid.uuid4())replyagent_service.chat(request.message,session_id)returnChatResponse(replyreply,session_idsession_id)app.get(/health)asyncdefhealth():return{status:ok}5.5 启动服务uvicorn app.main:app--host0.0.0.0--port8000--reload启动后访问http://localhost:8000/docs即可看到自动生成的 API 文档可以直接在页面上测试接口。6. 前端如何对接作为前端开发者对接这个 API 非常自然// 前端调用示例asyncfunctionchatWithAgent(message,sessionId){constresponseawaitfetch(http://localhost:8000/chat,{method:POST,headers:{Content-Type:application/json},body:JSON.stringify({message,session_id:sessionId})});returnresponse.json();}这里有几个前端需要注意的点跨域问题开发环境需要配置 CORSFastAPI 中可通过CORSMiddleware解决流式输出如果需要打字机效果可以改用StreamingResponse返回 SSE 流会话管理前端负责生成或保存session_id实现多轮对话的上下文延续7. 部署上线基础本地跑通后下一步是部署到服务器。最轻量的方式是使用 DockerFROM python:3.11-slim WORKDIR /app COPY requirements.txt . RUN pip install -r requirements.txt COPY . . CMD [uvicorn, app.main:app, --host, 0.0.0.0, --port, 8000]构建并运行dockerbuild-tagent-service.dockerrun-p8000:8000 agent-service8. 今日总结第十八天我们完成了从本地脚本到 API 服务的跨越。核心收获理解了本地开发与线上服务的差异掌握了 FastAPI 的基本用法完成了 Agent 的服务化封装打通了前端调用 Agent 的完整链路明天我们将深入流式输出和 SSE 协议让 Agent 的回复像 ChatGPT 一样逐字输出进一步提升用户体验。9. 实践作业将你第 17 天的 Agent 原型改造成 FastAPI 服务用 Postman 或前端页面调用/chat接口验证多轮对话尝试在 FastAPI 中配置 CORS允许前端跨域访问思考如果同时有 100 个用户调用当前实现会有什么问题

相关新闻

为什么我不建议普通前端盲目卷全栈?

为什么我不建议普通前端盲目卷全栈?

1. 引言 这两年“全栈”这个词在技术圈里越来越热,打开招聘软件,满屏都是“全栈工程师优先”;打开技术社区,到处是“前端已死,赶紧转全栈”的论调。于是不少前端同学开始焦虑:是不是不学 Node.js、不写后端…

2026/11/11 19:46:16 阅读更多 →
[基于OpenEvals的自动化评估-16]自动模拟多轮对话实施评估

[基于OpenEvals的自动化评估-16]自动模拟多轮对话实施评估

由于大多数现代AI应用(如智能客服、Agent、RAG 系统)都是基于聊天对话的,传统的单轮单答(Single-turn)测试无法捕获用户修改意图、追问或上下文丢失等复杂情况。OpenEvals允许你用另一个AI扮演虚拟用户,与你…

2026/11/11 19:46:16 阅读更多 →
基于Spring Boot共享单车信息系统的设计与实现

基于Spring Boot共享单车信息系统的设计与实现

背景 共享单车作为城市绿色出行的重要组成部分,近年来在全球范围内快速发展,成为解决“最后一公里”出行难题的有效方案。随着城市化进程的加速和环保意识的增强,共享单车凭借其便捷性、经济性和低碳特性,迅速融入城市交通体系。然…

2026/11/5 2:58:21 阅读更多 →

最新新闻

Electron桌面应用开发实战:从环境搭建到打包发布全流程

Electron桌面应用开发实战:从环境搭建到打包发布全流程

做前端这些年,我大部分时间都在跟浏览器标签页打交道,直到第一次把桌面应用跑起来,才发现原来自己一直被限制在地址栏和刷新按钮围起来的框框里。Electron这个词,最开始是在某段时间频繁出现在同事的讨论里,一个用HTML…

2026/11/10 23:32:01 阅读更多 →
滑盖智能锁T109深度解析:结构原理、安装调试与故障排查

滑盖智能锁T109深度解析:结构原理、安装调试与故障排查

简介:亚太天能T109滑盖智能锁产品说明书是一份PDF格式的官方技术文档,主要面向智能锁安装人员、终端用户及售后维护者,帮助快速掌握产品安装、配置与常见故障处理。全包仅1个PDF文件,大小4.37MB,内容结构清晰&#xff…

2026/11/10 23:32:03 阅读更多 →
PMSM弱磁控制原理与Simulink建模:高速AGV驱动系统设计指南

PMSM弱磁控制原理与Simulink建模:高速AGV驱动系统设计指南

上个月我在调试一台高速AGV的驱动系统,整车要求空载跑到8m/s,电机转速已经拉到额定点,驱动器的输出电压也顶到了母线电压极限附近。再往上踩速度指令,转速纹丝不动,三相电流反而开始震荡。那会儿我的第一反应就是&…

2026/11/11 2:31:33 阅读更多 →
C++核心知识点:从内存管理到STL的实战指南

C++核心知识点:从内存管理到STL的实战指南

C 这门语言我前前后后折腾了十几年,用它写过嵌入式驱动、做过游戏服务端,也搭过基础组件库。每次看到新人一头扎进"C 核心知识点"这个搜索词,我其实挺感慨的——这门语言的难点从来不是语法多,而是知识点之间的耦合太深…

2026/11/11 17:16:37 阅读更多 →
T109滑盖智能锁怎么装?安装调试与故障排查全攻略

T109滑盖智能锁怎么装?安装调试与故障排查全攻略

简介:亚太天能T109滑盖智能锁产品说明书以PDF格式发布,适合智能锁用户、安装人员与售后维修人员阅读。内容围绕T109系列指纹密码刷卡锁展开,先介绍前面板、后面板、锁体、机械钥匙、电池盒盖等部件名称与功能,再给出完整安装步骤&…

2026/11/11 17:16:37 阅读更多 →
LLM知识降熵:从信息垄断到理解权下放

LLM知识降熵:从信息垄断到理解权下放

你有没有过这种经历:翻开源码注释、论文摘要或者一份专业报告,每个字都认识,连在一起却像天书。想找人聊聊,身边要么没人懂,要么懂的懒得跟你解释。后来我试着把同一段内容丢给一个大语言模型,几秒钟之后&a…

2026/11/10 23:32:10 阅读更多 →

日新闻

周新闻

月新闻