10分钟上手DeepSeek开发：SpringBoot + Vue2快速构建AI对话系统
作者：后端小肥肠
目录
1. 前言
随着人工智能技术的快速发展，大语言模型在企业和个人应用中扮演着越来越重要的角色。作为国产大语言模型的新秀，DeepSeek以其出色的中文理解能力和开放的API接口，为开发者提供了构建AI应用的新选择。
在本文中，我将带领大家使用SpringBoot和Vue技术栈，快速搭建一个具有实时对话功能的AI助手系统。这个系统不仅支持流式响应，还具备优雅的界面展示和Markdown格式的内容渲染，让AI回答更加清晰易读。
为什么选择DeepSeek？
- 优秀的中文理解能力，对中文语境的把握更加准确
- 开放友好的API接口，支持流式输出
- 合理的定价策略，适合个人开发者和小型企业
- 部署在国内服务器，响应速度快，无需科学上网
本文技术栈
后端：
- SpringBoot 2.x
- WebSocket/WebFlux：实现实时数据流传输
- Lombok：简化Java代码
- Jackson：JSON处理
前端：
- Vue 2.x
- SockJS：处理WebSocket通信
- Marked：Markdown渲染
- DOMPurify：防止XSS攻击
让我们开始动手实践，用短短10分钟时间，搭建一个专业的AI对话系统！
2. 环境准备
- JDK 8+
- Node.js 12+
- Maven 3.6+
- IDE（推荐IntelliJ IDEA）
- DeepSeek API密钥
DeepSpeek API秘钥可以用硅基流动来获取，不知道具体方法的可以参考我的另外一篇博客。DeepSpeek服务器繁忙？这几种替代方案帮你流畅使用！（附本地部署教程）-ZEEKLOG博客
2.1. 后端项目初始化
创建maven工程:
新增pom依赖：
<dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-webflux</artifactId> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </dependency> </dependencies>2.2. 前端项目初始化
vue create xfc-deepspeek-front cd xfc-deepspeek-front npm install sockjs-client marked dompurify3. 后端服务开发
3.1. 配置文件
server: port: 8080 spring: application: name: xfc-deepspeek webflux: base-path: / codec: max-in-memory-size: 10MB deepseek: api-url: https://api.siliconflow.cn/v1/chat/completions api-key: your_api_key_here logging: level: com.xfc: DEBUG3.2. 核心服务实现
@Slf4j @Service @RequiredArgsConstructor public class DeepSeekService { private final DeepSeekConfig config; private final WebClient.Builder webClientBuilder; public Flux<String> handleChatWebSocket(String question) { return sendChatRequest(question) .doOnNext(response -> log.info("发送响应: {}", response)) .onErrorResume(e -> { log.error("WebSocket通信错误: {}", e.getMessage()); return Flux.just("抱歉，服务器处理请求时发生错误，请稍后重试。"); }); } // ... 其他实现代码见完整源文件 }DeepSeekService 是一个核心服务类，主要负责处理与 DeepSeek API 的通信和数据处理，包含三个主要功能模块：
命令行交互功能（startInteractiveChat方法）：
提供命令行方式与AI对话，支持问答记录保存到本地文件。用户可以输入问题，实时查看AI响应，并自动保存对话历史。
WebSocket通信功能（handleChatWebSocket方法）：
处理前端WebSocket请求，将用户问题转发给DeepSeek API，并将响应通过WebSocket返回给前端。包含错误处理机制，确保通信稳定性。
API请求处理功能（sendChatRequest方法）：
负责与DeepSeek API的具体通信实现。使用WebClient发送异步请求，支持流式响应处理。包含完善的错误处理机制，如超时控制（60秒）、重试机制（最多3次，间隔2秒）、异常处理等。对API响应进行JSON解析，提取有效内容。
整个服务采用响应式编程模式（Flux），实现非阻塞式处理，提高系统性能。同时通过日志记录、错误重试、优雅降级等机制，确保服务的可靠性和稳定性。saveToFile方法提供了对话历史的本地存储功能，支持时间戳记录。
4. 前端服务开发
4.1. 聊天组件ChatWindow.vue开发
<template> <div> <div ref="messageContainer"> <div v-for="(message, index) in messages" :key="index" :class="['message', message.type + '-message']" > <div v-if="message.type === 'bot'" v-html="renderMarkdown(message.content)"></div> <div v-else>{{ message.content }}</div> </div> </div> <!-- ... 其他模板代码 --> </div> </template> <script> import SockJS from 'sockjs-client'; import { marked } from 'marked'; import DOMPurify from 'dompurify'; export default { name: 'ChatWindow', // ... 完整实现代码见源文件 } </script>这个 ChatWindow.vue 组件是一个完整的聊天界面实现，主要分为三个部分：
界面结构部分使用了 flex 布局，包含消息显示区、输入区和连接状态提示区。消息显示区支持滚动和自动定位到最新消息，输入区包含输入框和发送按钮，状态区显示连接情况。
功能实现部分主要通过 WebSocket 实现实时通信。initWebSocket 方法负责建立连接，包含连接成功、接收消息、错误处理和断开重连等完整生命周期管理。消息发送和接收通过 sendMessage 和 appendMessage 方法处理，支持用户消息和机器人回复的区分显示。特别的是，通过 marked 库实现了 Markdown 格式的渲染，并使用 DOMPurify 防止 XSS 攻击。
样式设计部分为不同类型的消息（用户消息、机器人回复、错误提示）定义了不同的样式，并通过 :deep 选择器为 Markdown 内容添加了详细的样式支持，包括标题、代码块、表格、列表等多种格式的样式定义，确保内容展示的专业性和美观性。整体设计注重用户体验，包含了状态提示、错误处理等完善机制。
5. 效果展示及源码获取
5.1. 效果展示
后端日志：
上图显示了项目运行时的日志信息，记录了 WebSocket 连接和 DeepSeek 服务的交互过程，包括消息接收和响应的详细日志。
系统界面：
上图为AI 对话系统的用户界面截图。整个界面支持 Markdown 格式的渲染，使得回答内容层次分明，易于阅读。
后台链接断开提示：
5.2. 源码获取
关注gzh后端小肥肠，点击【资源】菜单即可获取完整源码。
6. 结语
通过本文的实践，我们成功搭建了一个基于SpringBoot和Vue的AI对话系统。该系统具有以下特点：
实时对话：基于WebSocket的流式响应
优雅展示：支持Markdown格式渲染
稳定可靠：完善的错误处理机制
易于扩展：清晰的代码结构
获取源码后可以自行扩展优化方向，如加入除DeepSpeek之外的其他模型的API，记录会话历史，集成RAG，感兴趣的朋友可以点个关注，小肥肠将持续更新DeepSpeek更多进阶玩法~
7. 参考链接
DeepSeek API 调用 - Spring Boot 实现_deepseek-spring-boot-starter-ZEEKLOG博客
