Spring Boot3+Vue2极速整合: 10分钟搭建DeepSeek AI对话系统

在生成式AI技术蓬勃发展的今天，大语言模型已成为企业智能化转型和个人效率提升的核心驱动力。作为国产大模型的优秀代表，DeepSeek凭借其卓越的中文语义理解能力和开发者友好的API生态，正在成为构建本土化AI应用的首选平台。本文将以Spring Boot3+Vue2全栈技术为基础，手把手带你打造一个具备以下特性的AI对话系统：实时流式对话交互体验；支持Markdown代码块/表格的专业级内容渲染；

竹林幽深

49人浏览 · 2025-04-22 08:53:42

竹林幽深 · 2025-04-22 08:53:42 发布

点击关注，与你共同成长！

前言

在生成式AI技术蓬勃发展的今天，大语言模型已成为企业智能化转型和个人效率提升的核心驱动力。作为国产大模型的优秀代表，DeepSeek凭借其卓越的中文语义理解能力和开发者友好的API生态，正在成为构建本土化AI应用的首选平台。

本文将以Spring Boot3+Vue2全栈技术为基础，手把手带你打造一个具备以下特性的AI对话系统：

实时流式对话交互体验；
支持Markdown代码块/表格的专业级内容渲染；
前端安全防护与响应式界面设计；
高扩展性的API接入架构。

为什么选择DeepSeek？

中文语境专家：针对中文语法特点优化，歧义识别准确率提升40%；
极速响应：国内服务器部署，平均API延迟<800ms；
成本可控：免费试用+阶梯定价模式，个人项目月均成本低至5元；
流式输出：支持chunked数据传输，避免用户长时间等待。

技术架构解析

后端技术栈

SpringBoot 3.x：快速构建RESTful API；
WebFlux：响应式流处理框架，QPS可达3000+；
Lombok：通过注解简化POJO模型。

前端技术栈

Vue2.x；
WebSocket：双向实时通信支持；
XSS防御：DOMPurify过滤恶意脚本。

环境准备

JDK 17+；
Node.js 12+；
Maven 3.9+；
Ollama。

后端项目初始化

pom依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>3.3.8</version>
<relativePath/><!-- lookup parent from repository -->
</parent>
<groupId>cn.com.codingce</groupId>
<artifactId>deepseek</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>deepseek</name>
<description>微信公众号: 后端码匠</description>
<url/>
<licenses>
<license/>
</licenses>
<developers>
<developer/>
</developers>
<scm>
<connection/>
<developerConnection/>
<tag/>
<url/>
</scm>
<properties>
<java.version>17</java.version>
<spring-ai.version>1.0.0-M5</spring-ai.version>
</properties>
<dependencies>
<dependency>
   <groupId>org.springframework.ai</groupId>
   <artifactId>spring-ai-ollama-spring-boot-starter</artifactId>
</dependency>

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-test</artifactId>
   <scope>test</scope>
</dependency>

<dependency>
   <groupId>org.projectlombok</groupId>
   <artifactId>lombok</artifactId>
</dependency>

<dependency>
   <groupId>com.fasterxml.jackson.core</groupId>
   <artifactId>jackson-databind</artifactId>
</dependency>

<dependency>
   <groupId>org.apache.commons</groupId>
   <artifactId>commons-lang3</artifactId>
</dependency>

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

</dependencies>
<dependencyManagement>
<dependencies>
   <dependency>
    <groupId>org.springframework.ai</groupId>
    <artifactId>spring-ai-bom</artifactId>
    <version>${spring-ai.version}</version>
    <type>pom</type>
    <scope>import</scope>
   </dependency>
</dependencies>
</dependencyManagement>

<build>
<plugins>
   <plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
   </plugin>
</plugins>
</build>

</project>

yml 配置文件

server:
  port:8080

spring:
ai:
    ollama:
      base-url:http://localhost:11434
      chat:
        model:deepseek-r1:8b
application:
    name:codingce-deepspeek
webflux:
    base-path:/
codec:
    max-in-memory-size:10MB

logging:
level:
    cn.com.codingce.deepseek:DEBUG
    org.springframework.web:INFO

核心服务实现

DeepSeekService 是一个核心服务类，主要负责处理与 ollama 的通信和数据处理。

整个服务采用响应式编程模式（Flux），实现非阻塞式处理，提高系统性能。同时通过日志记录，确保服务的可靠性和稳定性。

package cn.com.codingce.deepseek.service;

import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.ai.ollama.OllamaChatModel;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import reactor.core.publisher.Flux;

/**
 * @author 后端码匠
 */
@Slf4j
@Service
@RequiredArgsConstructor
publicclass DeepSeekService {

    @Autowired
    private OllamaChatModel ollamaChatModel;

    public Flux<String> handleChatWebSocket(String question) {
        return sendChatRequest(question)
                .doOnNext(response -> log.info("handleChatWebSocket 发送响应: {}", response))
                .onErrorResume(e -> {
                    log.error("handleChatWebSocket WebSocket通信错误: {}", e.getMessage());
                    return Flux.just("抱歉, 服务器处理请求时发生错误, 请稍后重试.");
                });
    }

    public Flux<String> sendChatRequest(String question) {

        String res = ollamaChatModel.call(question);

        log.info("sendChatRequest 回答: {}", res);

        return Flux.just(res);
    }

}

前端项目初始化

vue create codingce-deepspeek-front
cd codingce-deepspeek-front
npm install sockjs-client marked dompurify

聊天组件ChatCodingce.vue开发

采用 flex 布局、基于 WebSocket 进行实时通信、针对不同类型的消息等。

采用 flex 布局，包含消息显示区、输入区和连接状态提示区。消息显示区支持滚动，并能自动定位到最新消息；输入区集成了输入框和发送按钮，提供便捷的交互体验；状态区则实时显示 WebSocket 连接状态，让用户随时掌握通信情况；
基于 WebSocket 进行实时通信，initWebSocket 方法负责建立连接，并完整管理连接生命周期，包括连接成功、消息接收、错误处理和断线重连等。消息的发送与接收分别通过 sendMessage 和 appendMessage 方法处理，并支持区分用户消息和机器人回复。此外，组件使用 marked 库渲染 Markdown 格式，并结合 DOMPurify 进行 XSS 过滤，确保消息展示安全可靠；
针对不同类型的消息（用户消息、机器人回复、错误提示）定义了个性化样式，并利用 :deep 选择器为 Markdown 内容提供精细化样式支持，包括标题、代码块、表格、列表等，确保内容展示既专业又美观。整体设计注重用户体验，不仅优化了交互细节，还完善了状态提示和错误处理机制，使聊天体验更加流畅。

<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 class="input-container">
      <input 
        v-model="inputMessage" 
        @keyup.enter="sendMessage"
        placeholder="输入您的问题...(微信公众号:后端码匠)"
        class="message-input"
        :disabled="!isConnected"
      >
      <button 
        @click="sendMessage" 
        class="send-button"
        :disabled="!isConnected"
      >
        发送
      </button>
    </div>
    <div v-if="!isConnected" class="connection-status">
      连接已断开，正在重新连接...
    </div>
</div>
</template>
...