第七篇章:项目实战——从零到上线
·
本篇目标:做一个真正可上线的 AI 智能助手(支持 Agent + RAG + 用户系统 + 流式对话)
最终效果:一个类似 ChatGPT 的 Web 应用(可登录、可聊天、可查知识库)
技术栈:FastAPI + LangGraph + ChromaDB + Vue3 + SQLite/PostgreSQL + Nginx
前置知识:RAG + Agent + LangGraph 基础
一、项目我们要做什么?
我们要做一个完整 AI Web 应用,包含:
🤖 1. AI 对话能力(Agent)
- 可以问:
- 今天北京天气
- 现在几点
- 2+3*4是多少
- 记录一个笔记
📚 2. 知识库问答(RAG)
- 上传 PDF / TXT / Word
- AI 可以基于文档回答问题
👤 3. 用户系统
- 注册
- 登录
- JWT 鉴权
💬 4. 流式对话
- AI 像 ChatGPT 一样“打字输出”
📝 5. 对话历史
- 每个用户有自己的聊天记录
二、系统整体架构(先建立全局认知)
前端 Vue3
↓ HTTP / SSE
FastAPI 后端
↓
┌─────────────────────────────┐
│ Agent系统(LangGraph) │
│ RAG系统(ChromaDB) │
│ 用户系统(JWT) │
└─────────────────────────────┘
↓
SQLite / PostgreSQL + 向量数据库
三、项目初始化
3.1 创建项目
mkdir ai-assistant
cd ai-assistant
mkdir backend frontend
3.2 后端安装依赖
cd backend
pip install fastapi uvicorn sqlalchemy python-jose passlib bcrypt \
python-multipart langchain langgraph chromadb \
langchain-openai pypdf2 python-docx
3.3 requirements.txt
fastapi
uvicorn
sqlalchemy
python-jose[cryptography]
passlib[bcrypt]
python-multipart
langchain
langgraph
chromadb
langchain-openai
pypdf2
python-docx
四、后端基础搭建
4.1 项目结构
backend/
├── main.py
├── database.py
├── models.py
├── auth.py
├── config.py
├── agent/
├── rag/
五、基础配置
5.1 config.py
import os
from dotenv import load_dotenv
load_dotenv()
DEEPSEEK_API_KEY = os.getenv("DEEPSEEK_API_KEY", "")
DEEPSEEK_BASE_URL = "https://api.deepseek.com"
MODEL_NAME = "deepseek-chat"
SECRET_KEY = os.getenv("SECRET_KEY")
ALGORITHM = "HS256"
ACCESS_TOKEN_EXPIRE_MINUTES = 60 * 24
DATABASE_URL = "sqlite:///./app.db"
CHROMA_PATH = "./chroma_db"
六、数据库设计
6.1 为什么要用数据库?
因为我们要保存:
- 用户
- 对话
- 消息历史
6.2 models.py
from sqlalchemy import Column, Integer, String, DateTime, ForeignKey, Text
from sqlalchemy.orm import relationship
from datetime import datetime
from database import Base
class User(Base):
__tablename__ = "users"
id = Column(Integer, primary_key=True)
username = Column(String, unique=True)
hashed_password = Column(String)
conversations = relationship("Conversation", back_populates="user")
class Conversation(Base):
__tablename__ = "conversations"
id = Column(Integer, primary_key=True)
user_id = Column(Integer, ForeignKey("users.id"))
title = Column(String, default="新对话")
messages = Column(Text, default="[]") # 简化存储
user = relationship("User", back_populates="conversations")
七、JWT用户系统
7.1 功能
- 注册
- 登录
- token鉴权
7.2 核心代码(auth.py)
from jose import jwt
from passlib.context import CryptContext
from datetime import datetime, timedelta
pwd_context = CryptContext(schemes=["bcrypt"])
SECRET_KEY = "secret"
ALGORITHM = "HS256"
def hash_password(pwd):
return pwd_context.hash(pwd)
def verify_password(pwd, hashed):
return pwd_context.verify(pwd, hashed)
def create_token(user_id):
expire = datetime.utcnow() + timedelta(days=1)
return jwt.encode({"sub": str(user_id), "exp": expire}, SECRET_KEY, algorithm=ALGORITHM)
八、FastAPI主入口
8.1 main.py(核心)
from fastapi import FastAPI, Depends
from fastapi.middleware.cors import CORSMiddleware
from database import Base, engine
Base.metadata.create_all(bind=engine)
app = FastAPI()
app.add_middleware(
CORSMiddleware,
allow_origins=["*"],
allow_methods=["*"],
allow_headers=["*"]
)
九、Agent系统(核心)
9.1 我们要做什么?
让 AI 能:
- 自动选择工具
- 自动调用函数
- 自动返回结果
9.2 tools.py
from langchain_core.tools import tool
from datetime import datetime
@tool
def get_time():
return datetime.now().strftime("%Y-%m-%d %H:%M:%S")
@tool
def calculator(expr: str):
try:
return str(eval(expr))
except:
return "计算错误"
9.3 Agent创建
from langgraph.prebuilt import create_react_agent
from langchain_openai import ChatOpenAI
def create_agent():
llm = ChatOpenAI(model="deepseek-chat", streaming=True)
return create_react_agent(
model=llm,
tools=[get_time, calculator]
)
十、RAG知识库系统
10.1 目标
让 AI 可以读 PDF 并回答问题
10.2 文档加载
from PyPDF2 import PdfReader
def load_pdf(path):
reader = PdfReader(path)
return "\n".join([p.extract_text() for p in reader.pages])
10.3 向量数据库
from langchain_chroma import Chroma
vectorstore = Chroma(
persist_directory="./chroma_db"
)
10.4 RAG核心流程
文档 → 切分 → 向量化 → 存储 → 检索 → LLM回答
十一、API接口设计
11.1 登录
@app.post("/login")
def login():
return {"token": "xxx"}
11.2 聊天接口
@app.post("/chat")
def chat():
return StreamingResponse(stream())
11.3 流式输出
def stream():
yield "data: hello\n\n"
十二、前端 Vue3
12.1 页面结构
LoginView
ChatView
12.2 聊天核心逻辑
fetch("/chat").then(res => {
const reader = res.body.getReader()
})
12.3 UI能力
- Markdown渲染
- 实时输出
- 对话列表
十三、知识库上传
@app.post("/upload")
async def upload(file: UploadFile):
content = await file.read()
十四、运行项目
后端
uvicorn main:app --reload
前端
npm run dev
十五、部署上线
Nginx
Vue3 → 静态文件
API → FastAPI
HTTPS
certbot --nginx
十六、本项目你真正学到的东西
技术能力
- FastAPI后端开发
- JWT认证系统
- Agent(LangGraph)
- RAG知识库系统
- SSE流式通信
- Vue3前端开发
工程能力
- 前后端分离
- 模块化设计
- AI系统集成
- 简易生产部署
下一篇预告
第八篇章:进阶视野 & 面试准备——模型微调概览、多模态入门、MCP 协议、RAG/Agent 面试高频考点、八篇章结业总结。
更多推荐



所有评论(0)