本专栏的完整源码已开源，欢迎 Star：
GitHub: https://github.com/AlbertCodeSpace/ai-chat
包含前后端完整代码、数据库脚本、系统提示词、测试用例，clone 后按 README 启动即可运行。
| 主题 |
核心内容 |
| 专栏简介 |
Spring AI 是什么、为什么选择它、专栏目标 |
| 项目总览 |
业务需求分析、技术选型、系统架构设计 |
| 后端初始化 |
Spring Boot 4 + WebFlux + R2DBC + H2、统一响应格式、测试工具类 |
| 前端初始化 |
Vue 3 + TypeScript + DaisyUI、路由配置、Axios 封装 |
| 注册与登录 |
JWT 认证、Spring Security Reactive、密码加密、数据隔离 |
| Spring AI 核心 |
ChatClient / ChatModel、双模型配置（思考/非思考）、外部提示词文件、PromptTemplate |
| 话题与消息 |
Topic / Message 实体、CRUD 接口、数据隔离、话题管理界面 |
| AI 对话 |
SSE 流式响应、深度思考开关、ChatChunk 协议、Markdown 渲染 + 代码高亮 |
| 图像能力 |
文生图（x/z-image-turbo）、图像分析（qwen3.5 Vision）、图片预览/下载 |
| 工具调用 |
@Tool 注解、时间/计算/联网搜索三个工具、Tavily API |
| 技术 |
版本 |
用途 |
| Spring Boot |
4.0 |
应用框架 |
| Spring WebFlux |
7.0 |
响应式 Web |
| Spring AI |
2.0.0-M3 |
AI 模型集成 |
| Spring Security |
7.0 |
认证授权 |
| Spring Data R2DBC |
4.0 |
响应式数据库访问 |
| H2 Database |
- |
嵌入式数据库 |
| Ollama |
- |
本地 AI 模型运行时 |
| JWT (jjwt) |
0.13 |
Token 认证 |
| 技术 |
用途 |
| Vue 3 + TypeScript |
UI 框架 |
| Vue Router |
路由管理 |
| DaisyUI + Tailwind CSS |
UI 组件库 |
| Axios |
HTTP 请求 |
| marked + highlight.js |
Markdown 渲染 + 代码高亮 |
| Fetch API + ReadableStream |
SSE 流式通信 |
| 模型 |
用途 |
| qwen3.5:9b |
对话（带思考）+ 图像分析（Vision） |
| frob/qwen3.5-instruct:9b |
对话（无思考，快速响应） |
| x/z-image-turbo |
文生图 |
| 方法 |
路径 |
说明 |
认证 |
| GET |
/api/ping |
心跳检测 |
不需要 |
| POST |
/api/auth/register |
用户注册 |
不需要 |
| POST |
/api/auth/login |
用户登录 |
不需要 |
| GET |
/api/topics |
获取话题列表 |
需要 |
| POST |
/api/topics |
创建话题 |
需要 |
| PUT |
/api/topics/{id} |
更新话题标题 |
需要 |
| DELETE |
/api/topics/{id} |
删除话题 |
需要 |
| GET |
/api/topics/{id}/messages |
获取消息列表 |
需要 |
| POST |
/api/chat |
AI 对话（SSE，支持思考/图像分析） |
需要 |
| POST |
/api/image/generate |
图像生成（SSE） |
需要 |
ai-chat/
├── ai-chat-backend/
│ └── src/main/java/com/albertstack/aichat/
│ ├── config/ # AiConfig、SecurityConfig、WebConfig
│ ├── controller/ # AuthController、TopicController、ChatController、ImageController
│ ├── service/ # UserService、TopicService、ChatService、ImageService
│ ├── repository/ # UserRepository、TopicRepository、MessageRepository
│ ├── entity/ # User、Topic、Message
│ ├── dto/ # ChatRequest、ChatChunk、ImageRequest、AuthResponse...
│ ├── tool/ # DateTimeTool、MathTool、WebSearchTool
│ ├── common/ # ApiResponse、ResultCode
│ └── util/ # JwtUtil、SecurityUtils
│
└── ai-chat-frontend/
└── src/
├── api/ # index.ts、topic.ts、chat.ts
├── composables/ # useSSE.ts
├── stores/ # auth.ts
├── views/ # LoginView.vue、RegisterView.vue、ChatView.vue
└── router/ # index.ts
专栏到此结束，但项目还有很多可以继续探索的方向：
| 方向 |
说明 |
| Markdown 渲染增强 |
支持 LaTeX 公式（KaTeX）、Mermaid 图表 |
| 消息编辑/重试 |
编辑已发送的消息重新生成回复 |
| 对话导出 |
导出为 Markdown / PDF |
| 图片存储优化 |
base64 迁移到对象存储（OSS/S3），数据库只存 URL |
| 移动端适配 |
响应式布局，侧边栏可折叠 |
| 方向 |
说明 |
| RAG 知识库 |
接入向量数据库（Qdrant），实现文档问答 |
| 多模型切换 |
前端可选择不同模型（Ollama 支持多模型并存） |
| 对话分享 |
生成分享链接，他人可查看对话记录 |
| 用量统计 |
记录 Token 消耗、API 调用次数 |
| 更多工具 |
天气查询、代码执行、数据库查询、邮件发送 |
| 方向 |
说明 |
| 生产部署 |
MySQL/PostgreSQL 替换 H2、Docker 容器化、Nginx 反向代理 |
| MCP 协议 |
接入 Model Context Protocol，标准化工具调用 |
| 多用户协作 |
共享话题、团队工作空间 |
| Agent 工作流 |
多步推理、任务分解、自主决策 |
这个专栏的目标不是构建一个生产级产品，而是帮你理解 AI 应用开发的核心模式：
- 如何将 AI 模型集成到 Web 应用中
- 如何处理流式响应（SSE）
- 如何扩展 AI 的能力边界（工具调用、多模态）
- 如何在保持代码简洁的同时实现完整功能
掌握了这些模式，无论后续技术栈怎么变化，核心思路都是相通的。
