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

最新推荐文章于 2025-05-07 16:48:36 发布
最新推荐文章于 2025-05-07 16:48:36 发布
阅读量1.1k 收藏 20
点赞数 23
CC 4.0 BY-SA版权
文章标签： spring boot 人工智能 后端 开源 llama 编程 ai
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jennycisp/article/details/147191576

目录

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

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%免费】🆓

在这里插入图片描述

10分钟上手DeepSeek开发：SpringBoot + Vue2快速构建AI对话系统
s13166803785的博客
02-19 322
用户想用SpringBoot和Vue2快速构建一个AI对话系统，10分钟上手。首先，我需要确认用户的技术背景。可能他们有一定的Java和前端基础，但希望快速实现一个项目，所以需要步骤简洁明了。首先，应该分成后端和前端两部分。后端用SpringBoot，处理AI接口调用；前端用Vue2，负责界面和交互。用户可能对SpringBoot和Vue的基本结构有了解，但需要具体步骤。后端部分，需要创建SpringBoot项目，添加Web依赖，然后处理API请求。
Spring Boot 整合 DeepSeek 实现AI对话 (保姆及教程)
m0_49726578的博客
04-17 1058
随着人工智能的不断发展，ai这门技术也越来越重要，很多人都开启了拥抱ai，本文就介绍Spring Boot 整合 DeepSeek。
15分钟实战：SpringBoot + Vue2快速构建AI对话系统（集成DeepSeek）
AL.千灯学长的博客
03-03 1710
通过SpringBoot与Vue2的经典组合，我们快速实现了与DeepSeek的集成。
全网最全vue2技术栈实现流式AI问答机器人功能（2025/2/18已更新接入deepSeek）
m0_74052733的博客
03-04 1万+
全网最全vue2技术栈实现流式AI问答机器人功能（2025/2/18已更新接入deepSeek）
实现一个简易的AI流式对话，模拟ChatGPT（SpringBoot+Vue2）
m0_75081815的博客
11-24 4586
我们如何实现一个AI流式输出？目前的AI对话接口大多都附带有流式输出接口，但是后端接收到的数据是流式的，我们仍需要处理数据流并返回给前端，让前端显示流式的效果。试着实现一个简易的AI流式对话，模拟chatgpt（SpringBoot+Vue2）
vue聊天对话ai流式输出
QwQ621的博客
04-19 5903
<template> <div class="talkContent"> <div class="talkShow" id="words"> <div :class="[(item.person=='mechanical')?'mechanicalTalk':'mineTalk']" v-for="(item,index) in talkList" :key="index"> <span>{{item
Vue：现代前端开发的基石引擎
最新发布
源滚滚编程
05-07 629
在框架更迭频繁的前端领域，Vue始终坚守"渐进式"与"可组合性"的设计初心。从2014年的视图层库，到2025年的全栈开发平台，Vue的演进轨迹印证了一个真理：真正的技术革新不在于颠覆现有体系，而是通过持续优化解决开发者的真实痛点。随着Vite 6、Pinia 3等工具链的成熟，Vue正在构建一个让开发者既能快速上手，又能深入掌控的技术生态。这或许就是它能在React与Svelte的竞争中持续保持活力的根本原因。
DeepSeek-V3 是由 deepseek-ai 团队开发的项目，旨在为开发者、研究者以及企业提供先进的深度学习、自然语言处理和数据分析解决方案
qq_41126242的博客
12-31 1916
是由团队开发的项目，旨在为开发者、研究者以及企业提供先进的深度学习、自然语言处理和数据分析解决方案。它提供了丰富的功能组件以及高可扩展、易于集成的架构，帮助用户快速构建并部署 AI 应用，降低研究与开发门槛。高性能：算法优化及高效实现，性能指标领先同类开源项目。模块化架构：能够灵活选用或替换各个组件，快速定制化。易上手：详尽的文档和示例，初学者和专业用户都能快速上手。社区驱动：社区积极参与，共同进步与迭代。通过多渠道、多形式地宣传。
【创新】springboot框架整合ai智能对话（超简单）
计算机毕设代写，专业从事计算机编程5年经验，个人开发者，全程护航包通过。
02-07 1527
【创新】springboot框架整合ai智能对话（超简单）
Vue中Ai对话框设计Demo
HD243608836的博客
01-12 1822
【代码】Vue种Ai对话框设计Demo。
SpringBoot集成DeepSeek实现AI对话详细教程
啊松同学的博客
02-22 2962
SpringBoot集成DeepSeek
Spring Boot3+Vue3极速整合: 10分钟搭建DeepSeek AI对话系统(进阶)
微信公众号: 后端码匠
03-01 2136
在上次实战指南《Spring Boot3+Vue2极速整合: 10分钟搭建DeepSeek AI对话系统》引发读者热议后，我通过200+真实用户反馈锁定了几个问题进行优化进阶处理：本文作为系统升级的进阶指南：环境规格：全程基于Windows11平台（AMD Ryzen5 6600H/16GB内存/RTX3050ti 4GB显存），采用环境管理方案。 预览图 后端实现 通过 ConcurrentHashMap、List 的简洁设计，在保证线程安全的前提下实现了基本的上下文管理功能，后续可通过添加窗口限制、持
大模型入门实战：通过 HuggingFace 调用 Llama3
python12345_的博客
01-10 1596
至此，我们成功演示了如何通过 Hugging Face 的 Transformers 调用 Llama 模型，并获取了模型的回答。但是如果你的需求只是简单地调用模型，而无需进行微调或复杂的部署，可以尝试使用 Ollama。它不仅操作更加便捷，还提供了开箱即用的 RESTful 接口，适合快速集成到生产环境中。下一篇，我将会讲解如何通过 Ollama 下载部署 Llama 模型并调用。
基于DeepSeek+Vue3的AI对话聊天系统开发实战
嗨，欢迎来到我的 CSDN 博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。
02-21 1万+
基于DeepSeek+Vue3的AI对话聊天系统开发实战
【Spring boot实战】Springboot＋对话ai模型整体框架+高并发线程机制处理优化+提示词工程效果展示（按照框架自己修改可对接市面上百分之99的模型）
终于等到你啦~欢迎来到我的知识空间 这里是苏泽的成神之路
02-16 6297
于是这一章专门出一期运用前面所讲过的知识 自己从0开始搭建一个后台程序 能够对接市面上绝大多数的ai对话api（不同公司的具体的鉴权方法你们找官网文档copy就行了）从零开始 搭建一个Spring boot程序 确保你已经安装了Java开发工具（JDK）。你可以在命令行中输入java -version来验证是否已安装Java，并确保版本符合Spring Boot的要求。
利用DeepSeek快速按照需求生成代码实例用于开发工作
热门推荐
任聪聪的博客
01-28 1万+
本篇文章主要讲解利用DeepSeek快速输入中文需求描述，实现代码的自动化辅助生成效果，并运用于实际开发工作中的操作教程。作者：任聪聪日期：2025年1月28日。
ai对话机器人 springboot
02-28
### 创建AI对话机器人并集成至Spring Boot #### 选择合适的框架和技术栈 为了创建一个高效的AI对话机器人并与Spring Boot无缝集成，推荐使用Spring AI Alibaba作为主要技术栈。该工具专为阿里云的大规模预训练模型设计，提供了一套标准化接口用于快速接入通义等AI能力到Spring Boot项目中[^1]。 #### 初始化Spring Boot项目 首先需建立一个新的Spring Boot工程，在`pom.xml`文件内加入必要的依赖项以便于后续操作： ```xml <dependency> <groupId>com.alibaba.cloud</groupId> <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId> </dependency> <!-- 添加其他所需依赖 --> ``` 接着定义启动类如下所示: ```java package com.example.demo; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class DemoApplication { public static void main(String[] args) { SpringApplication.run(DemoApplication.class, args); } } ``` #### 实现基本聊天功能 利用Spring AI Alibaba提供的API实现基础的文本交流特性。具体来说就是编写控制器接收来自前端的消息请求，并将其转发给指定的AI服务端点完成自然语言处理任务后再返回响应结果给客户端显示出来。 ```java @RestController @RequestMapping("/chatbot") public class ChatBotController { private final AiService aiService; @Autowired public ChatBotController(AiService aiService){ this.aiService = aiService; } @PostMapping("/message") ResponseEntity<String> handleMessage(@RequestBody String message){ try{ // 调用AI服务获取回复内容 String responseText = aiService.getResponse(message); return new ResponseEntity<>(responseText, HttpStatus.OK); }catch(Exception e){ logger.error("Error processing chat request",e); throw new RuntimeException(e.getMessage()); } } } ``` 以上代码片段展示了如何设置RESTful Web Service来处理用户的输入消息并通过调用外部AI服务平台获得相应的应答信息。 #### 扩展更多高级特性和优化用户体验 除了简单的单次询问外还可以考虑增加诸如多轮对话记忆、上下文理解等功能提升交互质量；另外也可以探索语音合成(TTS)，图像生成等方面的应用场景进一步丰富产品形态[^2]。 对于资源有限的情况，则可以选择不需要GPU支持的方式来运行大型语言模型(LLMs),例如借助LangChain-Chatchat这样的开源库来进行本地化部署和定制化调整[^3]。 最后值得注意的是当涉及到云端托管解决方案时像Azure Spring Cloud这样专门面向Spring生态系统的平台能够极大地方便运维工作同时保障性能稳定可靠[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员一粟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值