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

原创已于 2025-07-28 14:27:00 修改 · 1.1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#人工智能 #AI大模型 #大模型教程 #DeepSeek-R1 #大模型学习

于 2025-07-28 14:25:20 首次发布

大模型教程同时被 2 个专栏收录

49 篇文章

订阅专栏

AI大模型

49 篇文章

订阅专栏

1. 前言

为什么选择DeepSeek？

本文技术栈

2. 环境准备

2.1. 后端项目初始化

2.2. 前端项目初始化

3. 后端服务开发

3.1. 配置文件

3.2. 核心服务实现

4. 前端服务开发

4.1. 聊天组件ChatWindow.vue开发

5. 效果展示及源码获取

5.1. 效果展示

5.2. 源码获取

6. 结语

7. 参考链接

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服务器繁忙？这几种替代方案帮你流畅使用！（附本地部署教程）-优快云博客

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 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 class="chat-container">
    <div class="message-container" 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更多进阶玩法~

关于AI大模型技术储备

学好 AI大模型不论是就业还是在工作技能提升上都不错，但要学会 AI大模型还是要有一个学习规划。最后大家分享一份全套的 AI大模型学习资料，给那些想学习 AI大模型的小伙伴们一点帮助！

感兴趣的小伙伴，赠送全套AI大模型学习资料和安装工具，包含Agent行业报告、精品AI大模型学习书籍手册、视频教程、最新实战学习等录播视频，具体看下方。

需要的可以微信扫描下方优快云官方认证二维码免费领取【保证100%免费】

如何学习大模型 AI ？

🔥AI取代的不是人类，而是不会用AI的人！麦肯锡最新报告显示：掌握AI工具的从业者生产效率提升47%，薪资溢价达34%！🚀

由于新岗位的生产效率，要优于被取代岗位的生产效率，所以实际上整个社会的生产效率是提升的。

但是具体到个人，只能说是：

“最先掌握AI的人，将会比较晚掌握AI的人有竞争优势”。

这句话，放在计算机、互联网、移动互联网的开局时期，都是一样的道理。

我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在人工智能学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限，很多互联网行业朋友无法获得正确的资料得到学习提升，故此将并将重要的AI大模型资料包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。

1️⃣ 提示词工程：把ChatGPT从玩具变成生产工具
2️⃣ RAG系统：让大模型精准输出行业知识
3️⃣ 智能体开发：用AutoGPT打造24小时数字员工

📦熬了三个大夜整理的《AI进化工具包》送你：
✔️ 大厂内部LLM落地手册（含58个真实案例）
✔️ 提示词设计模板库（覆盖12大应用场景）
✔️ 私藏学习路径图（0基础到项目实战仅需90天）

在这里插入图片描述