10分钟上手DeepSeek开发：SpringBoot + Vue2快速构建AI对话系统

<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 dompurify

3. 后端服务开发

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: DEBUG

3.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博客

10分钟上手DeepSeek开发：SpringBoot + Vue2快速构建AI对话系统

优质文章学习记录

1. 前言

为什么选择DeepSeek？

本文技术栈

2. 环境准备

2.1. 后端项目初始化

2.2. 前端项目初始化

3. 后端服务开发

3.1. 配置文件

3.2. 核心服务实现

4. 前端服务开发

4.1. 聊天组件ChatWindow.vue开发

5. 效果展示及源码获取

5.1. 效果展示

5.2. 源码获取

6. 结语

7. 参考链接

Read more

通义千问3-14B环境部署教程：Ollama+WebUI双Buff叠加指南

前端 SSR：别让你的网站变成 SEO 黑洞

如何利用简单的浏览器插件Web Scraper爬取知乎评论数据

WEB 学习框架搭建