Spring模板引擎负责服务端渲染，前端JS处理交互；通过data属性或初始化脚本传递数据，AJAX调用REST API实现异步更新，明确分工可兼顾首屏性能与用户体验。
前端JavaScript与Spring模板引擎（如Thymeleaf、FreeMarker）的配合，关键在于理解服务端渲染与客户端脚本的分工协作。Spring模板引擎负责在服务器端生成带有动态数据的HTML页面，而前端JS则在浏览器中处理用户交互、局部更新和异步请求。两者结合得当，既能保证首屏加载速度，又能实现丰富的交互体验。
1. 理解渲染时机：服务端 vs 客户端
Spring模板引擎在后端将数据填充到HTML模板中，生成完整的HTML返回给浏览器。此时，JS代码已经嵌入页面，但执行在DOM构建完成后。
- Thymeleaf 使用 th:text、th:each 等属性插入后端数据
- 前端JS通过 document.querySelector 或 jQuery 获取这些已渲染的元素进行操作
- 避免在JS中直接拼接HTML字符串来显示后端数据，应由模板引擎完成静态结构渲染
2. 数据传递：从后端到前端JS
如何让前端JS获取Spring后端传来的数据？有几种常用方式：
- 将数据写入 data- 属性，JS读取解析：
<div id="user" data-id="<span th:text="${user.id}"></span>"></div>
JS中：const userId = document.getElementById('user').dataset.id; - 在页面中嵌入初始化数据块：
<script>const INIT_DATA = <span th:serialize="${userInfo}"></span>;</script>
JS可直接使用 INIT_DATA 对象 - 对复杂交互，建议使用独立API接口，JS通过 fetch 或 axios 请求JSON数据
3. 异步交互：JS调用Spring后端API
页面初始化由模板引擎完成，后续动态操作交由JS通过AJAX实现。
立即学习“前端免费学习笔记（深入）”；
- Spring Boot中提供REST接口：
@RestController
public class ApiController {
@GetMapping("/api/data")
public MapgetData() { ... }
} - 前端JS发送请求：
fetch('/api/data')
.then(res => res.json())
.then(data => updateUI(data)); - 保持前后端职责清晰：模板引擎负责首屏，API接口负责数据变更和局部刷新
4. 实际开发建议
- 使用Thymeleaf时，可保留 id 和 class 供JS选择器使用，避免逻辑耦合
- 避免在JS中写大量HTML模板字符串，必要时可用 template 标签或前端框架
- 开启CORS支持，确保前端能正常调用后端API
- 开发阶段使用统一的数据格式约定，减少沟通成本
基本上就这些。核心是明确边界：Spring模板引擎做内容输出，前端JS做行为控制。两者通过结构化数据传递和标准API通信，就能高效协作，不复杂但容易忽略细节。合理设计，可以兼顾SEO友好性和用户体验。
