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

news2025/4/8 10:41:12

作者：后端小肥肠

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 内容添加了详细的样式支持，包括标题、代码块、表格、列表等多种格式的样式定义，确保内容展示的专业性和美观性。整体设计注重用户体验，包含了状态提示、错误处理等完善机制。