当前位置：首页 > news >正文

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

news 2025/2/24 19:25:23

前言

在生成式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: 8080spring:ai:ollama:base-url: http://localhost:11434chat:model: deepseek-r1:8bapplication:name: codingce-deepspeekwebflux:base-path: /codec:max-in-memory-size: 10MBlogging:level:cn.com.codingce.deepseek: DEBUGorg.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 {@Autowiredprivate 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>
...