基于SpringBoot+Vue實現(xiàn)DeepSeek對話效果的詳細(xì)步驟
更新時間：2025年07月20日 08:30:19 作者：奇妙智能
本文詳細(xì)介紹了使用SpringBoot和Vue構(gòu)建對話系統(tǒng),包含API設(shè)計、聊天界面開發(fā)、前后端集成及WebSocket優(yōu)化,實現(xiàn)類似DeepSeek的交互效果,需要的朋友可以參考下
Spring Boot + Vue 實現(xiàn) DeepSeek 對話效果詳細(xì)步驟
一、整體架構(gòu)設(shè)計
我們需要構(gòu)建一個前后端分離的應(yīng)用：
- ??后端??：Spring Boot 提供 API 接口，處理與 AI 模型的交互
- ??前端??：Vue 實現(xiàn)聊天界面，展示對話內(nèi)容并發(fā)送用戶輸入
二、后端實現(xiàn) (Spring Boot)
1. 創(chuàng)建 Spring Boot 項目
<!-- pom.xml 主要依賴 -->
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>com.h2database</groupId>
<artifactId>h2</artifactId>
<scope>runtime</scope>
</dependency>
<!-- 如果需要持久化存儲 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
</dependencies>
2. 設(shè)計 API 接口
// 對話控制器
@RestController
@RequestMapping("/api/chat")
public class ChatController {
@Autowired
private ChatService chatService;
@PostMapping("/message")
public ResponseEntity<ChatResponse> sendMessage(@RequestBody ChatRequest request) {
ChatResponse response = chatService.processMessage(request);
return ResponseEntity.ok(response);
}
@GetMapping("/history/{sessionId}")
public ResponseEntity<List<ChatMessage>> getHistory(@PathVariable String sessionId) {
List<ChatMessage> history = chatService.getChatHistory(sessionId);
return ResponseEntity.ok(history);
}
}
3. 定義數(shù)據(jù)傳輸對象
public class ChatRequest {
private String sessionId;
private String message;
// getter, setter
}
public class ChatResponse {
private String message;
private String sessionId;
// getter, setter
}
public class ChatMessage {
private String role; // "user" 或 "assistant"
private String content;
// getter, setter
}
4. 實現(xiàn)對話服務(wù)
@Service
public class ChatService {
// 可以使用 Map 臨時存儲會話，生產(chǎn)環(huán)境建議使用數(shù)據(jù)庫
private Map<String, List<ChatMessage>> chatSessions = new ConcurrentHashMap<>();
// 處理用戶消息
public ChatResponse processMessage(ChatRequest request) {
String sessionId = request.getSessionId();
if (sessionId == null || sessionId.isEmpty()) {
sessionId = UUID.randomUUID().toString();
}
String userMessage = request.getMessage();
// 保存用戶消息
ChatMessage userMsg = new ChatMessage("user", userMessage);
// 調(diào)用 AI 模型 API
String aiResponse = callAIApi(userMessage, sessionId);
// 保存 AI 回復(fù)
ChatMessage aiMsg = new ChatMessage("assistant", aiResponse);
// 更新會話歷史
chatSessions.computeIfAbsent(sessionId, k -> new ArrayList<>()).add(userMsg);
chatSessions.get(sessionId).add(aiMsg);
return new ChatResponse(aiResponse, sessionId);
}
// 獲取聊天歷史
public List<ChatMessage> getChatHistory(String sessionId) {
return chatSessions.getOrDefault(sessionId, Collections.emptyList());
}
// 調(diào)用 AI 模型 API 的方法
private String callAIApi(String message, String sessionId) {
// 這里實現(xiàn)與 DeepSeek API 的實際交互
// 可以使用 RestTemplate 或 WebClient
// 示例代碼:
try {
// 實際開發(fā)中替換為真實 API 調(diào)用
return "這是 AI 對 "" + message + "" 的回復(fù)";
} catch (Exception e) {
return "抱歉，我遇到了一些問題，請稍后再試。";
}
}
}
5. 配置 CORS
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**")
.allowedOrigins("http://localhost:5173") // Vue 默認(rèn)端口
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowCredentials(true);
}
}
三、前端實現(xiàn) (Vue)
1. 創(chuàng)建 Vue 項目
# 使用 npm npm create vue@latest my-chat-app cd my-chat-app npm install # 安裝必要的依賴 npm install axios
2. 創(chuàng)建聊天組件
<!-- ChatWindow.vue -->
<template>
<div class="chat-container">
<div class="chat-header">
<h2>AI 助手對話</h2>
</div>
<div class="chat-messages" ref="messageContainer">
<div v-for="(msg, index) in messages" :key="index"
:class="['message', msg.role === 'user' ? 'user-message' : 'assistant-message']">
<div class="message-content">
{{ msg.content }}
</div>
</div>
<div v-if="loading" class="message assistant-message">
<div class="message-content">
<span class="loading-dots">思考中<span>.</span><span>.</span><span>.</span></span>
</div>
</div>
</div>
<div class="chat-input">
<textarea
v-model="userInput"
placeholder="請輸入您的問題..."
@keyup.enter.ctrl="sendMessage"
></textarea>
<button @click="sendMessage" :disabled="loading || !userInput.trim()">
發(fā)送
</button>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'ChatWindow',
data() {
return {
messages: [],
userInput: '',
loading: false,
sessionId: this.generateSessionId(),
apiBaseUrl: 'http://localhost:8080/api/chat'
};
},
methods: {
generateSessionId() {
return Math.random().toString(36).substring(2, 15);
},
async sendMessage() {
if (!this.userInput.trim() || this.loading) return;
const userMessage = this.userInput.trim();
this.messages.push({ role: 'user', content: userMessage });
this.userInput = '';
this.loading = true;
// 滾動到底部
this.$nextTick(() => {
this.scrollToBottom();
});
try {
const response = await axios.post(`${this.apiBaseUrl}/message`, {
sessionId: this.sessionId,
message: userMessage
});
this.messages.push({ role: 'assistant', content: response.data.message });
this.sessionId = response.data.sessionId;
} catch (error) {
console.error('Error sending message:', error);
this.messages.push({
role: 'assistant',
content: '抱歉，發(fā)生了錯誤，請稍后再試。'
});
} finally {
this.loading = false;
this.$nextTick(() => {
this.scrollToBottom();
});
}
},
scrollToBottom() {
if (this.$refs.messageContainer) {
this.$refs.messageContainer.scrollTop = this.$refs.messageContainer.scrollHeight;
}
},
loadHistory() {
axios.get(`${this.apiBaseUrl}/history/${this.sessionId}`)
.then(response => {
this.messages = response.data;
this.$nextTick(() => {
this.scrollToBottom();
});
})
.catch(error => {
console.error('Error loading history:', error);
});
}
},
mounted() {
// 在實際應(yīng)用中，可以從 URL 參數(shù)或本地存儲獲取 sessionId
// this.loadHistory();
}
}
</script>
<style scoped>
.chat-container {
display: flex;
flex-direction: column;
height: 100vh;
max-width: 800px;
margin: 0 auto;
padding: 1rem;
}
.chat-header {
text-align: center;
padding: 1rem 0;
border-bottom: 1px solid #eee;
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.message {
max-width: 75%;
padding: 0.75rem;
border-radius: 0.5rem;
margin-bottom: 0.5rem;
}
.user-message {
align-self: flex-end;
background-color: #e1f5fe;
}
.assistant-message {
align-self: flex-start;
background-color: #f5f5f5;
}
.chat-input {
display: flex;
padding: 1rem 0;
gap: 0.5rem;
}
.chat-input textarea {
flex: 1;
padding: 0.75rem;
border: 1px solid #ddd;
border-radius: 0.5rem;
resize: none;
min-height: 60px;
}
.chat-input button {
padding: 0.75rem 1.5rem;
background-color: #2196f3;
color: white;
border: none;
border-radius: 0.5rem;
cursor: pointer;
}
.chat-input button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.loading-dots span {
animation: loading 1.4s infinite;
display: inline-block;
}
.loading-dots span:nth-child(2) {
animation-delay: 0.2s;
}
.loading-dots span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes loading {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
</style>
3. 在主應(yīng)用中使用聊天組件
<!-- App.vue -->
<template>
<div class="app">
<ChatWindow />
</div>
</template>
<script>
import ChatWindow from './components/ChatWindow.vue'
export default {
name: 'App',
components: {
ChatWindow
}
}
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.app {
width: 100%;
height: 100vh;
}
</style>
四、前后端集成與部署
1. 開發(fā)環(huán)境配置
??啟動后端服務(wù)??
./mvnw spring-boot:run
??啟動前端開發(fā)服務(wù)器??
npm run dev
2. 生產(chǎn)環(huán)境部署
??構(gòu)建前端應(yīng)用??
npm run build
??配置后端服務(wù)提供靜態(tài)文件??
// Spring Boot 配置類
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Value("${frontend.resources.path:${user.home}/my-chat-app/dist}")
private Resource frontendResources;
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/**")
.addResourceLocations("file:" + frontendResources.getFile().getAbsolutePath() + "/")
.resourceChain(true)
.addResolver(new PathResourceResolver() {
@Override
protected Resource getResource(String resourcePath, Resource location) throws IOException {
Resource requestedResource = location.createRelative(resourcePath);
return requestedResource.exists() && requestedResource.isReadable() ? requestedResource
: new ClassPathResource("/static/index.html");
}
});
}
}
??將前端構(gòu)建文件復(fù)制到后端資源目錄??
五、進階優(yōu)化
1. WebSocket 實現(xiàn)實時通信
// 后端 WebSocket 配置
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic");
config.setApplicationDestinationPrefixes("/app");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/ws")
.setAllowedOriginPatterns("*")
.withSockJS();
}
}
// WebSocket 控制器
@Controller
public class WebSocketController {
@Autowired
private ChatService chatService;
@MessageMapping("/chat.sendMessage")
@SendToUser("/queue/reply")
public ChatMessage sendMessage(@Payload ChatMessage chatMessage, Principal principal) {
return chatService.processWebSocketMessage(chatMessage);
}
}
2. 使用 Redis 緩存會話歷史
@Configuration
@EnableRedisHttpSession
public class SessionConfig {
@Bean
public LettuceConnectionFactory connectionFactory() {
return new LettuceConnectionFactory();
}
}
3. 前端連接 WebSocket
// 在 ChatWindow.vue 中添加 WebSocket 連接
export default {
// ... 其他代碼 ...
data() {
return {
// ... 其他數(shù)據(jù) ...
stompClient: null
};
},
methods: {
// ... 其他方法 ...
connectWebSocket() {
const socket = new SockJS(this.apiBaseUrl.replace('/api', ''));
this.stompClient = Stomp.over(socket);
this.stompClient.connect({}, frame => {
console.log('Connected: ' + frame);
this.stompClient.subscribe(`/user/queue/reply`, response => {
const receivedMessage = JSON.parse(response.body);
this.messages.push(receivedMessage);
this.$nextTick(() => {
this.scrollToBottom();
});
});
}, error => {
console.error('WebSocket Error: ' + error);
// 重連邏輯
setTimeout(() => {
this.connectWebSocket();
}, 5000);
});
},
disconnectWebSocket() {
if (this.stompClient !== null) {
this.stompClient.disconnect();
}
},
sendWebSocketMessage() {
if (!this.userInput.trim() || this.loading) return;
const userMessage = this.userInput.trim();
this.stompClient.send("/app/chat.sendMessage", {}, JSON.stringify({
sessionId: this.sessionId,
message: userMessage
}));
this.messages.push({ role: 'user', content: userMessage });
this.userInput = '';
}
},
mounted() {
// ... 其他代碼 ...
this.connectWebSocket();
},
beforeUnmount() {
this.disconnectWebSocket();
}
}
總結(jié)
通過上述步驟，你可以實現(xiàn)一個基于 Spring Boot 和 Vue 的對話系統(tǒng)，類似 DeepSeek 的交互效果。這個實現(xiàn)包含了：
- 后端 API 設(shè)計與實現(xiàn)
- 前端聊天界面設(shè)計
- 會話管理與歷史記錄
- WebSocket 實現(xiàn)實時通信（可選）
- 部署配置
根據(jù)實際需求，你可以進一步擴展功能，如支持 Markdown 渲染、代碼高亮、對話導(dǎo)出等高級特性。
以上就是基于SpringBoot+Vue實現(xiàn)DeepSeek對話效果的詳細(xì)步驟的詳細(xì)內(nèi)容，更多關(guān)于SpringBoot Vue DeepSeek對話的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Spring boot如何配置請求的入?yún)⒑统鰠son數(shù)據(jù)格式
這篇文章主要介紹了spring boot如何配置請求的入?yún)⒑统鰠son數(shù)據(jù)格式,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11
java利用JAXB實現(xiàn)對象和xml互相轉(zhuǎn)換方法與實例詳解
這篇文章主要介紹了java利用JAXB實現(xiàn)對象和xml互相轉(zhuǎn)換方法與實例詳解,需要的朋友可以參考下2020-02-02
jq是一個輕量級的命令行工具，讓你可以非常方便地處理JSON數(shù)據(jù)，如切分、過濾、映射、轉(zhuǎn)化等，就像sed、awk、grep文本處理三劍客一樣，這篇文章主要介紹了超級好用的輕量級JSON處理命令jq,需要的朋友可以參考下2023-01-01
springboot如何接收application/x-www-form-urlencoded類型的請求
這篇文章主要介紹了springboot如何接收application/x-www-form-urlencoded類型的請求，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-11-11
關(guān)于Java中使用jdbc連接數(shù)據(jù)庫中文出現(xiàn)亂碼的問題
這篇文章主要介紹了關(guān)于Java中使用jdbc連接數(shù)據(jù)庫中文出現(xiàn)亂碼的問題,默認(rèn)的編碼和數(shù)據(jù)庫表中的數(shù)據(jù)使用的編碼是不一致的，如果是中文，那么在數(shù)據(jù)庫中執(zhí)行時已經(jīng)是亂碼了,需要的朋友可以參考下2023-04-04
JAVA統(tǒng)計字符串中某個字符出現(xiàn)次數(shù)的方法實現(xiàn)
本文主要介紹了JAVA統(tǒng)計字符串中某個字符出現(xiàn)次數(shù)的方法實現(xiàn),可以循環(huán)使用String的charAt(int index)函數(shù),具有一定的參考價值,感興趣的可以了解一下2023-11-11
Spring Boot如何優(yōu)化內(nèi)嵌的Tomcat示例詳解
spring boot默認(rèn)web程序啟用tomcat內(nèi)嵌容器，監(jiān)聽8080端口，下面這篇文章主要給大家介紹了關(guān)于Spring Boot如何優(yōu)化內(nèi)嵌Tomcat的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09
詳解大數(shù)據(jù)處理引擎Flink內(nèi)存管理
Flink是jvm之上的大數(shù)據(jù)處理引擎，jvm存在java對象存儲密度低、full gc時消耗性能，gc存在stw的問題，同時omm時會影響穩(wěn)定性。針對頻繁序列化和反序列化問題flink使用堆內(nèi)堆外內(nèi)存可以直接在一些場景下操作二進制數(shù)據(jù)，減少序列化反序列化消耗。本文帶你詳細(xì)理解其原理。2021-05-05
JWT?+?Spring?Security?/?OAuth2.0:微服務(wù)統(tǒng)一登錄、鑒權(quán)、單點登錄全解析
本文介紹了微服務(wù)架構(gòu)中基于JWT、SpringSecurity和OAuth2.0實現(xiàn)統(tǒng)一身份認(rèn)證與鑒權(quán)的方法,接著詳細(xì)介紹了JWT、SpringSecurity和OAuth2.0的工作原理和核心概念,然后通過實操步驟展示了如何在Spring?Boot中實現(xiàn)微服務(wù)統(tǒng)一登錄與鑒權(quán)2026-04-04
這篇文章主要為大家詳細(xì)介紹了Java高級應(yīng)用之斗地主游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05