前后端连通性测试以及前端页面总体设计

一、项目核心架构概览先快速梳理项目的核心分层帮助理解前后端协作的基础前端原生 HTML 构建页面结构CSS 实现视觉样式JavaScript 处理交互与接口调用后端Spring Boot 搭建接口服务封装 RAGFlow API 调用逻辑维护用户会话状态核心链路用户前端输入问题 → 前端调用后端接口 → 后端对接 RAGFlow 平台 → 后端返回回答 → 前端渲染结果。二、前端页面从结构到交互的初步设计前端核心文件为chat.html、style.css、script.js设计目标是打造简洁、易用的智能问答交互界面核心分为「布局设计」「样式优化」「交互逻辑」三部分。1. 页面结构设计chat.html页面采用「容器化分层」思路核心分为三大区域结构清晰且易于维护div classchat-container!-- 头部标题Agent标识 --div classchat-header.../div!-- 消息展示区空状态/用户助手消息 --div classchat-messages idchatMessages.../div!-- 输入区自适应文本框发送按钮 --div classchat-input-area.../div/div头部展示产品名称与 Agent ID明确当前交互的智能体消息区默认显示「开始对话吧」空状态用户发送消息后动态渲染对话气泡输入区支持多行输入、自适应高度降低用户输入成本。2. 视觉与交互样式style.css为了提升用户体验重点优化了「消息气泡」「打字动效」「输入框交互」三大核心样式消息气泡差异化用户消息使用蓝色系背景助手消息使用白色系通过flex-direction实现左右分栏展示打字动效通过 CSS 动画实现「三个圆点轮流跳动」的加载状态模拟智能体思考过程自适应输入框监听输入事件动态调整文本框高度同时支持聚焦态边框高亮提升交互反馈。核心样式片段打字动效.typing-dot {width: 8px;height: 8px;background: #a0b3d9;border-radius: 50%;animation: pulse 1.2s infinite;}.typing-dot:nth-child(2) { animation-delay: 0.2s; }.typing-dot:nth-child(3) { animation-delay: 0.4s; }keyframes pulse {0%,60%,100% { opacity: 0.4; transform: scale(0.9); }30% { opacity: 1; transform: scale(1.2); }}3. 交互逻辑实现script.js前端交互的核心是「消息发送 - 加载 - 结果渲染」的闭环同时维护会话 ID 保证上下文连续性核心流程监听发送按钮 / 回车事件获取用户输入并渲染到页面显示「打字动效」调用后端/api/chat/send接口接收后端返回的回答和会话 ID渲染助手消息隐藏加载状态保存会话 ID后续请求携带以保证上下文交互。核心接口调用代码async function sendMessage() {const question messageInput.value.trim();if (!question || isLoading) return;appendMessage(user, question); // 渲染用户消息showTypingIndicator(); // 显示加载动效isLoading true;try {const url ${CHAT_ENDPOINT}?userId${encodeURIComponent(USER_ID)};const response await fetch(url, {method: POST,headers: { Content-Type: application/json },body: JSON.stringify(question)});const data await response.json();appendMessage(assistant, data.content || 未获取到回答); // 渲染助手消息if (data.sessionId) currentSessionId data.sessionId; // 维护会话ID} catch (error) {appendMessage(assistant, ❌ 请求失败: ${error.message});} finally {hideTypingIndicator();isLoading false;}}三、后端接口支撑前端的核心服务设计后端基于 Spring Boot 构建核心目标是「封装 RAGFlow API」「维护用户会话」「提供前端调用接口」关键文件包括ChatController.java、RAGFlowService.java、RAGFlowApiClient.java。1. 跨域配置CorsConfig.java前后端分离架构下跨域是首要解决的问题。项目通过CorsConfig配置允许前端域的请求Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping(/**) // 允许所有接口.allowedOrigins(http://127.0.0.1:5500, http://localhost:5500) // 前端Live Server地址.allowedMethods(GET, POST, PUT, DELETE, OPTIONS).allowedHeaders(*).allowCredentials(true).maxAge(3600);}配置覆盖了前端常用的 Live Server 端口5500确保跨域请求不被拦截。2. 核心接口ChatController.java提供前端调用的唯一接口/api/chat/send接收用户 ID 和问题返回回答与会话 IDPostMapping(/send)public ChatResponse sendMessage(RequestParam String userId, RequestBody String question) {return ragFlowService.sendMessage(userId, question);}3. 会话与业务逻辑RAGFlowService.java使用ConcurrentHashMap维护用户 - 会话 ID 的映射保证同一用户的会话连续性private final ConcurrentHashMapString, String sessionStore new ConcurrentHashMap();public ChatResponse sendMessage(String userId, String question) {String sessionId sessionStore.get(userId);if (sessionId null) {sessionId apiClient.createSession(); // 无会话则创建sessionStore.put(userId, sessionId);}// 调用RAGFlow API获取回答JsonNode responseNode apiClient.converseWithAgent(question, sessionId);// 封装返回结果ChatResponse response new ChatResponse();response.setSessionId(sessionId);response.setContent(/* 解析RAGFlow返回的回答 */);return response;}4. RAGFlow API 封装RAGFlowApiClient.java封装创建会话、发送问题的核心逻辑对接 RAGFlow 平台的 REST API简化服务层调用。四、前后端连通性测试从启动到验证完成前端设计和后端开发后核心验证「前端请求能否正常到达后端」「后端能否正确返回结果」「会话是否连续」三大核心点。1. 测试前置准备后端启动RagflowDemoApplication.java确保 Spring Boot 服务运行在 8080 端口前端使用 VS Code Live Server 启动chat.html默认运行在 5500 端口配置检查确认RAGFlowConfig.java中的apiKey、agentId、baseUrl与 RAGFlow 平台一致。2. 核心测试步骤步骤 1基础接口连通性验证前端输入问题点击发送打开浏览器开发者工具→ 网络 → 筛选send请求验证关键点请求方法POSTURLhttp://localhost:8080/api/chat/send?userIduser_001响应状态200 OK响应体包含content和sessionId。步骤 2会话连续性验证第一次发送问题记录返回的sessionId第二次发送关联问题检查前端请求参数确认第二次请求仍使用同一个sessionId验证 RAGFlow 返回的回答是否包含上下文。步骤 3异常场景测试跨域测试故意修改前端端口验证是否触发跨域错误空输入测试前端输入空内容验证后端是否能处理空请求接口错误测试修改 RAGFlow 的apiKey为错误值验证前端是否能显示友好的错误提示。五、总结与优化方向本次工作完成了「前端交互页面设计」和「前后端连通性验证」的核心目标实现了「用户输入→后端处理→RAGFlow 交互→结果渲染」的完整链路。后续根据实现的功能对前端页面进行细化设计并保证前后端可以正常交互。