pom依賴

yml 配置文件

核心服務實現

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

前端項目初始化

聊天組件ChatCodingce.vue

開發采用 flex 布局、基于 WebSocket 進行實時通信、針對不同類型的消息等。采用 flex 布局，包含消息顯示區、輸入區和連接狀態提示區。消息顯示區支持滾動，并能自動定位到最新消息；輸入區集成了輸入框和發送按鈕，提供便捷的交互體驗；狀態區則實時顯示 WebSocket 連接狀態，讓用戶隨時掌握通信情況；基于 WebSocket 進行實時通信，initWebSocket 方法負責建立連接，并完整管理連接生命周期，包括連接成功、消息接收、錯誤處理和斷線重連等。消息的發送與接收分別通過 sendMessage 和 appendMessage 方法處理，并支持區分用戶消息和機器人回復。此外，組件使用 marked 庫渲染 Markdown 格式，并結合 DOMPurify 進行 XSS 過濾，確保消息展示安全可靠；針對不同類型的消息（用戶消息、機器人回復、錯誤提示）定義了個性化樣式，并利用 :deep 選擇器為 Markdown 內容提供精細化樣式支持，包括標題、代碼塊、表格、列表等，確保內容展示既專業又美觀。整體設計注重用戶體驗，不僅優化了交互細節，還完善了狀態提示和錯誤處理機制，使聊天體驗更加流暢。

效果展示

后端

image

上圖顯示了項目運行時的日志信息，記錄了 WebSocket 連接和 Ollama 的交互過程，包括消息接收和響應的詳細日志。

前端

image

上圖為 AI 對話系統的用戶界面截圖。整個界面支持 Markdown 格式的渲染，使得回答內容層次分明，易于閱讀。

源碼獲取

關注gzh后端碼匠，回復"DeepSeek"消息即可獲取完整源碼。

結語

通過本文的實踐，我們成功搭建了一個基于 Spring Boot 和 Vue 的 AI 對話系統。該系統具備以下特點：

這一系統不僅能夠用于智能客服、在線問答等場景，還能結合大模型能力，進一步提升智能化水平。未來，我們可以繼續優化性能，增強上下文理解能力，并探索更多創新應用場景，讓 AI 交互變得更加智能自然。

原文轉載自：https://mp.weixin.qq.com/s/_uVBI6Ub4-f-xiybVYfg4g

上一篇：

IT咨詢顧問的關鍵抓手-DeepSeek+企業架構-快速的熟悉和洞察一個新的行業

下一篇：

DeepSeek API 升級，支持續寫、FIM、Function Calling、JSON Output
#你可能也喜歡這些API文章!

我們有何不同？

API服務商零注冊

多API并行試用

數據驅動選型，提升決策效率

查看全部API→
??

熱門場景實測，選對API

#AI文本生成大模型API

對比大模型API的內容創意新穎性、情感共鳴力、商業轉化潛力

25個渠道
一鍵對比試用API 限時免費

#AI深度推理大模型API

對比大模型API的邏輯推理準確性、分析深度、可視化建議合理性

10個渠道
一鍵對比試用API 限時免費