一、前端交互流程（以windows.vue为例）

Step 1: 用户输入

• 触发方式：用户在输入框中输入问题（如"水稻病虫害防治方法"），点击发送按钮或键盘回车。
• 输入限制：空格自动过滤（inputText.trim()），为空时禁用发送。

Step 2: 消息状态管理

// 添加用户消息
this.addMessage({ type: 'user', content: userInput });
// 添加AI加载占位
const aiMsg = this.addMessage({ type: 'ai', content: '', isLoading: true });

Step 3: 网络请求封装

// index.js中定义的API调用方式
export function chatWithBody(prompt) {
  return request({
    url: '/api/ai/chat',
    method: 'post',
    data: prompt, // 原始文本直接传递
    headers: { 'Content-Type': 'text/plain' }
  })
}

二、后端通信流程

Step 1: 请求路由分发

• 双协议支持：通过AiChatController提供GET/POST双接口

@PostMapping("/chat") // 支持JSON或纯文本
@GetMapping("/chat")  // 传统参数形式

Step 2: 服务层处理（AiChatServiceImpl.java）

public String generateResponse(String input) {
   // 构建符合硅基API标准的请求体
   CompletionRequest request = new CompletionRequest();
   request.setMessages(Arrays.asList(
       new Message("user", input) // 角色系统支持扩展
   ));
   
   // 发送HTTP请求
   CompletionResponse response = restTemplate.postForObject(
       apiUrl, request, CompletionResponse.class);
}

Step 3: 第三方API交互 (关键网络配置)

// SiliconFlowConfig.java
@Bean
public RestTemplate siliconFlowRestTemplate() {
  factory.setConnectTimeout(60_000); // 60秒超时
  restTemplate.setInterceptors(Collections.singletonList(
      request -> {
        // 自动附加API密钥认证
        request.getHeaders().add("Authorization", "Bearer " + apiKey);
        return execution.execute(request, body);
      }
  ));
}

三、网络通信细节

1. 协议选择

   • POST优先：推荐使用POST传输原始文本，避免URL长度限制
   • Content-Type处理：

     <JAVA>

     @PostMapping(produces = MediaType.APPLICATION_JSON_VALUE)

2. 安全机制

   • 参数过滤：前端对响应内容执行XSS过滤

     <JAVASCRIPT>

     processResponse(rawResponse) {
       return String(rawResponse)
         .replace(/</g, '&lt;') 
         .replace(/>/g, '&gt;')
     }

   • 认证加密：API Key通过环境变量配置，不参与代码提交

3. 性能调优

   • 连接池复用：使用专用RestTemplate实例管理硅基API连接
   • 缓存策略：预留temperature参数扩展响应多样性控制

     <JAVA>

     // CompletionRequest.java
     private double temperature = 0.7; // 默认创意系数