一、前端交互流程(以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);
}
));
}
三、网络通信细节
-
协议选择
- POST优先:推荐使用POST传输原始文本,避免URL长度限制
- Content-Type处理:
<JAVA>
@PostMapping(produces = MediaType.APPLICATION_JSON_VALUE)
-
安全机制
- 参数过滤:前端对响应内容执行XSS过滤
<JAVASCRIPT>
processResponse(rawResponse) { return String(rawResponse) .replace(/</g, '<') .replace(/>/g, '>') }
- 认证加密:API Key通过环境变量配置,不参与代码提交
- 参数过滤:前端对响应内容执行XSS过滤
-
性能调优
- 连接池复用:使用专用RestTemplate实例管理硅基API连接
- 缓存策略:预留temperature参数扩展响应多样性控制
<JAVA>
// CompletionRequest.java private double temperature = 0.7; // 默认创意系数