前言
在生成式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"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<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>
<description>微信公众号: 后端码匠</description>
<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>
</dependencies>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>org.springframework.ai</groupId>
<artifactId>spring-ai-bom</artifactId>
<version>${spring-ai.version}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
yml 配置文件
server:
port:8080
spring:
ai:
ollama:
base-url:http://localhost:11434
chat:
model:deepseek-r1:8b
application:
name:codingce-deepspeek
webflux:
base-path:/
codec:
max-in-memory-size:10MB
logging:
level:
cn.com.codingce.deepseek:DEBUG
org.springframework.web:INFO
核心服务实现
DeepSeekService 是一个核心服务类,主要负责处理与 ollama 的通信和数据处理。
整个服务采用响应式编程模式(Flux),实现非阻塞式处理,提高系统性能。同时通过日志记录,确保服务的可靠性和稳定性。
package cn.com.codingce.deepseek.service;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.ai.ollama.OllamaChatModel;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import reactor.core.publisher.Flux;
/**
* @author 后端码匠
*/
@Slf4j
@Service
@RequiredArgsConstructor
publicclass DeepSeekService {
@Autowired
private OllamaChatModel ollamaChatModel;
public Flux<String> handleChatWebSocket(String question) {
return sendChatRequest(question)
.doOnNext(response -> log.info("handleChatWebSocket 发送响应: {}", response))
.onErrorResume(e -> {
log.error("handleChatWebSocket WebSocket通信错误: {}", e.getMessage());
return Flux.just("抱歉, 服务器处理请求时发生错误, 请稍后重试.");
});
}
public Flux<String> sendChatRequest(String question) {
String res = ollamaChatModel.call(question);
log.info("sendChatRequest 回答: {}", res);
return Flux.just(res);
}
}
前端项目初始化
vue create codingce-deepspeek-front
cd codingce-deepspeek-front
npm install sockjs-client marked dompurify
聊天组件ChatCodingce.vue开发
采用 flex 布局、基于 WebSocket 进行实时通信、针对不同类型的消息等。
- 采用 flex 布局,包含消息显示区、输入区和连接状态提示区。消息显示区支持滚动,并能自动定位到最新消息;输入区集成了输入框和发送按钮,提供便捷的交互体验;状态区则实时显示 WebSocket 连接状态,让用户随时掌握通信情况;
- 基于 WebSocket 进行实时通信,initWebSocket 方法负责建立连接,并完整管理连接生命周期,包括连接成功、消息接收、错误处理和断线重连等。消息的发送与接收分别通过 sendMessage 和 appendMessage 方法处理,并支持区分用户消息和机器人回复。此外,组件使用 marked 库渲染 Markdown 格式,并结合 DOMPurify 进行 XSS 过滤,确保消息展示安全可靠;
- 针对不同类型的消息(用户消息、机器人回复、错误提示)定义了个性化样式,并利用 :deep 选择器为 Markdown 内容提供精细化样式支持,包括标题、代码块、表格、列表等,确保内容展示既专业又美观。整体设计注重用户体验,不仅优化了交互细节,还完善了状态提示和错误处理机制,使聊天体验更加流畅。
<template>
<div class="chat-container">
<div class="message-container" ref="messageContainer">
<div
v-for="(message, index) in messages"
:key="index"
:class="['message', message.type + '-message']"
>
<div v-if="message.type === 'bot'" v-html="renderMarkdown(message.content)"></div>
<div v-else>{{ message.content }}</div>
</div>
</div>
<div class="input-container">
<input
v-model="inputMessage"
@keyup.enter="sendMessage"
placeholder="输入您的问题...(微信公众号:后端码匠)"
class="message-input"
:disabled="!isConnected"
>
<button
@click="sendMessage"
class="send-button"
:disabled="!isConnected"
>
发送
</button>
</div>
<div v-if="!isConnected" class="connection-status">
连接已断开,正在重新连接...
</div>
</div>
</template>
...
效果展示
后端
上图显示了项目运行时的日志信息,记录了 WebSocket 连接和 Ollama 的交互过程,包括消息接收和响应的详细日志。
前端
上图为 AI 对话系统的用户界面截图。整个界面支持 Markdown 格式的渲染,使得回答内容层次分明,易于阅读。
结语
通过本文的实践,我们成功搭建了一个基于 Spring Boot 和 Vue 的 AI 对话系统。该系统具备以下特点:
- 实时对话 基于 WebSocket 实现流式响应,带来更流畅的交互体验;
- 优雅展示 支持 Markdown 格式渲染,让消息显示更清晰直观;
- 稳定可靠 内置完善的错误处理机制,确保系统高效稳定运行;
- 易于扩展 代码结构清晰,方便后续功能拓展和优化。
这一系统不仅能够用于智能客服、在线问答等场景,还能结合大模型能力,进一步提升智能化水平。未来,我们可以继续优化性能,增强上下文理解能力,并探索更多创新应用场景,让 AI 交互变得更加智能自然。
如何零基础入门 / 学习AI大模型?
大模型时代,火爆出圈的LLM大模型让程序员们开始重新评估自己的本领。 “AI会取代那些行业?
”“谁的饭碗又将不保了?
”等问题热议不断。
不如成为「掌握AI工具的技术人」
,毕竟AI时代,谁先尝试,谁就能占得先机!
想正式转到一些新兴的 AI 行业,不仅需要系统的学习AI大模型。同时也要跟已有的技能结合,辅助编程提效,或上手实操应用,增加自己的职场竞争力。
但是LLM相关的内容很多,现在网上的老课程老教材关于LLM又太少。所以现在小白入门就只能靠自学,学习成本和门槛很高
那么我作为一名热心肠的互联网老兵,我意识到有很多经验和知识值得分享给大家,希望可以帮助到更多学习大模型的人!至于能学习到多少就看你的学习毅力和能力了 。我已将重要的AI大模型资料包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。
这份完整版的大模型 AI 学习资料已经上传优快云,朋友们如果需要可以微信扫描下方优快云官方认证二维码免费领取【保证100%免费
】
👉 福利来袭
优快云大礼包:《2025最全AI大模型学习资源包》免费分享,安全可点 👈
全套AGI大模型学习大纲+路线
AI大模型时代的学习之旅:从基础到前沿,掌握人工智能的核心技能!
640套AI大模型报告合集
这套包含640份报告的合集,涵盖了AI大模型的理论研究、技术实现、行业应用等多个方面。无论您是科研人员、工程师,还是对AI大模型感兴趣的爱好者,这套报告合集都将为您提供宝贵的信息和启示。
👉学会后的收获:👈
• 基于大模型全栈工程实现(前端、后端、产品经理、设计、数据分析等),通过这门课可获得不同能力;
• 能够利用大模型解决相关实际项目需求: 大数据时代,越来越多的企业和机构需要处理海量数据,利用大模型技术可以更好地处理这些数据,提高数据分析和决策的准确性。因此,掌握大模型应用开发技能,可以让程序员更好地应对实际项目需求;
• 基于大模型和企业数据AI应用开发,实现大模型理论、掌握GPU算力、硬件、LangChain开发框架和项目实战技能, 学会Fine-tuning垂直训练大模型(数据准备、数据蒸馏、大模型部署)一站式掌握;
• 能够完成时下热门大模型垂直领域模型训练能力,提高程序员的编码能力: 大模型应用开发需要掌握机器学习算法、深度学习框架等技术,这些技术的掌握可以提高程序员的编码能力和分析能力,让程序员更加熟练地编写高质量的代码。
👉 福利来袭
优快云大礼包:《2025最全AI大模型学习资源包》免费分享,安全可点 👈
这份完整版的大模型 AI 学习资料已经上传优快云,朋友们如果需要可以微信扫描下方优快云官方认证二维码免费领取【保证100%免费
】
作为普通人,入局大模型时代需要持续学习和实践,不断提高自己的技能和认知水平,同时也需要有责任感和伦理意识,为人工智能的健康发展贡献力量。