前后端连通性测试以及前端页面总体设计
一、项目核心架构概览
先快速梳理项目的核心分层，帮助理解前后端协作的基础：
前端：原生 HTML 构建页面结构，CSS 实现视觉样式，JavaScript 处理交互与接口调用；
后端：Spring Boot 搭建接口服务，封装 RAGFlow API 调用逻辑，维护用户会话状态；
核心链路：用户前端输入问题 → 前端调用后端接口 → 后端对接 RAGFlow 平台 → 后端返回回答 → 前端渲染结果。
二、前端页面：从结构到交互的初步设计
前端核心文件为chat.html、style.css、script.js，设计目标是打造简洁、易用的智能问答交互界面，核心分为「布局设计」「样式优化」「交互逻辑」三部分。
1. 页面结构设计（chat.html）
页面采用「容器化分层」思路，核心分为三大区域，结构清晰且易于维护：
<div class="chat-container">
<!-- 头部：标题+Agent标识 -->
<div class="chat-header">...</div>
<!-- 消息展示区：空状态/用户&助手消息 -->
<div class="chat-messages" id="chatMessages">...</div>
<!-- 输入区：自适应文本框+发送按钮 -->
<div class="chat-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配置允许前端域的请求：
@Override
public 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 和问题，返回回答与会话 ID：
@PostMapping("/send")
public ChatResponse sendMessage(@RequestParam String userId, @RequestBody String question) {
return ragFlowService.sendMessage(userId, question);
}
3. 会话与业务逻辑（RAGFlowService.java）
使用ConcurrentHashMap维护用户 - 会话 ID 的映射，保证同一用户的会话连续性：
private final ConcurrentHashMap<String, 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请求；
验证关键点：
请求方法：POST，URL：http://localhost:8080/api/chat/send?userId=user_001；
响应状态：200 OK；
响应体：包含content和sessionId。
步骤 2：会话连续性验证
第一次发送问题，记录返回的sessionId；
第二次发送关联问题；
检查前端请求参数：确认第二次请求仍使用同一个sessionId；
验证 RAGFlow 返回的回答是否包含上下文。
步骤 3：异常场景测试
跨域测试：故意修改前端端口，验证是否触发跨域错误；
空输入测试：前端输入空内容，验证后端是否能处理空请求；
接口错误测试：修改 RAGFlow 的apiKey为错误值，验证前端是否能显示友好的错误提示。
五、总结与优化方向
本次工作完成了「前端交互页面设计」和「前后端连通性验证」的核心目标，实现了「用户输入→后端处理→RAGFlow 交互→结果渲染」的完整链路。后续根据实现的功能对前端页面进行细化设计，并保证前后端可以正常交互。