20分鐘上手DeepSeek開發：SpringBoot + Vue2快速構建AI對話系統

前言

在生成式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"?>
<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>
<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><dependency><groupId>org.springframework.ai</groupId><artifactId>spring-ai-bom</artifactId><version>${spring-ai.version}</version><type>pom</type><scope>import</scope></dependency>
</dependencies>
<build><plugins><plugin><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins>
</build>
</project>

yml配置文件

server:port: 8080
spring:ai:ollama:base-url: http://localhost:11434chat:model: deepseek-r1:8bapplication:name: codingce-deepspeekwebflux:base-path: /codec:max-in-memory-size: 10MB
logging:level:cn.com.codingce.deepseek: DEBUGorg.springframework.web: INFO

核心服務實現

DeepSeekService 是一個核心服務類，主要負責處理與 Ollama 的通信和數據處理。整個服務采用響應式編程模式（Flux），實現非阻塞式處理，提高系統性能。同時通過日志記錄，確保服務的可靠性和穩定性。

package cn.com.codingce.deepseek.service;import cn.com.codingce.deepseek.model.Message;
import cn.com.codingce.deepseek.model.MessageType;
import cn.com.codingce.deepseek.model.OllamaResponse;
import cn.com.codingce.deepseek.model.StreamResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
import lombok.AllArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.ai.ollama.OllamaClient;
import org.springframework.ai.ollama.OllamaException;
import org.springframework.stereotype.Service;
import reactor.core.publisher.Flux;
import reactor.core.publisher.Mono;import java.io.IOException;
import java.util.ArrayList;
import java.util.List;@Service
@AllArgsConstructor
@Slf4j
public class DeepSeekService {private final OllamaClient ollamaClient;private final ObjectMapper objectMapper;public Flux<Message> generateResponse(String prompt) {return Flux.create(sink -> {List<String> messages = new ArrayList<>();messages.add(prompt);try {ollamaClient.chat("deepseek-r1:8b", messages, response -> {try {OllamaResponse ollamaResponse = objectMapper.readValue(response, OllamaResponse.class);String content = ollamaResponse.getContent();if (content != null && !content.isEmpty()) {sink.next(new Message(MessageType.ASSISTANT, content));}} catch (IOException e) {log.error("Error processing Ollama response", e);sink.error(e);}}, error -> {log.error("Error from Ollama", error);sink.error(new RuntimeException("Error from Ollama", error));}, () -> {log.info("Ollama chat completed");sink.complete();});} catch (OllamaException e) {log.error("Error initiating Ollama chat", e);sink.error(e);}});}
}

WebSocket控制器

WebSocketController 是一個 WebSocket 控制器，用于處理前端與后端之間的實時通信。它支持消息的接收和發送，并將用戶的消息傳遞給 DeepSeekService，然后將 AI 的響應實時推送給前端。

package cn.com.codingce.deepseek.controller;import cn.com.codingce.deepseek.model.Message;
import cn.com.codingce.deepseek.service.DeepSeekService;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;
import reactor.core.publisher.FluxSink;import java.util.concurrent.ConcurrentHashMap;@Controller
public class WebSocketController {private final DeepSeekService deepSeekService;private final ConcurrentHashMap<String, FluxSink<Message>> sinks = new ConcurrentHashMap<>();public WebSocketController(DeepSeekService deepSeekService) {this.deepSeekService = deepSeekService;}@MessageMapping("/chat")public void receiveMessage(String sessionId, String message) {sinks.putIfAbsent(sessionId, Flux.sink());FluxSink<Message> sink = sinks.get(sessionId);deepSeekService.generateResponse(message).subscribe(sink::next, sink::error, sink::complete);}@SendTo("/topic/messages/{sessionId}")public Flux<Message> sendMessage(String sessionId) {return Flux.create(sinks.get(sessionId));}
}

前端項目初始化

項目結構

前端項目基于 Vue2 構建，主要包含以下目錄結構：

src/
├── assets/
├── components/
│   └── ChatWindow.vue
├── App.vue
├── main.js

安裝依賴

在項目根目錄下運行以下命令安裝依賴：

npm install

主組件

App.vue 是主組件，用于加載聊天窗口組件。

<template><div id="app"><ChatWindow /></div>
</template><script>
import ChatWindow from './components/ChatWindow.vue';export default {name: 'App',components: {ChatWindow}
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

聊天窗口組件

ChatWindow.vue 是聊天窗口組件，負責顯示消息和處理用戶輸入。

<template><div class="chat-window"><div class="messages"><div v-for="message in messages" :key="message.id" class="message"><div :class="['message-content', { 'assistant': message.type === 'assistant' }]"><div v-html="message.content"></div></div></div></div><input v-model="inputMessage" @keyup.enter="sendMessage" placeholder="Type a message..." /></div>
</template><script>
import { WebSocketSubject } from 'rxjs/webSocket';
import DOMPurify from 'dompurify';export default {name: 'ChatWindow',data() {return {messages: [],inputMessage: '',sessionId: Date.now().toString(),ws: null};},mounted() {this.connectWebSocket();},methods: {connectWebSocket() {this.ws = new WebSocketSubject(`ws://localhost:8080/ws/chat/${this.sessionId}`);this.ws.subscribe((message) => {const sanitizedMessage = DOMPurify.sanitize(message.content);this.messages.push({ ...message, content: sanitizedMessage });},(error) => console.error('WebSocket error:', error),() => console.log('WebSocket closed'));},sendMessage() {if (this.inputMessage.trim()) {this.ws.next(this.inputMessage);this.messages.push({ id: Date.now(), type: 'user', content: this.inputMessage });this.inputMessage = '';}}},beforeDestroy() {if (this.ws) {this.ws.complete();}}
};
</script><style scoped>
.chat-window {width: 100%;max-width: 600px;margin: 0 auto;border: 1px solid #ccc;padding: 10px;border-radius: 5px;
}.messages {height: 400px;overflow-y: scroll;margin-bottom: 10px;
}.message {margin-bottom: 10px;
}.message-content {padding: 5px;border-radius: 5px;
}.message-content.assistant {background-color: #f0f0f0;
}input {width: 100%;padding: 10px;box-sizing: border-box;
}
</style>