Spring AI聊天助手开发：前端与流式输出实践

1. Spring AI 聊天助手前端页面搭建

1.1 静态资源目录规范

在Spring Boot项目中，静态资源必须放置在特定目录下才能被自动加载。根据Spring Boot约定优于配置的原则，静态资源默认查找路径为：

• /META-INF/resources/
• /resources/
• /static/
• /public/

其中/static/是最常用的选择。如果创建其他名称的目录，需要额外配置，因此建议严格遵守这个约定。我曾在项目中尝试使用/assets/目录，结果花费半小时排查404问题，最后发现是目录命名不规范导致的。

1.2 前端页面结构设计

这个聊天界面采用了经典的垂直三栏布局：

html复制<div class="chat-container">
    <div class="chat-header">...</div>  <!-- 顶部标题栏 -->
    <div class="chat-body">...</div>    <!-- 消息展示区域 -->
    <div class="chat-footer">...</div>  <!-- 底部输入区 -->
</div>

关键CSS技巧：

1. 使用flex布局确保在不同设备上都能居中显示
2. 通过max-width: 800px限制最大宽度，避免在大屏幕上显示过宽
3. 阴影和圆角设计增强视觉层次感
4. overflow-y: auto实现消息区域自动滚动

提示：现代CSS推荐使用rem/em单位而非px，这样可以更好地适配不同DPI的设备。但在简单demo中px更直观。

1.3 交互实现细节

前端使用EventSource API实现服务器推送(SSE)：

javascript复制eventSource = new EventSource(`http://localhost:8080/ai/chat?prompt=${encodeURIComponent(prompt)}`);

eventSource.onmessage = function(event) {
    fullText += event.data;
    responseEl.innerHTML = `<div class="