Spring Boot3+Vue3极速整合: 10分钟搭建DeepSeek AI对话系统(进阶)
前言
在上次实战指南《Spring Boot3+Vue2极速整合: 10分钟搭建DeepSeek AI对话系统》引发读者热议后，我通过200+真实用户反馈锁定了几个问题进行优化进阶处理：
- 每次对话都需重复上下文背景；
- 专业领域回答准确率不足；
- Vue2版本较低。
本文作为系统升级的进阶指南：
- 上下文感知：无需重构架构即可实现多轮对话记忆；
- 精准调优：小样本数据驱动专业领域准确率提升；
技术演进
| 维度 | 基础版 | 进阶方案 |
|---|---|---|
| 前端架构 | Vue2 | Vue3+组合式API |
| 对话逻辑 | 单轮独立交互 | 上下文连贯 |
| 模型能力 | 通用DeepSeek模型 | LLaMA Factory+LoRA+领域适配 |
环境规格：全程基于Windows11平台（AMD Ryzen5 6600H/16GB内存/RTX3050ti 4GB显存），采用Anaconda环境管理方案。
升级 Vue3
项目搭建脚本
# 默认即可
vue create codingce-deepspeek-front-v3
# 进入项目文件夹
cd .\codingce-deepspeek-front-v3\
# 下载依赖包
npm i# Vue2项目升级Vue3配置# 运行 Vue3 项目
npm run serve
预览图
组件代码更新(DeepSeek生成)
<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><script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
import SockJS from 'sockjs-client';
import { marked } from 'marked';
import DOMPurify from 'dompurify';const messages = ref([]);
const inputMessage = ref('');
const isConnected = ref(false);
const ws = ref(null);
const reconnectAttempts = ref(0);
const maxReconnectAttempts = 5;
const messageContainer = ref(null);
const currentResponse = ref('');marked.setOptions({gfm: true,breaks: true
});const renderMarkdown = (content) => DOMPurify.sanitize(marked(content));const initWebSocket = () => {try {ws.value = new SockJS('http://localhost:8080/chat');ws.value.onopen = () => {console.log('WebSocket连接已建立');isConnected.value = true;reconnectAttempts.value = 0;};ws.value.onmessage = (event) => {if (event.data) {try {const response = JSON.parse(event.data);appendMessage(response.error ? 'error' : 'bot', response.error || response.content || event.data);} catch (e) {appendMessage('bot', event.data);}}};ws.value.onerror = (error) => {console.error('WebSocket错误:', error);isConnected.value = false;appendMessage('error', '连接发生错误，正在尝试重新连接...');};ws.value.onclose = () => {console.log('WebSocket连接已关闭');isConnected.value = false;reconnect();};} catch (error) {console.error('WebSocket初始化失败:', error);isConnected.value = false;appendMessage('error', '连接初始化失败，请刷新页面重试');}
};const reconnect = () => {if (reconnectAttempts.value < maxReconnectAttempts) {reconnectAttempts.value++;console.log(`尝试重新连接... (${reconnectAttempts.value}/${maxReconnectAttempts})`);setTimeout(initWebSocket, 3000);}
};const sendMessage = () => {if (inputMessage.value.trim() && isConnected.value) {try {ws.value.send(inputMessage.value);appendMessage('user', inputMessage.value);inputMessage.value = '';} catch (error) {console.error('发送消息失败:', error);isConnected.value = false;}}
};const appendMessage = (type, content) => {if (type === 'user') {messages.value.push({ type, content });currentResponse.value = '';messages.value.push({ type: 'bot', content: '' });} else if (type === 'bot') {currentResponse.value += content;if (messages.value.length > 0) {messages.value[messages.value.length - 1].content = currentResponse.value;}} else {messages.value.push({ type, content });}nextTick(() => {if (messageContainer.value) {messageContainer.value.scrollTop = messageContainer.value.scrollHeight;}});
};onMounted(initWebSocket);
onBeforeUnmount(() => {if (ws.value) {ws.value.close();ws.value = null;}
});
</script><style scoped>
.chat-container {max-width: 800px;margin: 0 auto;padding: 5px;height: calc(100vh - 80px);display: flex;flex-direction: column;overflow: hidden;
}.message-container {flex: 1;border: 1px solid #ddd;border-radius: 4px;padding: 20px;overflow-y: auto;margin-bottom: 20px;background: #f9f9f9;
}.input-container {display: flex;gap: 10px;
}.message-input {flex: 1;padding: 12px;border: 1px solid #ddd;border-radius: 4px;font-size: 14px;
}.message-input:disabled,
.send-button:disabled {opacity: 0.6;cursor: not-allowed;
}.send-button {padding: 0 20px;background: #000000;color: white;border: none;border-radius: 4px;cursor: pointer;transition: background 0.3s;
}.send-button:hover:not(:disabled) {background: #aea9f8;
}.message {margin: 10px 0;padding: 10px;border-radius: 4px;max-width: 80%;white-space: pre-wrap;word-break: break-word;line-height: 1.5;
}.user-message {color: #000000;background: #f8edd7;margin-left: auto;
}.bot-message {color: #000000;background: #f0f9eb;font-size: 14px;font-family: "Microsoft YaHei", sans-serif;
}.bot-message :deep(h1),
.bot-message :deep(h2),
.bot-message :deep(h3),
.bot-message :deep(h4),
.bot-message :deep(h5),
.bot-message :deep(h6) {margin: 8px 0;font-weight: 600;
}.bot-message :deep(p) {margin: 8px 0;line-height: 1.6;
}.bot-message :deep(code) {background-color: #f3f3f3;padding: 2px 4px;border-radius: 3px;font-family: Consolas, Monaco, 'Andale Mono', monospace;
}.bot-message :deep(pre) {background-color: #f6f8fa;padding: 16px;border-radius: 6px;overflow-x: auto;
}.bot-message :deep(pre code) {background-color: transparent;padding: 0;
}.bot-message :deep(ul),
.bot-message :deep(ol) {padding-left: 20px;margin: 8px 0;
}.bot-message :deep(blockquote) {margin: 8px 0;padding-left: 10px;border-left: 4px solid #dfe2e5;color: #6a737d;
}.bot-message :deep(table) {border-collapse: collapse;width: 100%;margin: 8px 0;
}.bot-message :deep(th),
.bot-message :deep(td) {border: 1px solid #dfe2e5;padding: 6px 13px;
}.bot-message :deep(th) {background-color: #f6f8fa;
}.bot-message :deep(a) {color: #0366d6;text-decoration: none;
}.bot-message :deep(a:hover) {text-decoration: underline;
}.bot-message :deep(img) {max-width: 100%;height: auto;
}.connection-status {text-align: center;color: #E6A23C;padding: 10px;background: #fdf6ec;border-radius: 4px;margin-top: 10px;
}.error-message {color: #F56C6C;background: #fef0f0;margin-left: auto;margin-right: auto;text-align: center;
}
</style>
后端实现
通过 ConcurrentHashMap、List 的简洁设计，在保证线程安全的前提下实现了基本的上下文管理功能，后续可通过添加窗口限制、持久化存储等机制进一步提升商业应用场景下的可靠性。
| 优势点 | 技术实现 | 实际效果 |
|---|---|---|
| 会话隔离 | sessionId哈希映射 | 支持多用户并发使用 |
| 对话连贯性 | 历史消息全量传递 | 实现多轮上下文理解 |
| 资源可控 | 线性增长的List结构 | 内存占用可预测 |
| 零第三方依赖 | 纯JDK实现 | 降低系统复杂度 |
流程图
代码实现
package cn.com.codingce.deepseek.service;import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.ai.chat.messages.AssistantMessage;
import org.springframework.ai.chat.messages.Message;
import org.springframework.ai.chat.messages.UserMessage;
import org.springframework.ai.chat.model.ChatResponse;
import org.springframework.ai.chat.prompt.Prompt;
import org.springframework.ai.ollama.OllamaChatModel;
import org.springframework.stereotype.Service;
import reactor.core.publisher.Flux;import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;@Slf4j
@Service
@RequiredArgsConstructor
public class DeepSeekService {private final OllamaChatModel ollamaChatModel;/*** 使用 ConcurrentHashMap 维护会话上下文（线程安全）*/private final Map<String, List<Message>> chatContexts = new ConcurrentHashMap<>();public Flux<String> handleChatWebSocket(String sessionId, String question) {return sendChatRequest(sessionId, question).doOnNext(response -> log.info("handleChatWebSocket 发送响应: {}", response)).onErrorResume(e -> {log.error("handleChatWebSocket 通信错误: {}", e.getMessage());return Flux.just("服务器处理请求时发生错误，请稍后重试。");});}public Flux<String> sendChatRequest(String sessionId, String question) {// 获取或创建会话历史List<Message> context = chatContexts.computeIfAbsent(sessionId, k -> new ArrayList<>());// 添加用户新消息到上下文context.add(new UserMessage(question));// 创建包含历史上下文的 PromptChatResponse response = ollamaChatModel.call(new Prompt(context));// 获取模型回复String answer = response.getResult().getOutput().getContent();// 添加助手回复到上下文context.add(new AssistantMessage(answer));log.info("会话 {} 的上下文长度: {}", sessionId, context.size());return Flux.just(answer);}}
任务管理器
跑问题的时候GPU已经满了。
上下文连贯调试
1、什么是接口幂等性
后端log如下：
2、为什么需要实现幂等性
后端log如下：
3、引入幂等性后对系统的影响
后端log如下：
LLaMA-Factory 微调专业大模型（进阶）
到这里其实文章就可以结束了，不过肯定有朋友和我一样对如何训练模型感兴趣，下面我介绍下是如何训练本地大模型，有经验的读者可以自己尝试，建议C盘100G+，并且有Python技能背景，里面的坑还是很多的，下面进入正题(毕竟不是专业的，如有问题欢迎讨论，
折腾下来硬盘都满了)。
LLaMA-Factory是一个在github上开源的，专为大模型训练设计的平台。项目提供中文说明，可以参考官方文档：https://github.com/hiyouga/LLaMA-Factory/blob/main/README_zh.md
本次目的就是借助 LLaMA-Factory 来调试 Hugging Face 上的模型，并导出成本地 Ollama 可运行的专业小模型。
使用零代码命令行与 Web UI 轻松微调百余种大模型
Hugging Face
Hugging Face 是一个致力于推动自然语言处理（NLP）技术发展的开源社区与创新公司。作为 NLP 领域的领军者，Hugging Face 为开发者提供了丰富的工具和资源，涵盖从模型训练、微调到部署的全流程解决方案。其核心使命是通过开源共享，降低 NLP 技术的应用门槛，让开发者能够轻松获取并利用最先进的模型和技术。
Hugging Face 的贡献不仅限于 NLP 领域，还扩展到了图像、音频等多模态任务，为人工智能的多领域融合提供了强大支持。其平台汇集了海量的预训练模型和高质量数据集，涵盖了从文本生成、情感分析到图像分类、语音识别等多种应用场景。这些资源不仅为研究者提供了强大的实验基础，也为企业级应用提供了高效的解决方案。
凭借其开放性和创新性，Hugging Face 已成为全球开发者和研究者的重要技术枢纽，持续推动着人工智能技术的普及与进步。无论是学术研究还是工业应用，Hugging Face 都扮演着不可或缺的角色，为 AI 社区注入了源源不断的活力。
这个还是很好玩的，比如自己写个调大模型的例子，使用 transformers 就可以用下面代码调用 Hugging Face 上的情感分析开源模型：
from transformers import pipelineclassifier = pipeline("sentiment-analysis")
res = classifier("Today is a nice day")print(res)
控制台输出LOG
(tensorflow) PS D:\mxz-code\ai\python> python test.py
D:\anaconda3\envs\tensorflow\Lib\site-packages\transformers\utils\hub.py:106: FutureWarning: Using `TRANSFORMERS_CACHE` is deprecated and will be removed in v5 of Transformers. Use `HF_HOME` instead.warnings.warn(
No model was supplied, defaulted to distilbert/distilbert-base-uncased-finetuned-sst-2-english and revision 714eb0f (https://huggingface.co/distilbert/distilbert-base-uncased-finetuned-sst-2-english).
Using a pipeline without specifying a model name and revision in production is not recommended.
Device set to use cuda:0
[{'label': 'POSITIVE', 'score': 0.9998723268508911}]
LoRA
LoRA（Low-Rank Adaptation of Large Language Models）是一种创新的低秩适应技术，专为高效微调大规模语言模型而设计。最初应用于自然语言处理（NLP）领域，LoRA 技术通过引入低秩矩阵分解，仅需训练少量参数即可实现对 GPT-3 等大型模型的精准微调。相较于传统全参数微调方法，LoRA 显著降低了计算资源需求，同时大幅减少了训练成本，使其成为资源受限环境下的理想选择。
LoRA 的使用流程简洁高效。用户只需下载相应的 LoRA 模型和基础 checkpoint 模型，并将其部署到指定目录即可。在实际应用中，LoRA 模型可与主模型协同工作，通过调整权重参数精确控制生成结果。其核心优势包括：
- 训练速度快：仅需微调少量参数，显著缩短训练时间；
- 计算需求低：冻结原始模型参数，仅训练新增的低秩层；
- 存储空间小：训练权重文件通常仅约 3MB，比原始 UNet 模型小近千倍。
现在有 LLaMA-Factory UI界面操作简单的导出，了解LoRA即可，商用得深入。
模型微调环境
Python环境(GPU)
PS C:\Users\24607> conda --version
conda 24.11.3# tensorflow 名字可改
conda create -n tensorflow python=3.11.7# 激活 tensorflow
conda activate tensorflowPS C:\Users\24607> python -V
Python 3.11.7pip install tensorflow-gpu==2.12.0conda install pytorch torchvision torchaudio pytorch-cuda=11.8 -c pytorch -c nvidia pip install transformers
CUDA(ComputeUnified Device Architecture)，是显卡厂商NVIDIA推出的运算平台。CUDA是一种由NVIDIA推出的通用并行计算架构，该架构使GPU能够解决复杂的计算问题。
安装CUDA前先安装VS Community，不安装的话，直接安装CUDA会报错，下载链接:
https://my.visualstudio.com/Downloads?PId=8228
下载前需要注册登陆账号，目前可以下载的版本可能只有2022版的，不过问题不大，也可以用。
有缘自会相逢，之前在学校的时候这东西安装容易卸载难，想不到毕业两年多还会在下回来。（所有环境，虽然默认安装好多不在C盘，但是也把我C盘吃了40多个G）
PS C:\Users\24607> nvcc -V
nvcc: NVIDIA (R) Cuda compiler driver
Copyright (c) 2005-2024 NVIDIA Corporation
Built on Wed_Oct_30_01:18:48_Pacific_Daylight_Time_2024
Cuda compilation tools, release 12.6, V12.6.85
Build cuda_12.6.r12.6/compiler.35059454_0
PS C:\Users\24607># 主要为为了有 CUDA Version: 12.6 环境，不然不能训练!!! 具体安装网上教程一大堆可查看适配自己显卡的
PS C:\Users\24607> nvidia-smi
Sat Mar 1 19:46:13 2025
+-----------------------------------------------------------------------------------------+
| NVIDIA-SMI 561.17 Driver Version: 561.17 CUDA Version: 12.6 |
|-----------------------------------------+------------------------+----------------------+
| GPU Name Driver-Model | Bus-Id Disp.A | Volatile Uncorr. ECC |
| Fan Temp Perf Pwr:Usage/Cap | Memory-Usage | GPU-Util Compute M. |
| | | MIG M. |
|=========================================+========================+======================|
| 0 NVIDIA GeForce RTX 3050 ... WDDM | 00000000:01:00.0 On | N/A |
| N/A 50C P8 4W / 95W | 1738MiB / 4096MiB | 5% Default |
| | | N/A |
+-----------------------------------------+------------------------+----------------------++-----------------------------------------------------------------------------------------+
| Processes: |
| GPU GI CI PID Type Process name GPU Memory |
| ID ID Usage |
|=========================================================================================|
| 0 N/A N/A 2440 C+G ...CBS_cw5n1h2txyewy\TextInputHost.exe N/A |
| 0 N/A N/A 2896 C+G ...m\radeonsoftware\RadeonSoftware.exe N/A |
| 0 N/A N/A 10120 C+G C:\Windows\explorer.exe N/A |
| 0 N/A N/A 10200 C+G C:\Windows\System32\ShellHost.exe N/A |
| 0 N/A N/A 10844 C+G D:\Microsoft VS Code\Code.exe N/A |
| 0 N/A N/A 11136 C+G ...__8wekyb3d8bbwe\WindowsTerminal.exe N/A |
| 0 N/A N/A 12524 C+G ...nt.CBS_cw5n1h2txyewy\SearchHost.exe N/A |
| 0 N/A N/A 12548 C+G ...2txyewy\StartMenuExperienceHost.exe N/A |
| 0 N/A N/A 13876 C+G ...oogle\Chrome\Application\chrome.exe N/A |
| 0 N/A N/A 14300 C+G ...t.LockApp_cw5n1h2txyewy\LockApp.exe N/A |
| 0 N/A N/A 14752 C+G ...on\133.0.3065.92\msedgewebview2.exe N/A |
| 0 N/A N/A 16780 C+G ...nr4m\radeonsoftware\AMDRSSrcExt.exe N/A |
| 0 N/A N/A 16928 C+G ...5n1h2txyewy\ShellExperienceHost.exe N/A |
| 0 N/A N/A 17804 C+G ...1\extracted\runtime\WeChatAppEx.exe N/A |
| 0 N/A N/A 19564 C ...naconda3\envs\tensorflow\python.exe N/A |
| 0 N/A N/A 21280 C+G D:\MyApp\Typora\Typora.exe N/A |
+-----------------------------------------------------------------------------------------+
环境验证
import torch# 输出带CPU, 表示torch是CPU版本的, 否则会是 +cuxxx
print(f'torch 的版本是:{torch.__version__}')
#
print(f'torch 是否能使用cuda:{torch.cuda.is_available()}')
输出 LOG
(tensorflow) PS D:\mxz-code\ai\python> python test.py
torch的版本是：2.5.1
torch是否能使用cuda：True
(tensorflow) PS D:\mxz-code\ai\python>
LLaMA-Factory 安装
按照GitHub上安装即可(注意用GPU的环境，不然会报"未检测到CUDA环境"，导致无法训练)。
git clone --depth 1 https://github.com/hiyouga/LLaMA-Factory.git
cd LLaMA-Factory
pip install -e ".[torch,metrics]"
# 运行UI, 注意在 LLaMA-Factory 根目录执行
llamafactory-cli webui
deepseek-ai/DeepSeek-R1-Distill-Qwen-1.5B
会下载到本地，本地目录如下：
加载模型
训练数据
使用官方预设（我显卡不行，所以就用了一条，本次走这个流程完全是为了学习使用，随便一跑，显存就满）
[{"instruction": "识别并解释给定列表中的两个科学理论：细胞理论和日心说。","input": "","output": "细胞理论是生物科学的一个理论，它认为所有生命体都是由微小的基本单元——细胞所构成。这是生物学的一个基础理论，认为细胞是所有生物的基本结构和功能单位，所有的生物都是由一个或多个细胞组成，细胞只能通过细胞分裂产生新的细胞。这一理论由薛定谔、施瓦内和雪莱于1839年首次提出。\n\n日心说是指太阳是太阳系的中心，也就是说，行星围绕太阳旋转的理论。这个理论打破了传统的地心说观点，认为地球并不是宇宙的中心。日心说的提出者是尼古拉·哥白尼，他在16世纪初发表了他的著作《天体运行论》，阐述了太阳系行星围绕太阳运行的模型，为天文学的发展做出了巨大贡献。"}
]
预览命令
llamafactory-cli train `--stage sft `--do_train True `--model_name_or_path deepseek-ai/DeepSeek-R1-Distill-Qwen-1.5B `--preprocessing_num_workers 16 `--finetuning_type lora `--template deepseek3 `--flash_attn auto `--dataset_dir data `--dataset alpaca_zh_demo `--cutoff_len 2048 `--learning_rate 5e-05 `--num_train_epochs 3.0 `--max_samples 100000 `--per_device_train_batch_size 2 `--gradient_accumulation_steps 8 `--lr_scheduler_type cosine `--max_grad_norm 1.0 `--logging_steps 5 `--save_steps 100 `--warmup_steps 0 `--packing False `--report_to none `--output_dir saves\DeepSeek-R1-1.5B-Distill\lora\train_2025-03-01-19-38-21 `--bf16 True `--plot_loss True `--trust_remote_code True `--ddp_timeout 180000000 `--include_num_input_tokens_seen True `--optim adamw_torch `--lora_rank 8 `--lora_alpha 16 `--lora_dropout 0 `--lora_target all
开始训练控制台LOG
训练结束
导出界面
导出微调模型
# 导出模型后, 在导出模型的根目录执行 ollama 命令
ollama create my-deepseek-r1 -f ./Modelfile\# 下面就是精调模型
(base) PS C:\Users\24607> ollama list
NAME ID SIZE MODIFIED
my-deepseek-r1:latest d2e8cdd3cc91 3.6 GB 1 second ago
deepseek-r1:8b 28f8fd6cdc67 4.9 GB 2 weeks ago
(base) PS C:\Users\24607>
源码获取
关注gzh后端码匠，回复"DeepSeek"消息即可获取完整源码。
结语
通过本文的进阶指南，我们成功将原有的 Spring Boot3 + Vue2 AI 对话系统升级为 Spring Boot3 + Vue3 架构，并引入了上下文感知和模型微调技术。技术无止境，创新不停歇。期待与大家在 AI 技术的道路上共同进步，创造更多可能！