网站主机与服务器,广州越秀区发布,宁波静态网站建设,域名注册服务的公司网站20分钟上手DeepSeek开发#xff1a;SpringBoot Vue2快速构建AI对话系统 前言 在生成式AI技术蓬勃发展的今天#xff0c;大语言模型已成为企业智能化转型和个人效率提升的核心驱动力。作为国产大模型的优秀代表#xff0c;DeepSeek凭借其卓越的中文语义理解能力和开发者友…20分钟上手DeepSeek开发SpringBoot Vue2快速构建AI对话系统 前言 在生成式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.9Ollama。 后端项目初始化 pom依赖 ?xml version1.0 encodingUTF-8? modelVersion4.0.0/modelVersion parentgroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-parent/artifactIdversion3.3.8/versionrelativePath/!-- lookup parent from repository -- /parent groupIdcn.com.codingce/groupId artifactIddeepseek/artifactId version0.0.1-SNAPSHOT/version namedeepseek/name url/ licenseslicense/ /licenses developersdeveloper/ /developers scmconnection/developerConnection/tag/url/ /scm propertiesjava.version17/java.versionspring-ai.version1.0.0-M5/spring-ai.version /properties dependenciesdependencygroupIdorg.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/dependencydependencygroupIdorg.springframework.ai/groupIdartifactIdspring-ai-bom/artifactIdversion${spring-ai.version}/versiontypepom/typescopeimport/scope/dependency /dependencies buildpluginspluginartifactIdspring-boot-maven-plugin/artifactId/plugin/plugins /build /projectyml配置文件 server:port: 8080 spring:ai:ollama:base-url: http://localhost:11434chat:model: deepseek-r1:8bapplication:name: codingce-deepspeekwebflux:base-path: /codec:max-in-memory-size: 10MB logging:level:cn.com.codingce.deepseek: DEBUGorg.springframework.web: INFO核心服务实现 DeepSeekService 是一个核心服务类主要负责处理与 Ollama 的通信和数据处理。整个服务采用响应式编程模式Flux实现非阻塞式处理提高系统性能。同时通过日志记录确保服务的可靠性和稳定性。 package cn.com.codingce.deepseek.service;import cn.com.codingce.deepseek.model.Message; import cn.com.codingce.deepseek.model.MessageType; import cn.com.codingce.deepseek.model.OllamaResponse; import cn.com.codingce.deepseek.model.StreamResponse; import com.fasterxml.jackson.databind.ObjectMapper; import lombok.AllArgsConstructor; import lombok.extern.slf4j.Slf4j; import org.springframework.ai.ollama.OllamaClient; import org.springframework.ai.ollama.OllamaException; import org.springframework.stereotype.Service; import reactor.core.publisher.Flux; import reactor.core.publisher.Mono;import java.io.IOException; import java.util.ArrayList; import java.util.List;Service AllArgsConstructor Slf4j public class DeepSeekService {private final OllamaClient ollamaClient;private final ObjectMapper objectMapper;public FluxMessage generateResponse(String prompt) {return Flux.create(sink - {ListString messages new ArrayList();messages.add(prompt);try {ollamaClient.chat(deepseek-r1:8b, messages, response - {try {OllamaResponse ollamaResponse objectMapper.readValue(response, OllamaResponse.class);String content ollamaResponse.getContent();if (content ! null !content.isEmpty()) {sink.next(new Message(MessageType.ASSISTANT, content));}} catch (IOException e) {log.error(Error processing Ollama response, e);sink.error(e);}}, error - {log.error(Error from Ollama, error);sink.error(new RuntimeException(Error from Ollama, error));}, () - {log.info(Ollama chat completed);sink.complete();});} catch (OllamaException e) {log.error(Error initiating Ollama chat, e);sink.error(e);}});} }WebSocket控制器 WebSocketController 是一个 WebSocket 控制器用于处理前端与后端之间的实时通信。它支持消息的接收和发送并将用户的消息传递给 DeepSeekService然后将 AI 的响应实时推送给前端。 package cn.com.codingce.deepseek.controller;import cn.com.codingce.deepseek.model.Message; import cn.com.codingce.deepseek.service.DeepSeekService; import org.springframework.messaging.handler.annotation.MessageMapping; import org.springframework.messaging.handler.annotation.SendTo; import org.springframework.stereotype.Controller; import reactor.core.publisher.FluxSink;import java.util.concurrent.ConcurrentHashMap;Controller public class WebSocketController {private final DeepSeekService deepSeekService;private final ConcurrentHashMapString, FluxSinkMessage sinks new ConcurrentHashMap();public WebSocketController(DeepSeekService deepSeekService) {this.deepSeekService deepSeekService;}MessageMapping(/chat)public void receiveMessage(String sessionId, String message) {sinks.putIfAbsent(sessionId, Flux.sink());FluxSinkMessage sink sinks.get(sessionId);deepSeekService.generateResponse(message).subscribe(sink::next, sink::error, sink::complete);}SendTo(/topic/messages/{sessionId})public FluxMessage sendMessage(String sessionId) {return Flux.create(sinks.get(sessionId));} }前端项目初始化 项目结构 前端项目基于 Vue2 构建主要包含以下目录结构 src/ ├── assets/ ├── components/ │ └── ChatWindow.vue ├── App.vue ├── main.js安装依赖 在项目根目录下运行以下命令安装依赖 npm install主组件 App.vue 是主组件用于加载聊天窗口组件。 templatediv idappChatWindow //div /templatescript import ChatWindow from ./components/ChatWindow.vue;export default {name: App,components: {ChatWindow} }; /scriptstyle #app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px; } /style聊天窗口组件 ChatWindow.vue 是聊天窗口组件负责显示消息和处理用户输入。 templatediv classchat-windowdiv classmessagesdiv v-formessage in messages :keymessage.id classmessagediv :class[message-content, { assistant: message.type assistant }]div v-htmlmessage.content/div/div/div/divinput v-modelinputMessage keyup.entersendMessage placeholderType a message... //div /templatescript import { WebSocketSubject } from rxjs/webSocket; import DOMPurify from dompurify;export default {name: ChatWindow,data() {return {messages: [],inputMessage: ,sessionId: Date.now().toString(),ws: null};},mounted() {this.connectWebSocket();},methods: {connectWebSocket() {this.ws new WebSocketSubject(ws://localhost:8080/ws/chat/${this.sessionId});this.ws.subscribe((message) {const sanitizedMessage DOMPurify.sanitize(message.content);this.messages.push({ ...message, content: sanitizedMessage });},(error) console.error(WebSocket error:, error),() console.log(WebSocket closed));},sendMessage() {if (this.inputMessage.trim()) {this.ws.next(this.inputMessage);this.messages.push({ id: Date.now(), type: user, content: this.inputMessage });this.inputMessage ;}}},beforeDestroy() {if (this.ws) {this.ws.complete();}} }; /scriptstyle scoped .chat-window {width: 100%;max-width: 600px;margin: 0 auto;border: 1px solid #ccc;padding: 10px;border-radius: 5px; }.messages {height: 400px;overflow-y: scroll;margin-bottom: 10px; }.message {margin-bottom: 10px; }.message-content {padding: 5px;border-radius: 5px; }.message-content.assistant {background-color: #f0f0f0; }input {width: 100%;padding: 10px;box-sizing: border-box; } /style运行项目 启动后端 在后端项目启动 Spring Boot 应用 启动前端 在前端项目根目录下运行以下命令启动 Vue 项目 npm run serve打开浏览器访问 http://localhost:8080即可看到聊天窗口。输入消息后即可与 AI 进行实时对话。 希望这篇文章能帮助你快速上手 DeepSeek 开发开启你的 AI 应用构建之旅