【實戰教程】零基礎搭建DeepSeek大模型聊天系統

🔥 本文詳細講解如何從零搭建一個完整的DeepSeek AI對話系統，包括Spring Boot后端和React前端，適合AI開發入門者快速上手。即使你是編程萌新，也能輕松搭建自己的AI助手！

📚博主匠心之作，強推專欄：

JAVA集合專欄【夜話集】
JVM知識專欄
數據庫sql理論與實戰【博主踩坑之道】
小游戲開發【博主強推匠心之作拿來即用無門檻】

DeepSeek AI對話系統

文章目錄

- 項目介紹
- 系統架構
- 后端項目搭建
- - 1. 創建Spring Boot項目
  - 2. 創建DeepSeek客戶端
  - 3. 創建模型類
  - 4. 創建Controller層
- 前端項目搭建
- - 1. 創建React項目
  - 2. 配置項目
  - 3. 創建API服務
  - 4. 創建聊天組件
  - 5. 支持Markdown渲染
- 運行項目
- 項目運行效果
- - 1. 初始界面展示
  - 2. 請求發送與等待響應
  - 3. AI響應后界面效果
  - 4. 長文本Markdown渲染展示
  - 5. 一鍵復制功能展示
- 項目優化
- 踩坑與解決方案
- 項目拓展方向
- 源碼下載
- 寫在最后

項目介紹

在AI大模型時代，擁有一個自己的AI助手已不再是高不可攀的夢想。本文將帶你從零開始，搭建一個完整的DeepSeek AI對話系統，包括Spring Boot后端和React前端，讓你無需深厚的技術背景，也能輕松構建專屬AI應用。

這個項目的核心功能是：

🚀 通過Spring Boot構建穩定的后端服務
🔌 對接DeepSeek AI API實現智能對話
💻 使用React打造美觀的前端界面
🎨 支持Markdown格式的AI回復展示

源碼已附文章末尾，有需要的朋友自行獲取

系統架構

整個系統采用前后端分離架構，主要包含兩個部分：

后端服務 (DeepSeekExtProject)：
- 基于Spring Boot框架
- 提供RESTful API接口
- 封裝DeepSeek API調用邏輯
- 處理請求/響應數據轉換
前端應用 (DeepSeekExtWeb)：
- 基于React + TypeScript
- 美觀的聊天界面
- 實時消息交互
- Markdown格式渲染支持

后端項目搭建

1. 創建Spring Boot項目

首先，我們需要創建一個Spring Boot項目。可以通過Spring Initializr網站或IDE插件完成：

// 項目關鍵依賴
<dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>com.squareup.okhttp3</groupId><artifactId>okhttp</artifactId><version>4.9.3</version></dependency><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>2.0.23</version></dependency>
</dependencies>

2. 創建DeepSeek客戶端

接下來，創建一個客戶端類來調用DeepSeek API：

public class DeepSeekClient {private static final String API_URL = "https://api.deepseek.com/v1/chat/completions";public static String API_KEY = "你的DeepSeek API Key";  // 替換為你的API密鑰private static final String MODEL_CHAT = "deepseek-chat";private final OkHttpClient client = new OkHttpClient();public String getResponse(String apiKey, String prompt) throws IOException {// 構建請求體DeepSeekRequestModel requestBody = DeepSeekRequestModel.builder().model(MODEL_CHAT).messages(Arrays.asList(DeepSeekRequestModel.Message.builder().role("user").content(prompt).build())).build();String jsonBody = JSON.toJSONString(requestBody);Request request = new Request.Builder().url(API_URL).post(RequestBody.create(jsonBody, MediaType.get("application/json"))).addHeader("Authorization", "Bearer " + apiKey).build();try (Response response = client.newCall(request).execute()) {if (response.isSuccessful() && response.body() != null) {return response.body().string();}throw new IOException("Unexpected code " + response);}}
}

3. 創建模型類

我們需要幾個模型類來處理請求和響應：

// 請求模型
@Data
@Builder
public class DeepSeekRequestModel {private String model;private List<Message> messages;@Data@Builderpublic static class Message {private String role;private String content;}
}// 響應模型
@Data
public class DeepSeeekResponse {private String id;private String object;private long created;private String model;private List<Choice> choices;@Datapublic static class Choice {private Message message;private String finish_reason;private int index;}@Datapublic static class Message {private String role;private String content;}
}

4. 創建Controller層

最后，創建一個控制器來處理HTTP請求：

@Controller
@RequestMapping("/deepseek")
@ResponseBody
public class DeepSeekController {@RequestMapping(value = "/ask", method = RequestMethod.POST)public R<String> ask(@RequestBody AskParam askParam) {try {String responsestr = new DeepSeekClient().getResponse(DeepSeekClient.API_KEY, askParam.getAskInfo());DeepSeeekResponse response = JSONObject.parseObject(responsestr, DeepSeeekResponse.class);for (DeepSeeekResponse.Choice choice : response.getChoices()) {if ("stop".equals(choice.getFinish_reason())) {// 成功String content = choice.getMessage().getContent();return R.ok(content);}}return R.error("請求失敗");} catch (IOException e) {return R.error("異常:" + e.getMessage());}}
}

前端項目搭建

1. 創建React項目

首先，創建一個新的React項目：

# 創建新項目
mkdir DeepSeekExtWeb
cd DeepSeekExtWeb# 初始化package.json
npm init -y# 安裝核心依賴
npm install react react-dom react-scripts typescript @types/react @types/react-dom axios antd @ant-design/icons styled-components react-markdown remark-gfm rehype-highlight rehype-raw

2. 配置項目

創建必要的配置文件：

// package.json 配置啟動腳本
"scripts": {"start": "set PORT=8889 && react-scripts start","build": "react-scripts build"
}// tsconfig.json
{"compilerOptions": {"target": "es5","lib": ["dom", "dom.iterable", "esnext"],"allowJs": true,"skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"strict": true,"forceConsistentCasingInFileNames": true,"noFallthroughCasesInSwitch": true,"module": "esnext","moduleResolution": "node","resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "react-jsx"},"include": ["src"]
}

3. 創建API服務

創建一個service文件處理API調用：

// src/services/deepSeekService.ts
import axios from 'axios';const API_BASE_URL = 'http://localhost:8888';export interface ApiResponse<T> {code: number;msg: string;data: T;
}export const deepSeekService = {askQuestion: async (question: string): Promise<string> => {try {const response = await axios.post<ApiResponse<string>>(`${API_BASE_URL}/deepseek/ask`, {askInfo: question});if (response.data.code === 0) {return response.data.data;} else {throw new Error(response.data.msg || '請求失敗');}} catch (error) {console.error('API請求錯誤:', error);throw error;}}
};

4. 創建聊天組件

構建核心的聊天界面組件：

// src/components/ChatPage.tsx (部分核心代碼)
const ChatPage: React.FC = () => {const [inputValue, setInputValue] = useState('');const [messages, setMessages] = useState<MessageType[]>([{id: '1',content: '歡迎使用DeepSeek聊天助手，請輸入您的問題！',sender: 'bot',timestamp: new Date().toISOString(),},]);const [loading, setLoading] = useState(false);const handleSendMessage = async () => {if (!inputValue.trim()) {return;}const userMessage = {id: Date.now().toString(),content: inputValue,sender: 'user',timestamp: new Date().toISOString(),};setMessages((prev) => [...prev, userMessage]);setInputValue('');setLoading(true);try {const response = await deepSeekService.askQuestion(inputValue);const botMessage = {id: (Date.now() + 1).toString(),content: response,sender: 'bot',timestamp: new Date().toISOString(),};setTimeout(() => {setMessages((prev) => [...prev, botMessage]);setLoading(false);}, 500);} catch (error) {console.error('發送消息失敗:', error);setLoading(false);}};return (<ChatContainer><MessagesContainer>{messages.map((msg) => (<ChatMessage key={msg.id} message={msg} />))}{loading && (<TypingIndicator>DeepSeek正在思考...</TypingIndicator>)}</MessagesContainer><InputContainer><TextAreavalue={inputValue}onChange={(e) => setInputValue(e.target.value)}placeholder="輸入您的問題..."disabled={loading}/><Buttontype="primary"onClick={handleSendMessage}loading={loading}>發送</Button></InputContainer></ChatContainer>);
};

5. 支持Markdown渲染

為了優雅地顯示AI回復，我們添加了Markdown渲染支持：

// src/components/ChatMessage.tsx (部分代碼)
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeHighlight from 'rehype-highlight';const ChatMessage: React.FC<ChatMessageProps> = ({ message }) => {const isUser = message.sender === 'user';const handleCopy = () => {navigator.clipboard.writeText(message.content);message.antd.message.success('已復制到剪貼板');};return (<MessageContainer isUser={isUser}><MessageContent isUser={isUser}>{!isUser && (<CopyButton onClick={handleCopy}><CopyOutlined /></CopyButton>)}<MessageBubble isUser={isUser}>{isUser ? (message.content) : (<MarkdownContent isUser={isUser}><ReactMarkdownremarkPlugins={[remarkGfm]} rehypePlugins={[rehypeHighlight]}>{message.content}</ReactMarkdown></MarkdownContent>)}</MessageBubble></MessageContent></MessageContainer>);
};

運行項目

完成以上代碼開發后，你可以按以下步驟運行項目：

啟動后端服務：
```
cd DeepSeekExtProject
mvn spring-boot:run
```
后端服務將在8888端口啟動。
啟動前端應用：
```
cd DeepSeekExtWeb
npm start
```
前端應用將在8889端口啟動。
開始對話：
- 在瀏覽器訪問 http://localhost:8889
- 在輸入框中輸入問題并發送
- 等待DeepSeek AI的回復（支持Markdown格式展示）

項目運行效果

完成所有代碼后，成功運行項目，下面是實際效果展示：

1. 初始界面展示

項目啟動后的初始聊天界面，等待用戶輸入問題

圖1：項目啟動后的初始聊天界面，等待用戶輸入問題

2. 請求發送與等待響應

用戶發送問題后，顯示加載動畫提示AI正在思考

圖2：用戶發送問題后，顯示加載動畫提示AI正在思考

3. AI響應后界面效果

DeepSeek AI回答完成后的界面效果

圖3：DeepSeek AI回答完成后的界面效果

4. 長文本Markdown渲染展示

查詢"Java垃圾回收"等專業問題后，長文本響應的Markdown渲染效果

圖4：查詢"Java垃圾回收"等專業問題后，長文本響應的Markdown渲染效果

5. 一鍵復制功能展示

用戶可以通過點擊復制按鈕，一鍵復制AI回復內容，方便在其他地方使用

圖5：用戶可以通過點擊復制按鈕，一鍵復制AI回復內容，方便在其他地方使用

從上面的截圖中可以看到，我們的聊天界面具有以下特點：

美觀的UI設計：采用簡潔現代的卡片式設計，聊天氣泡明確區分用戶和AI
加載狀態提示：用戶等待AI思考時有動態加載提示，增強交互體驗
Markdown完美渲染：支持代碼塊、標題、列表、表格等Markdown元素的精確渲染
左對齊文本展示：所有AI回復內容均左對齊，提高可讀性，方便用戶閱讀長文本

這種設計不僅美觀，還極大提高了用戶體驗，特別是對于長篇技術解答，格式化展示讓內容更易理解。

項目優化

我們對項目進行了多項優化，提升用戶體驗：

UI美化：
- 精心設計的聊天氣泡
- 加載狀態動畫
- 響應式布局適配多種設備
功能增強：
- 支持Markdown格式渲染
- 代碼高亮顯示
- 一鍵復制AI回復內容：每條AI回復右上角配有復制按鈕，方便用戶快速復制所需內容
性能優化：
- 消息自動滾動到底部
- 防抖處理避免重復請求
- 錯誤處理與提示

踩坑與解決方案

在開發過程中，我們遇到的主要問題及解決方案：

跨域問題：
- 解決方案：在Spring Boot后端添加CORS配置
Markdown渲染：
- 問題：AI返回的Markdown內容無法正常顯示
- 解決方案：引入react-markdown等庫進行處理
響應內容居中問題：
- 問題：Markdown內容默認居中顯示
- 解決方案：添加text-align:left樣式強制左對齊

項目拓展方向

這個基礎項目可以進一步拓展為：

添加會話歷史：保存對話歷史，實現多輪對話
用戶管理：添加登錄注冊功能
多模型支持：集成更多AI模型，如GPT系列
自定義參數：允許用戶調整溫度、最大長度等參數
語音交互：添加語音輸入和輸出功能

源碼下載

為方便讀者快速上手，我已將完整項目源碼打包上傳，包含以下內容：

DeepSeekExtProject（Java后端項目）
- 完整的Spring Boot項目結構
- DeepSeek API調用封裝
- 請求/響應處理邏輯
DeepSeekExtWeb（React前端項目）
- 完整的React+TypeScript項目結構
- 聊天界面組件
- Markdown渲染功能
- 一鍵復制實現

源碼下載地址：DeepSeek AI對話系統完整源碼

使用說明：