【实战教程】零基础搭建DeepSeek大模型聊天系统 - Spring Boot+React完整开发指南

🔥 本文详细讲解如何从零搭建一个完整的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回复展示

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

系统架构

整个系统采用前后端分离架构，主要包含两个部分：

  1. 后端服务 (DeepSeekExtProject)：

    • 基于Spring Boot框架
    • 提供RESTful API接口
    • 封装DeepSeek API调用逻辑
    • 处理请求/响应数据转换

  2. 前端应用 (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>);
};

运行项目

完成以上代码开发后，你可以按以下步骤运行项目：

  1. 启动后端服务：

    cd DeepSeekExtProject
mvn spring-boot:run

    后端服务将在8888端口启动。

  2. 启动前端应用：

    cd DeepSeekExtWeb
npm start

    前端应用将在8889端口启动。

  3. 开始对话：

    • 在浏览器访问 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回复内容均左对齐，提高可读性，方便用户阅读长文本

这种设计不仅美观，还极大提高了用户体验，特别是对于长篇技术解答，格式化展示让内容更易理解。

项目优化

我们对项目进行了多项优化，提升用户体验：

  1. UI美化：

    • 精心设计的聊天气泡
    • 加载状态动画
    • 响应式布局适配多种设备

  2. 功能增强：

    • 支持Markdown格式渲染
    • 代码高亮显示
    • 一键复制AI回复内容：每条AI回复右上角配有复制按钮，方便用户快速复制所需内容

  3. 性能优化：

    • 消息自动滚动到底部
    • 防抖处理避免重复请求
    • 错误处理与提示

踩坑与解决方案

在开发过程中，我们遇到的主要问题及解决方案：

  1. 跨域问题：

    • 解决方案：在Spring Boot后端添加CORS配置

  2. Markdown渲染：

    • 问题：AI返回的Markdown内容无法正常显示
    • 解决方案：引入react-markdown等库进行处理

  3. 响应内容居中问题：

    • 问题：Markdown内容默认居中显示
    • 解决方案：添加text-align:left样式强制左对齐

项目拓展方向

这个基础项目可以进一步拓展为：

  1. 添加会话历史：保存对话历史，实现多轮对话
  2. 用户管理：添加登录注册功能
  3. 多模型支持：集成更多AI模型，如GPT系列
  4. 自定义参数：允许用户调整温度、最大长度等参数
  5. 语音交互：添加语音输入和输出功能

源码下载

为方便读者快速上手，我已将完整项目源码打包上传，包含以下内容：

  • DeepSeekExtProject（Java后端项目）

    • 完整的Spring Boot项目结构
    • DeepSeek API调用封装
    • 请求/响应处理逻辑

  • DeepSeekExtWeb（React前端项目）

    • 完整的React+TypeScript项目结构
    • 聊天界面组件
    • Markdown渲染功能
    • 一键复制实现

源码下载地址：DeepSeek AI对话系统完整源码

使用说明：

  1. 下载并解压源码包
  2. 按照上述运行步骤分别启动前后端项目
  3. 修改后端DeepSeekClient.java中的API_KEY为您自己的密钥

注意：使用前请确保已安装Java 8+、Maven、Node.js 14+环境。

写在最后

🎉 通过本文的指导，即使是编程萌新也能轻松搭建一个完整的DeepSeek AI对话系统。希望这个项目能帮助你开启AI开发之旅！

📚 推荐几篇很有趣的文章：

  • DeepSeek详解：探索下一代语言模型
  • 算法模型从入门到起飞系列——递归（探索自我重复的奇妙之旅）

📚博主匠心之作，强推专栏：

  • JAVA集合专栏 【夜话集】
  • JVM知识专栏
  • 数据库sql理论与实战【博主踩坑之道】
  • 小游戏开发【博主强推 匠心之作 拿来即用无门槛】

如果觉得有帮助的话，别忘了点个赞 👍 收藏 ⭐ 关注 🔖 哦！

🎯 我是果冻~，一个热爱技术、乐于分享的开发者
📚 更多精彩内容，请关注我的博客
🌟 我们下期再见！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/79784.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Linux系统基本指令和知识指南

Linux系统基本指令和知识指南

一、Linux系统简介 Linux是一种自由和开放源代码的类UNIX操作系统&#xff0c;由林纳斯托瓦兹在1991年首次发布。它以稳定性、安全性和灵活性著称&#xff0c;广泛应用于服务器、嵌入式系统和个人计算机。 Linux主要特点&#xff1a; 开源免费 多用户、多任务 良好的安全性…
阅读更多...
【计算机视觉】OpenCV实战项目：Long-Exposure：基于深度学习的长时间曝光合成技术

【计算机视觉】OpenCV实战项目：Long-Exposure：基于深度学习的长时间曝光合成技术

Long-Exposure&#xff1a;基于深度学习的长时间曝光合成技术 项目概述与技术背景项目核心功能技术原理 环境配置与安装硬件要求建议详细安装步骤可选组件安装 实战应用指南1. 基础使用&#xff1a;视频转长曝光2. 高级模式&#xff1a;自定义光轨合成3. 批量处理模式 技术实现…
阅读更多...
TikTok 矩阵账号运营实操细节：打造爆款矩阵

TikTok 矩阵账号运营实操细节：打造爆款矩阵

在 TikTok 的流量版图里&#xff0c;打造 TikTok 矩阵账号能显著提升影响力与吸粉能力。而借助 AI 工具&#xff0c;更可为 TikTok 矩阵运营效率的提升赋能&#xff0c;让运营如虎添翼。下面就为大家详细讲讲其中的实操细节&#xff0c;并结合一些伪代码示例辅助理解。 一、矩…
阅读更多...
互联网大厂Java求职面试：分布式系统中向量数据库与AI应用的融合探索

互联网大厂Java求职面试：分布式系统中向量数据库与AI应用的融合探索

互联网大厂Java求职面试&#xff1a;分布式系统中向量数据库与AI应用的融合探索 面试开场&#xff1a;技术总监与郑薪苦的“较量” 技术总监&#xff08;以下简称T&#xff09;&#xff1a;郑薪苦先生&#xff0c;请简单介绍一下你在分布式系统设计方面的经验。 郑薪苦&…
阅读更多...
【每日八股】学习 RocketMQ Day2：进阶（一）

【每日八股】学习 RocketMQ Day2：进阶（一）

文章目录 复习昨日内容为什么要使用消息队列为什么选择 RocketMQRocketMQ 的优缺点&#xff1f;谈谈你对 RocketMQ 的理解&#xff1f;消息队列有哪些类型&#xff1f;RocketMQ 采用哪种消息队列模型&#xff1f;消息的消费模式了解吗&#xff1f;了解 RocketMQ 的基本架构吗&a…
阅读更多...
探索智能体开发新边界：Cangjie Magic开源平台体验与解析

探索智能体开发新边界：Cangjie Magic开源平台体验与解析

文章目录 每日一句正能量前言一、Cangjie Magic的核心技术&#xff08;一&#xff09;Agent DSL架构&#xff08;二&#xff09;原生支持MCP通信协议&#xff08;三&#xff09;智能规划功能 二、实际应用场景&#xff08;一&#xff09;智能客服系统&#xff08;二&#xff09…
阅读更多...
深入解析进程间通信与Socket原理：从理论到TypeScript实战

深入解析进程间通信与Socket原理：从理论到TypeScript实战

文章目录 一、进程中如何通信1.1 管道1.1.1 核心特性1.1.2 缺点1.1.3 匿名管道与命名管道的对比 1.2 信号1.2.1 核心特性1.2.2 缺点1.2.3 信号分类对比 1.3 消息队列1.3.1 核心特性1.3.2 缺点 1.4 共享内存1.4.1 核心特性1.4.2 缺点 1.5 信号量1.5.1 核心特性1.5.2 缺点 二、So…
阅读更多...
力扣-hot100(旋转图像)

力扣-hot100(旋转图像)

48. 旋转图像 中等 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。 你必须在 原地 旋转图像&#xff0c;这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4…
阅读更多...
Docker编排工具---Compose的概述及使用

Docker编排工具---Compose的概述及使用

目录 一、Compose工具的概述 二、Compose的常用命令 1、列出容器 2、查看访问日志 3、输出绑定的公共端口 4、重新构建服务 5、启动服务 6、停止服务 7、删除已停止服务的容器 8、创建和启动容器 9、在运行的容器中执行命令 10、指定一个服务启动容器的个数 11、其…
阅读更多...
C25-数组应用及练习

C25-数组应用及练习

第一题 题目: 代码 #include <stdio.h> int main() {//数组及相关数据定义int arr[10];int i;//基于循环的数组数据输入for(i0;i<10;i){arr[i]i;}//基于循环的数组数据输出for(i9;i>0;i--){printf("%d ",arr[i]);}return 0; }结果 第二题 题目 代码 …
阅读更多...
网络安全怎么入门？快速了解

网络安全怎么入门？快速了解

网络安全是一个快速发展的领域&#xff0c;入门需要系统化的学习和实践。以下是适合零基础或转行者的分阶段学习路径&#xff0c;涵盖必备知识、学习资源、实战方法和职业方向&#xff1a; 一、基础阶段&#xff08;1-3个月&#xff09; 1. 掌握核心基础知识 计算机网络&#…
阅读更多...
express 怎么搭建 WebSocket 服务器

express 怎么搭建 WebSocket 服务器

一&#xff1a;使用 express-ws var express require(express); var app express(); var expressWs require(express-ws)(app);app.use(function (req, res, next) {console.log(middleware);req.testing testing;return next(); });app.get(/, function(req, res, next){…
阅读更多...
【AI论文】SuperEdit：修正并促进基于指令的图像编辑的监督信号

【AI论文】SuperEdit：修正并促进基于指令的图像编辑的监督信号

摘要&#xff1a;由于手动收集准确的编辑数据存在挑战&#xff0c;现有的数据集通常使用各种自动化方法构建&#xff0c;导致编辑指令和原始编辑图像对之间不匹配导致监督信号出现噪声。 最近的研究试图通过生成更高质量的编辑图像、在识别任务上进行预训练或引入视觉语言模型&…
阅读更多...
关于大疆红外图片提取温度方法 python 方法

关于大疆红外图片提取温度方法 python 方法

思路 红外图片需要是黑白图片 提取红外图片最高和最低温度 温度图例 根据最高温度31.2摄氏度 最低温度19.9摄氏度 那中间的值在 0到255 之间 那有这个值之后。就可以获取到图片里面 每个点或者面的值 实现方式 def find_Gray(self, t_max, t_min, c_temp):"""…
阅读更多...
金融小知识

金融小知识

&#x1f4c9; 一、“做空”是啥&#xff1f; 通俗说法&#xff1a;押“它会跌”&#xff0c;赚钱&#xff01; ✅ 举个例子&#xff1a; 有一天老王的包子涨价到 10 块一个&#xff0c;张三觉得这价格肯定撑不住&#xff0c;未来会跌到 5 块。于是他&#xff1a; 向朋友借了…
阅读更多...
JavaScript 数据存储全攻略：从 Cookie 到 IndexedDB

JavaScript 数据存储全攻略：从 Cookie 到 IndexedDB

1. Cookie&#xff1a;传统的轻量级存储 Cookie 是最早的客户端存储解决方案之一&#xff0c;最初设计用于服务器和客户端之间的状态保持。 基本用法 javascript 复制 下载 // 设置cookie document.cookie "usernameJohnDoe; expiresThu, 18 Dec 2025 12:00:00 UTC…
阅读更多...
Leetcode 刷题记录 09 —— 链表第三弹

Leetcode 刷题记录 09 —— 链表第三弹

本系列为笔者的 Leetcode 刷题记录&#xff0c;顺序为 Hot 100 题官方顺序&#xff0c;根据标签命名&#xff0c;记录笔者总结的做题思路&#xff0c;附部分代码解释和疑问解答&#xff0c;01~07为C语言&#xff0c;08及以后为Java语言。 01 合并 K 个升序链表 /*** Definitio…
阅读更多...
如何利用 Elastic Load Balancing 提升应用性能与可用性？

如何利用 Elastic Load Balancing 提升应用性能与可用性？

当今云计算的快速发展中&#xff0c;随着应用需求的增加&#xff0c;如何确保系统能够高效、稳定地处理不断增长的流量成为了每个技术团队关注的焦点。Elastic Load Balancing&#xff08;ELB&#xff09;作为一种强大的工具&#xff0c;能够帮助开发者和运维人员轻松应对流量波…
阅读更多...
Word如何制作三线表格

Word如何制作三线表格

1.需求 将像这样的表格整理成论文中需要的三线表格。 2.直观流程 选中表格 --> 表格属性中的边框与底纹B --> 在设置中选择无&#xff08;重置表格&#xff09;–> 确定 --> 选择第一行&#xff08;其实是将第一行看成独立表格了&#xff0c;为了设置中线&…
阅读更多...
JVM的双亲委派模型

JVM的双亲委派模型

引言 Java类加载机制中的双亲委派模型通过层层委托保证了核心类加载器与应用类加载器之间的职责分离和加载安全性&#xff0c;但其单向的委托关系也带来了一些局限性。尤其是在核心类库需要访问或实例化由应用类加载器加载的类时&#xff0c;双亲委派模型无法满足需求&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023