SpringBoot3 + Vue2 整合 DeepSeek：实现流式输出与多轮对话

已于 2025-04-27 10:45:27 修改
阅读量1.2k 收藏 13
点赞数 16
文章标签： spring boot 后端 java
于 2025-03-14 16:04:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51944215/article/details/146258167
版权

引言

如今，智能对话系统备受关注。本文将介绍如何整合 Spring Boot 3、Vue 2 和 DeepSeek 技术，打造一个具备流式输出与多轮对话功能的智能聊天系统。Spring Boot 3 用于搭建稳定后端，Vue 2 构建友好前端界面，DeepSeek 提供强大的对话能力。通过这个项目，我们希望实现流畅、自然的对话体验，让用户与系统交流更加高效、便捷。

参考：springboot对接deepseek & sse流式输出 & 多轮对话推理demo & 接入豆包/千帆/讯飞_deepseek sse-CSDN博客

一、环境准备

  1. 开发工具: IntelliJ IDEA

  2. 技术栈: SpringBoot 3、Vue 2、EventSource

     DeepSeek API: 注册 DeepSeek 账号并获取 API Key，👉 DeepSeek 开放平台


        依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-webflux</artifactId>
</dependency>
<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.8.10</version>
</dependency>

二、效果

三、数据表结构


四、后端
配置类-WebConfig 

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry
                .addMapping("/**")
                .maxAge(3600)
                .allowCredentials(true)
                .allowedOrigins("*")
                .allowedMethods("*")
                .allowedHeaders("*")
                .exposedHeaders("token", "Authorization");
    }

}

控制层-DeepSeekController 

@RestController
@RequestMapping("/deepseek")
public class DeepSeekController {

    @Autowired
    private DeepSeekClient deepSeekClient;

    @Autowired
    private CustomQAService customQAService;
 @RequestMapping(value = "chatCompletions", produces = "text/event-stream;charset=utf-8")
    public Flux<String> chatCompletions(@RequestParam(required = true, value = "content") String content,
                                        @RequestParam(required = false, value = "history") String history) {
        return deepSeekClient.chatCompletions(content, history);
    }

    /**
     * 查询单调指定问题的答案
     * @param problem
     * @return
     */
    @GetMapping("/selectCustomQAndA/{problem}")
    public AjaxResult selectCustomQAndA(@PathVariable String problem){
        return AjaxResult.success(customQAService.selectCustomQAndA(problem));
    }

    /**
     * 查询全部问题
     * @param
     * @return
     */
    @GetMapping("/selectCustomQAndAList")
    public AjaxResult selectCustomQAndAList(){
        return AjaxResult.success(customQAService.selectCustomQAndAList());
    }

}

属性类-AiChatRequest、AiChatMessage、CustomQA  、AjaxResult 

public class AiChatMessage {
    private String role;
    private String content;

    public AiChatMessage(String role, String content) {
        this.role = role;
        this.content = content;
    }

    public AiChatMessage() {
        this.role = role;
        this.content = content;
    }

    public String getRole() {
        return role;
    }

    public void setRole(String role) {
        this.role = role;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}




public class AiChatRequest {
    private String model;

    private List<AiChatMessage> messages;

    private boolean stream;


    public String getModel() {
        return model;
    }

    public void setModel(String model) {
        this.model = model;
    }

    public List<AiChatMessage> getMessages() {
        return messages;
    }

    public void setMessages(List<AiChatMessage> messages) {
        this.messages = messages;
    }

    public boolean isStream() {
        return stream;
    }

    public void setStream(boolean stream) {
        this.stream = stream;
    }
}



public class CustomQA  extends BaseEntity {
    private static final long serialVersionUID = 1L;

    /** 主键ID */
    private Long id;
    private String problem;

    private String answer;


    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getProblem() {
        return problem;
    }

    public void setProblem(String problem) {
        this.problem = problem;
    }

    public String getAnswer() {
        return answer;
    }

    public void setAnswer(String answer) {
        this.answer = answer;
    }

    @Override
    public String toString() {
        return new ToStringBuilder(this, ToStringStyle.MULTI_LINE_STYLE)
                .append("id", getId())
                .append("problem", getProblem())
                .append("answer", getAnswer())
                .toString();
    }
}



public class AjaxResult extends HashMap<String, Object>{
    /**
     * 返回成功数据
     * 
     * @return 成功消息
     */
    public static AjaxResult success(Object data)
    {
        return AjaxResult.success("操作成功", data);
    }

}

service以及mapper层

public interface CustomQAService {

    /**
     * 查询单调指定问题的答案
     * @param problem
     * @return
     */
    CustomQA selectCustomQAndA(String problem);

    /**
     * 查询全部问题
     * @param
     * @return
     */
    List<CustomQA> selectCustomQAndAList();
}


@Service
public class CustomQAServiceImpl implements CustomQAService {

    @Autowired
    private CustomQAMapper customQAMapper;

    /**
     * 查询单调指定问题的答案
     * @param problem
     * @return
     */
    @Override
    public CustomQA selectCustomQAndA(String problem) {
        return customQAMapper.selectCustomQAndA(problem);
    }

    /**
     * 查询全部问题
     * @param
     * @return
     */
    @Override
    public List<CustomQA> selectCustomQAndAList() {
        return customQAMapper.selectCustomQAndAList();
    }
}



@Mapper
public interface CustomQAMapper {

    /**
     * 查询单调指定问题的答案
     * @param problem
     * @return
     */
    public CustomQA selectCustomQAndA(@Param("problem") String problem);

    /**
     * 查询全部问题
     * @param
     * @return
     */
    public List<CustomQA> selectCustomQAndAList();
}

xml

<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.自己的路径.mapper.CustomQAMapper">

    <resultMap type="CustomQA" id="CustomQAResult">
        <result property="id"    column="id"    />
        <result property="problem"    column="problem"    />
        <result property="answer"    column="answer"    />
    </resultMap>

    <sql id="selectCustomQAVo">
        select id, problem, answer, update_by, update_time, create_by, create_time from custom_q_a
    </sql>

    <select id="selectCustomQAndAList" parameterType="CustomQA" resultMap="CustomQAResult">
        <include refid="selectCustomQAVo"/>
        <where>
            <if test="problem != null  and problem != ''"> and problem = #{problem}</if>
            <if test="answer != null  and answer != ''"> and answer = #{answer}</if>
        </where>
    </select>

    <select id="selectCustomQAndA" parameterType="CustomQA" resultMap="CustomQAResult">
        <include refid="selectCustomQAVo"/>
        where problem = #{problem}
    </select>

    <insert id="insertCustomQA" parameterType="CustomQA" useGeneratedKeys="true" keyProperty="id">
        insert into custom_q_a
        <trim prefix="(" suffix=")" suffixOverrides=",">
            <if test="problem != null">problem,</if>
            <if test="filePath != null">file_path,</if>
        </trim>
        <trim prefix="values (" suffix=")" suffixOverrides=",">
            <if test="problem != null">#{problem},</if>
            <if test="answer != null">#{answer},</if>
        </trim>
    </insert>

    <delete id="deleteCustomQAById" parameterType="Long">
        delete from custom_q_a where id = #{id}
    </delete>
</mapper>

实现类-DeepSeekClient
   PlatformConfig.DEEPSEEK_API：https://api.deepseek.com
   PlatformConfig.DEEPSEEK_KEY：Bearer sk-xxxxx（最开始自己创建的api key）

@Component
public class DeepSeekClient {
    private static final ObjectMapper mapper = new ObjectMapper();
    private static final Logger log = LoggerFactory.getLogger(DeepSeekClient.class);

      public Flux<String> chatCompletions(String content, String history) {
        List<AiChatMessage> messages = new ArrayList<>();

        // 如果有历史对话，解析并添加到 messages 中
        if (history != null && !history.isEmpty()) {
            try {
                JsonNode historyNode = mapper.readTree(history);
                for (JsonNode node : historyNode) {
                    String role = node.get("role").asText();
                    String messageContent = node.get("content").asText();
                    messages.add(new AiChatMessage(role, messageContent));
                }

                // 如果历史记录超过 8 条，移除最早的一条
                if (messages.size() > 8) {
                    messages.remove(0);
                }
            } catch (Exception e) {
                log.error("解析历史对话失败: {}", history);
            }
        }

        // 添加系统消息和当前用户消息
        messages.add(new AiChatMessage("system", "Hello."));
        messages.add(new AiChatMessage("user", content));

        AiChatRequest request = new AiChatRequest();
        request.setModel("deepseek-chat");
        request.setMessages(messages);
        request.setStream(true);

        return WebClient.builder()
                .baseUrl(PlatformConfig.DEEPSEEK_API)
                .defaultHeader(HttpHeaders.CONTENT_TYPE, MediaType.APPLICATION_JSON_VALUE)
                .defaultHeader("Authorization", PlatformConfig.DEEPSEEK_KEY)
                .build()
                .post()
                .uri("/chat/completions")
                .body(BodyInserters.fromObject(request))
                .retrieve()
                .bodyToFlux(String.class)
                .flatMap(this::handleResult);
    }

    private Flux<String> handleResult(String result) {
        if ("[DONE]".equals(result)) {
            return Flux.empty();
        } else {
            try {
                JsonNode jsonNode = mapper.readTree(result);
                String content = jsonNode.get("choices").get(0).get("delta").get("content").asText();
                return Flux.just(content);
            } catch (Exception e) {
                log.error("解析失败: {}", result);
            }
        }
        return Flux.empty();
    }
}

五、前端
 

<template>
  <div class="chat-container">
    <div class="chat-box" style="height: 1200px; overflow: auto;">
      <!-- 遍历消息列表 -->
      <div v-for="(message, index) in messages" :key="index" class="message-item">
        <!-- 用户消息 -->
        <div v-if="message.role === 'user'" class="user-message">
          <div class="bubble user">{{ message.content }}</div>
        </div>
        <!-- AI 消息 -->
        <div v-else class="assistant-message">
          <div class="bubble assistant">{{ message.content }}</div>
        </div>
      </div>
    </div>
    <div style="display: flex; flex-wrap: wrap;">
      <div v-for="item in QAndAList" :key="item.problem" style="margin: 5px;">
        <el-button class="button-color" @click="CheckProblem(item.problem)">{{item.problem}}</el-button>
      </div>
    </div>
    <div class="input-container">
      <el-input type="textarea" :rows="4" placeholder="请输入您的问题..." class="message-input" v-model="content" @keyup.enter.native="submit"></el-input>
      <el-button @click="submit" class="send-button" :disabled="isButtonDisabled">
        <i style="font-size: 20px" class="el-icon-position"></i>
      </el-button>
    </div>
  </div>
</template>


<script>
import {selectCustomQAndAList, selectCutomQAndA} from "@/api/work/CutomQA";

export default {
  name: "ChatWindow",
  data() {
    return {
      content: "",
      messages: [], // 存储对话内容
      eventSource: null,
      awaitingResponse: false, // 标志是否正在等待回答
      fullResponse: "", // 存储完整的回答
      isButtonDisabled: false, // 控制按钮禁用状态
      QAndAList:[]  //全部问题集合
    };
  },
  created() {
    this.getCutomQAndA();
  },
  methods: {
    //点击问题按钮
    CheckProblem(Q){
      this.messages.push({
        role: "user",
        content: Q
      });
      // 使用 setTimeout 延迟 1 秒执行 为实现对话效果
      setTimeout(() => {
        selectCutomQAndA(Q).then(rep => {
          this.messages.push({
            role: "assistant",
            content: rep.data.answer
          });
        })
      }, 1000); // 1000 毫秒 = 1 秒
    },
    //获取所有问题
    getCutomQAndA(){
      selectCustomQAndAList().then(rep => {
          this.QAndAList = rep.data
      })
    },
    // 为实现页面流式输出效果，实时更新对话框
    updateLastAssistantMessage(content) {
      const lastMessageIndex = this.messages.length - 1;
      if (lastMessageIndex >= 0 && this.messages[lastMessageIndex].role === 'assistant') {
        this.messages[lastMessageIndex].content = content;
      }
    },
    // 添加ai对话
    addAssistantMessage(content) {
      this.messages.push({
        role: 'assistant',
        content: content
      });

      // 如果消息记录超过 8 条，移除最早的一条
      if (this.messages.length > 8) {
        this.messages.shift();
      }
    },
    // 发送
    submit() {
      if (!this.content) {
        alert("没有输入内容");
        return;
      }

      // 添加用户消息
      this.messages.push({ role: "user", content: this.content });

      // 如果消息记录超过 8 条，移除最早的一条
      if (this.messages.length > 8) {
        this.messages.shift();
      }

      // 禁用按钮
      this.isButtonDisabled = true;

      // 添加一个空的助手消息，用于后续更新
      this.addAssistantMessage("");

      // 重置标志和存储
      this.awaitingResponse = true;
      this.fullResponse = "";

      // 将对话历史转换为 JSON 字符串
      const history = JSON.stringify(this.messages);

      // 创建新的 EventSource 连接
      let eventSource = new EventSource(
        `http://localhost:8890/deepseek/chatCompletions?content=${encodeURIComponent(this.content)}&history=${encodeURIComponent(history)}`
      );
      this.eventSource = eventSource;

      eventSource.onopen = () => {
        console.log("onopen 连接成功");
      };

      eventSource.onerror = (e) => {
        console.log("onerror 连接断开", e);
        this.awaitingResponse = false;
        this.isButtonDisabled = false; // 解除按钮禁用
        this.eventSource.close(); // 关闭连接，不再自动重连
      };

      eventSource.onmessage = (e) => {
        console.log("收到消息: ", e.data);
        const message = e.data.trim();
        if (message !== "") {
          this.fullResponse += message; // 拼接回答
          this.updateLastAssistantMessage(this.fullResponse); // 更新最后一个对话框的内容
        } else {
          this.awaitingResponse = false; // 收到空消息，表示回答结束
          this.isButtonDisabled = false; // 解除按钮禁用
        }
      };
      // 初始化输入框
      this.content = "";
    },
  },
};
</script>
<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 40px);
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.chat-box {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}

.message-item {
  margin-bottom: 10px;
}

/* 用户消息靠右 */
.user-message {
  display: flex;
  justify-content: flex-end; /* 靠右对齐 */
}

/* AI 消息靠左 */
.assistant-message {
  display: flex;
  justify-content: flex-start; /* 靠左对齐 */
}

/* 消息气泡样式 */
.bubble {
  max-width: 70%;
  padding: 10px;
  border-radius: 10px;
}

/* 用户消息气泡样式 */
.user {
  background-color: #e0f7fa; /* 用户消息背景色 */
  margin-left: auto; /* 靠右对齐 */
}

/* AI 消息气泡样式 */
.assistant {
  background-color: #f5f5f5; /* AI 消息背景色 */
  margin-right: auto; /* 靠左对齐 */
}

/* 输入框样式 */
.message-input {
  flex: 1;
  font-size: 14px;
}

/* 输入框样式 */
.message-input:disabled,
.send-button:disabled {
   opacity: 0.6;
   cursor: not-allowed;
}

/* 发送按钮样式 */
.send-button {
  padding: 0 20px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

/* 输入框样式 */
.input-container {
  display: flex;
  gap: 10px;
}

/* 问题按钮样式 */
.button-color{
  background: #8eeeb0;
  color: #FFFFFF;
}
</style>

结束

10分钟上手DeepSeek开发：SpringBoot + Vue2快速构建AI对话系统
s13166803785的博客
03-07 144
DeepSeek作为新一代大语言模型（LLM），支持API调用，适用于多种AI应用。本文将介绍如何结合SpringBoot后端和Vue2前端，快速构建一个AI对话系统。本文展示了如何用SpringBoot和Vue2快速搭建一个基于DeepSeek API的AI对话系统，适用于企业内部知识库、智能客服等场景。
Spring-AI与DeepSeek：硅基流动下的AI开发新潮流
xiatian_win123的博客
02-10 3152
在人工智能蓬勃发展的今天，Spring-AI、DeepSeek 以及硅基流动各自发挥着独特而关键的作用，共同推动着 AI 开发的进步。Spring-AI 作为 Java 开发者的得力助手，以其简化 AI 集成、提高开发效率、跨平台兼容性强等优势，为 Java 开发者打开了通往 AI 世界的大门，让他们能够在熟悉的开发环境中，轻松实现 AI 功能的集成与创新。DeepSeek 则凭借其强大的技术实力和丰富的应用成果，在大语言模型领域崭露头角。
Springboot3+Vue3实现副业（创业）智能语音项目开发17章
05-11
下面给大家讲讲关于Springboot3+Vue3实现副业（创业）智能语音项目开发的整个操作流程，希望对大家的学习有所帮助！ 一、Vue 3 的操作流程和执行步骤 2.1 安装Vue CLI 在开始使用Vue 3之前，首先需要安装Vue CLI。通过命令行运行npm install -g @vue/cli来进行安装。 2.2 创建Vue项目 运行vue create project-name(你的项目名称)命令来创建一个新的Vue项目。在项目创建过程中，可以选择使用默认配置或者手动配置项目。 2.3 编写Vue组件 在Vue项目中，我们可以使用Vue的单文件组件（.vue文件）来编写前端组件。通过Vue的语法，我们可以实现各种交互和数据绑定。 2.4 运行Vue项目 在项目根目录下运行npm run serve命令，即可启动Vue的开发服务器，并在浏览器中查看项目运行效果。
Spring Boot整合DeepSeek实现AI对话
chengpei147的博客
02-08 4678
而SpringBoot 3.2.x 和 3.3.x依赖的JDK版本最低应该也是JDK17，所以这里演示整合的代码都是基于spring boot 3.3.8 以及 JDK17。Spring 是一个支持 Java 开发的框架，而 Spring AI 使得 Java 开发人员能够更容易地构建、管理和集成人工智能模型和机器学习功能。其他也就一样了，只是把地址换成了本地ollama的服务地址，api-key不需要了但是也不能不填，不填会报错，模型就配置本地有的模型即可。，就可以在需要的地方注入。
SpringBoot对接DeepSeek实现流式对话并存储对话记录到数据库
李逍遥的博客
03-19 897
SpringBoot对接DeepSeek实现流式对话并存储对话记录到数据库
Spring Boot3+Vue2极速整合: 10分钟搭建DeepSeek AI对话系统
微信公众号: 后端码匠
02-22 1893
通过本文的实践，我们成功搭建了一个基于 Spring Boot 和 Vue 的 AI 对话系统。实时对话 基于 WebSocket 实现流式响应，带来更流畅的交互体验；优雅展示 支持 Markdown 格式渲染，让消息显示更清晰直观；稳定可靠 内置完善的错误处理机制，确保系统高效稳定运行；易于扩展 代码结构清晰，方便后续功能拓展和优化。这一系统不仅能够用于智能客服 在线问答等场景，还能结合大模型能力，进一步提升智能化水平。
springboot+springai调用deepseek实现与大模型对话聊天
咖啡因依赖症晚期
03-14 961
Spring AI 是 Spring 官方团队在 2023 年底推出的新项目，旨在简化在 Spring 应用中集成生成式 AI（如 OpenAI、Hugging Face 等大语言模型）的开发流程。它提供了统一的 API 接口，使得开发者可以方便地与各种 AI 服务进行交互，包括大语言模型、图像识别、语音识别等。Spring AI 的核心优势在于其与 Spring 框架的无缝集成，以及对多种 AI 服务的广泛支持，能够大大提高开发效率，降低开发成本。
Spring Boot中接入DeepSeek的流式输出
最新发布
m0_57801749的博客
04-16 396
【代码】Java流式接入DeepSeek。
Vue2实现流式输出–新手教程
weixin_51649510的博客
05-07 8501
即服务器推送事件，是一种基于HTTP的服务器推送技术。它允许服务器实时地向客户端推送数据。在SSE中，客户端通过创建一个EventSource对象来监听来自服务器的事件流。一旦连接建立，服务器就可以开始发送事件到客户端。客户端可以通过监听特定的事件类型来处理这些消息，并在需要时执行相应的操作。SSE工作原理客户端通过在HTTP请求中设置来表明其期望接收SSE。服务器响应一个持久连接，通常使用HTTP的和头。服务器通过这个连接发送事件流，每条事件由三部分组成：•event。
基于vue3.5+deepseek+vant4+markdown仿DeepSeek-R1流式输出ai聊天界面
码农ICoding
03-17 3572
基于Vite6+Vue3+Vant4+Markdown接入整合DeepSeek打造一款高颜值流式效果代码高亮AI聊天智能对话助手。支持移动端和PC端模板。
DeepSeek API 调用 - Spring Boot 实现
web13765607643的博客
03-05 1191
Spring Boot 实现提供了一个健壮、可扩展的 DeepSeek API 调用方案，利用响应式编程提供高效的流式对话体验。
Vue+（SSE）EventSource实现流式输出
qq_51201589的博客
07-16 4117
ai一键获取数据，fetch-event-source实现流式输出
SpringBoot Vue ai
03-28
引用[4]则提到了Spring Boot3和Vue2快速整合搭建DeepSeek AI对话系统，可能涉及前后端的具体实现。这两个引用应该是最直接相关的。 接下来，我需要整理出一个结构清晰的回答，分步骤说明集成方法，并结合案例。可能...
ruoyi-AI调用本地局域网deepseek
无心
03-11 928
deepseek ruoyi AI JAVA
放弃Websocket，使用 SSE 仅用几行代码就能搞定这些功能！
芋艿V
01-24 104
???? 这是一个或许对你有用的社群???? 一对一交流/面试小册/简历优化/求职解惑，欢迎加入「芋道快速开发平台」知识星球。下面是星球提供的部分资料：《项目实战（视频）》：从书中学，往事上“练”《互联网高频面试题》：面朝简历学习，春暖花开《架构 x 系统设计》：摧枯拉朽，掌控面试高频场景题《精进 Java 学习指南》：系统学习，互联网主流技术栈《必读 Java 源码专栏》：知其然，知其所以然????这是一个或许...
在Spring Boot项目中接入DeepSeek深度求索，感觉笨笨的呢
勤于笔记，成于点滴。
03-14 3179
在当今快速发展的数据驱动时代，企业越来越重视数据的价值。为了更好地理解和利用数据，许多公司开始采用先进的数据分析和搜索技术。DeepSeek（深度求索）就是一款强大的深度学习驱动的搜索和推荐系统，可以帮助企业高效地处理和分析大规模数据。本文将详细介绍如何在Spring Boot项目中接入DeepSeek，帮助各位大大快速上手并利用其强大的功能。
大模型入门实战：通过 HuggingFace 调用 Llama3
python12345_的博客
01-10 1461
至此，我们成功演示了如何通过 Hugging Face 的 Transformers 调用 Llama 模型，并获取了模型的回答。但是如果你的需求只是简单地调用模型，而无需进行微调或复杂的部署，可以尝试使用 Ollama。它不仅操作更加便捷，还提供了开箱即用的 RESTful 接口，适合快速集成到生产环境中。下一篇，我将会讲解如何通过 Ollama 下载部署 Llama 模型并调用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值