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

最新推荐文章于 2025-06-21 23:26:33 发布

原创最新推荐文章于 2025-06-21 23:26:33 发布 · 1.3k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#spring boot #人工智能 #后端 #开发语言 #开源 #ai #java

作者：后端小肥肠

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大模型？

大模型时代，火爆出圈的LLM大模型让程序员们开始重新评估自己的本领。 “AI会取代那些行业？”“谁的饭碗又将不保了？”等问题热议不断。

不如成为「掌握AI工具的技术人」，毕竟AI时代，谁先尝试，谁就能占得先机！

想正式转到一些新兴的 AI 行业，不仅需要系统的学习AI大模型。同时也要跟已有的技能结合，辅助编程提效，或上手实操应用，增加自己的职场竞争力。

但是LLM相关的内容很多，现在网上的老课程老教材关于LLM又太少。所以现在小白入门就只能靠自学，学习成本和门槛很高

那么针对所有自学遇到困难的同学们，我帮大家系统梳理大模型学习脉络，将这份 LLM大模型资料 分享出来：包括LLM大模型书籍、640套大模型行业报告、LLM大模型学习视频、LLM大模型学习路线、开源大模型学习教程等, 😝有需要的小伙伴，可以 扫描下方二维码领取🆓↓↓↓

在这里插入图片描述

AI大模型学习福利

作为一名热心肠的互联网老兵，我决定把宝贵的AI知识分享给大家。至于能学习到多少就看你的学习毅力和能力了。我已将重要的AI大模型资料包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。

大模型&AI产品经理如何学习

求大家的点赞和收藏，我花2万买的大模型学习资料免费共享给你们，来看看有哪些东西。

1.学习路线图

在这里插入图片描述

第一阶段：从大模型系统设计入手，讲解大模型的主要方法；

第二阶段：在通过大模型提示词工程从Prompts角度入手更好发挥模型的作用；

第三阶段：大模型平台应用开发借助阿里云PAI平台构建电商领域虚拟试衣系统；

第四阶段：大模型知识库应用开发以LangChain框架为例，构建物流行业咨询智能问答系统；

第五阶段：大模型微调开发借助以大健康、新零售、新媒体领域构建适合当前领域大模型；

第六阶段：以SD多模态大模型为主，搭建了文生图小程序案例；

第七阶段：以大模型平台应用与开发为主，通过星火大模型，文心大模型等成熟大模型构建大模型行业应用。

2.视频教程

网上虽然也有很多的学习资源，但基本上都残缺不全的，这是我自己整理的大模型视频教程，上面路线图的每一个知识点，我都有配套的视频讲解。

在这里插入图片描述

（都打包成一块的了，不能一一展开，总共300多集）

因篇幅有限，仅展示部分资料，需要点击下方图片前往获取

3.技术文档和电子书

这里主要整理了大模型相关PDF书籍、行业报告、文档，有几百本，都是目前行业最新的。
在这里插入图片描述

4.LLM面试题和面经合集

这里主要整理了行业目前最新的大模型面试题和各种大厂offer面经合集。
在这里插入图片描述

👉学会后的收获：👈
• 基于大模型全栈工程实现（前端、后端、产品经理、设计、数据分析等），通过这门课可获得不同能力；

• 能够利用大模型解决相关实际项目需求：大数据时代，越来越多的企业和机构需要处理海量数据，利用大模型技术可以更好地处理这些数据，提高数据分析和决策的准确性。因此，掌握大模型应用开发技能，可以让程序员更好地应对实际项目需求；

• 基于大模型和企业数据AI应用开发，实现大模型理论、掌握GPU算力、硬件、LangChain开发框架和项目实战技能，学会Fine-tuning垂直训练大模型（数据准备、数据蒸馏、大模型部署）一站式掌握；

• 能够完成时下热门大模型垂直领域模型训练能力，提高程序员的编码能力：大模型应用开发需要掌握机器学习算法、深度学习框架等技术，这些技术的掌握可以提高程序员的编码能力和分析能力，让程序员更加熟练地编写高质量的代码。
在这里插入图片描述

1.AI大模型学习路线图
2.100套AI大模型商业化落地方案
3.100集大模型视频教程
4.200本大模型PDF书籍
5.LLM面试题合集
6.AI产品经理资源合集

👉获取方式：
😝有需要的小伙伴，可以保存图片到wx扫描二v码免费领取【保证100%免费】🆓

在这里插入图片描述