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

后端小肥肠 2025-02-20 11:20:51编程技术

167

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秘钥可以用硅基流动来获取，不知道具体方法的可以参考我的另外一篇博客。

2.1. 后端项目初始化

创建maven工程:

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

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