可视化建网站,福州网站建设好的公司,seo研究中心道一老师,陕建云采电子商务平台前言
在生成式AI技术蓬勃发展的今天#xff0c;大语言模型已成为企业智能化转型和个人效率提升的核心驱动力。作为国产大模型的优秀代表#xff0c;DeepSeek凭借其卓越的中文语义理解能力和开发者友好的API生态#xff0c;正在成为构建本土化AI应用的首选平台。
本文将以S…前言
在生成式AI技术蓬勃发展的今天大语言模型已成为企业智能化转型和个人效率提升的核心驱动力。作为国产大模型的优秀代表DeepSeek凭借其卓越的中文语义理解能力和开发者友好的API生态正在成为构建本土化AI应用的首选平台。
本文将以Spring Boot3Vue2全栈技术为基础手把手带你打造一个具备以下特性的AI对话系统
实时流式对话交互体验支持Markdown代码块/表格的专业级内容渲染前端安全防护与响应式界面设计高扩展性的API接入架构。
为什么选择DeepSeek
中文语境专家针对中文语法特点优化歧义识别准确率提升40%极速响应国内服务器部署平均API延迟800ms成本可控免费试用阶梯定价模式个人项目月均成本低至5元流式输出支持chunked数据传输避免用户长时间等待。
技术架构解析
后端技术栈
SpringBoot 3.X快速构建RESTful APIWebFlux响应式流处理框架QPS可达3000Lombok通过注解简化POJO模型。
前端技术栈
Vue2.XWebSocket双向实时通信支持XSS防御DOMPurify过滤恶意脚本。
环境准备
JDK 17Node.js 12Maven 3.6ollama。
后端项目初始化 pom依赖
?xml version1.0 encodingUTF-8?
project xmlnshttp://maven.apache.org/POM/4.0.0 xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersionparentgroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-parent/artifactIdversion3.3.8/versionrelativePath/ !-- lookup parent from repository --/parentgroupIdcn.com.codingce/groupIdartifactIddeepseek/artifactIdversion0.0.1-SNAPSHOT/versionnamedeepseek/namedescription微信公众号: 后端码匠/descriptionurl/licenseslicense//licensesdevelopersdeveloper//developersscmconnection/developerConnection/tag/url//scmpropertiesjava.version17/java.versionspring-ai.version1.0.0-M5/spring-ai.version/propertiesdependenciesdependencygroupIdorg.springframework.ai/groupIdartifactIdspring-ai-ollama-spring-boot-starter/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-test/artifactIdscopetest/scope/dependencydependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactId/dependencydependencygroupIdcom.fasterxml.jackson.core/groupIdartifactIdjackson-databind/artifactId/dependencydependencygroupIdorg.apache.commons/groupIdartifactIdcommons-lang3/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-websocket/artifactId/dependency/dependenciesdependencyManagementdependenciesdependencygroupIdorg.springframework.ai/groupIdartifactIdspring-ai-bom/artifactIdversion${spring-ai.version}/versiontypepom/typescopeimport/scope/dependency/dependencies/dependencyManagementbuildpluginsplugingroupIdorg.springframework.boot/groupIdartifactIdspring-boot-maven-plugin/artifactId/plugin/plugins/build/projectyml 配置文件
server:port: 8080spring:ai:ollama:base-url: http://localhost:11434chat:model: deepseek-r1:8bapplication:name: codingce-deepspeekwebflux:base-path: /codec:max-in-memory-size: 10MBlogging:level:cn.com.codingce.deepseek: DEBUGorg.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
public class DeepSeekService {Autowiredprivate OllamaChatModel ollamaChatModel;public FluxString handleChatWebSocket(String question) {return sendChatRequest(question).doOnNext(response - log.info(handleChatWebSocket 发送响应: {}, response)).onErrorResume(e - {log.error(handleChatWebSocket WebSocket通信错误: {}, e.getMessage());return Flux.just(抱歉, 服务器处理请求时发生错误, 请稍后重试.);});}public FluxString 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 内容提供精细化样式支持包括标题、代码块、表格、列表等确保内容展示既专业又美观。整体设计注重用户体验不仅优化了交互细节还完善了状态提示和错误处理机制使聊天体验更加流畅。
templatediv classchat-containerdiv classmessage-container refmessageContainerdiv v-for(message, index) in messages :keyindex:class[message, message.type -message]div v-ifmessage.type bot v-htmlrenderMarkdown(message.content)/divdiv v-else{{ message.content }}/div/div/divdiv classinput-containerinput v-modelinputMessage keyup.entersendMessageplaceholder输入您的问题...(微信公众号:后端码匠)classmessage-input:disabled!isConnectedbutton clicksendMessage classsend-button:disabled!isConnected发送/button/divdiv v-if!isConnected classconnection-status连接已断开正在重新连接.../div/div
/template
...效果展示
后端 上图显示了项目运行时的日志信息记录了 WebSocket 连接和 ollama 的交互过程包括消息接收和响应的详细日志。
前端 上图为 AI 对话系统的用户界面截图。整个界面支持 Markdown 格式的渲染使得回答内容层次分明易于阅读。
源码获取
关注gzh后端码匠回复DeepSeek消息即可获取完整源码。
结语
通过本文的实践我们成功搭建了一个基于 Spring Boot 和 Vue 的 AI 对话系统。该系统具备以下特点
实时对话 基于 WebSocket 实现流式响应带来更流畅的交互体验优雅展示 支持 Markdown 格式渲染让消息显示更清晰直观稳定可靠 内置完善的错误处理机制确保系统高效稳定运行易于扩展 代码结构清晰方便后续功能拓展和优化。
这一系统不仅能够用于智能客服 在线问答等场景还能结合大模型能力进一步提升智能化水平。未来我们可以继续优化性能增强上下文理解能力并探索更多创新应用场景让 AI 交互变得更加智能自然
