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

news2025/5/13 23:05:32

前言

在生成式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.6+；
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
public class 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>
...