使用cursor打造智能客服demo

使用Cursor结合DeepSeek API构建智能客服Demo的完整实现方案如下：

一、系统架构设计

前端：HTML页面 + JavaScript（SSE客户端）
后端：Spring Boot 2.0（Java）
AI模型：DeepSeek V3 API
通信协议：HTTP SSE（Server-Sent Events）
知识库：本地faq.txt文件（UTF-8编码）

二、核心代码实现1. 前端实现（HTML+JS）<!DOCTYPE html><html><head> <title>智能客服系统</title> <style> #chat-container { width: 400px; margin: 0 auto; border: 1px solid #ccc; } #messages { height: 500px; overflow-y: scroll; padding: 10px; } #input-area { display: flex; padding: 10px; } #user-input { flex-grow: 1; padding: 8px; } button { padding: 8px 15px; } </style></head><body> <div id="chat-container"> <div id="messages"></div> <div id="歼手档input-area"> <input type="text" id="user-input" placeholder="请输入问题..."> <氏乱button onclick="sendMessage()">发送</button> </div> </div> <script> const messagesDiv = document.getElementById('messages'); function sendMessage() { const input = document.getElementById('user-input'); const question = input.value.trim(); if (!question) return; // 显示用户消息 addMessage('薯伍user', question); input.value = ''; // 建立SSE连接 const eventSource = new EventSource(`/api/chat?question=${encodeURIComponent(question)}`); eventSource.onmessage = (event) => { const data = JSON.parse(event.data); if (data.type === 'answer') { addMessage('bot', data.content); eventSource.close(); } }; eventSource.onerror = () => { addMessage('bot', '服务连接异常，请稍后再试'); eventSource.close(); }; } function addMessage(sender, content) { const messageDiv = document.createElement('div'); messageDiv.style.textAlign = sender === 'user' ? 'right' : 'left'; messageDiv.style.margin = '10px'; messageDiv.style.padding = '8px'; messageDiv.style.borderRadius = '5px'; messageDiv.style.backgroundColor = sender === 'user' ? '#daf3ff' : '#f0f0f0'; messageDiv.textContent = content; messagesDiv.appendChild(messageDiv); messagesDiv.scrollTop = messagesDiv.scrollHeight; } // 支持回车发送 document.getElementById('user-input').addEventListener('keypress', (e) => { if (e.key === 'Enter') sendMessage(); }); </script></body></html>2. 后端实现（Spring Boot）

pom.xml 核心依赖：

<dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> <version>2.7.0</version> </dependency> <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpclient</artifactId> <version>4.5.13</version> </dependency></dependencies>

主控制器类：

import org.springframework.web.bind.annotation.*;import org.springframework.http.MediaType;import org.springframework.beans.factory.annotation.Value;import java.io.*;import java.nio.file.*;import java.util.*;@RestController@RequestMapping("/api")public class ChatController { @Value("${deepseek.api.key}") private String apiKey; @Value("${deepseek.api.url}") private String apiUrl; private String knowledgeBase; // 初始化时加载知识库 @PostConstruct public void init() throws IOException { knowledgeBase = new String(Files.readAllBytes( Paths.get("faq.txt")), "UTF-8"); } @GetMapping(value = "/chat", produces = MediaType.TEXT_EVENT_STREAM_VALUE) public String chat(@RequestParam String question) { try { // 1. 构建完整上下文（知识库+用户问题） String context = knowledgeBase + "n用户问题：" + question; // 2. 调用DeepSeek API String response = callDeepSeekAPI(context); // 3. 返回SSE格式响应 return "data: {"type":"answer","content":"" + response.replace(""", """) + ""}nn"; } catch (Exception e) { return "data: {"type":"error","content":"服务处理异常"}nn"; } } private String callDeepSeekAPI(String context) throws IOException { // 实际调用DeepSeek API的实现 // 这里需要替换为真实的API调用代码 // 示例伪代码： /* CloseableHttpClient client = HttpClients.createDefault(); HttpPost post = new HttpPost(apiUrl); post.setHeader("Authorization", "Bearer " + apiKey); JSONObject params = new JSONObject(); params.put("model", "deepseek-v3"); params.put("messages", new JSONArray() .put(new JSONObject().put("role", "user").put("content", context))); post.setEntity(new StringEntity(params.toString())); CloseableHttpResponse response = client.execute(post); return EntityUtils.toString(response.getEntity()); */ // 临时模拟返回 return "这是模拟回答：" + context.substring(0, Math.min(30, context.length())); }}

应用配置类：

import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configurationpublic class WebConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { // 允许访问静态HTML页面 registry.addResourceHandler("/") .addResourceLocations("classpath:/static/"); }}3. 知识库文件（faq.txt）示例常见问题1：如何注册账号？回答：点击首页右上角"注册"按钮，填写手机号和验证码即可完成注册。常见问题2：会员有哪些权益？回答：会员享受免广告、专属客服、优先参与活动等特权。常见问题3：如何联系客服？回答：您可以通过以下方式联系我们：1. 客服电话：400-123-4567（工作日9:00-18:00）2. 邮箱：service@example.com3. 在线客服：点击官网右下角"在线咨询"按钮三、部署运行指南

环境准备：
JDK 1.8+
Maven 3.6+
申请DeepSeek API Key
配置文件：在src/main/resources/application.properties中添加：
deepseek.api.key=your_api_key_heredeepseek.api.url=
https://api.deepseek.com/v1/chatserver.port=8080
构建运行：
mvn clean packagejava -jar target/your-app-name.jar
访问系统：浏览器打开
http://localhost:8080

四、常见问题解决方案

SSE连接问题：
确保后端返回正确的Content-Type：text/event-stream
前端使用EventSourceAPI时检查跨域设置
API调用失败：
检查网络连接和API Key有效性
实现重试机制和错误处理
上下文处理优化：
对faq.txt实现分段加载
添加上下文记忆功能（最近5轮对话）

五、进阶优化建议

性能优化：
实现API调用连接池
添加请求缓存机制
功能增强：
支持多轮对话管理
添加用户反馈机制（点赞/踩）
安全加固：
实现API调用频率限制
敏感词过滤

完整项目已开源，可通过GitHub搜索Build-WebCustomerChatAgent-With-Cursor获取最新代码。实际开发中需根据DeepSeek API的具体文档调整调用参数和响应处理逻辑。

您可能感兴趣问答

Collapsible

热门标签

热点问答