JavaScript与Spring Boot集成通过前后端分离架构实现，前端用Vue/React等框架处理交互，后端用Spring Boot提供RESTful API。1. Spring Boot控制器暴露接口，使用@CrossOrigin或全局配置解决跨域；2. 前端用fetch或Axios发送HTTP请求获取数据或提交操作；3. 可选将前端打包文件放入src/main/resources/static目录由Spring Boot托管静态资源；4. 开发时通过CORS配置允许localhost:3000访问；5. 进阶可集成JWT实现认证，前端登录后在Authorization头携带Bearer token，Spring Security验证合法性。两者通过标准HTTP通信，职责分离，协同工作。
JavaScript 与 Spring Boot 的集成主要体现在前后端分离架构中，前端使用 JavaScript（或其框架如 Vue、React）负责页面展示和用户交互，后端使用 Spring Boot 提供 RESTful API 接口。以下是完整的集成实现方法。
1. 前后端分离架构设计
Spring Boot 作为后端服务，通过控制器暴露接口，JavaScript 前端通过 HTTP 请求调用这些接口获取数据或提交操作。
典型结构：
- Spring Boot 项目运行在 http://localhost:8080
- 前端项目（HTML + JS）运行在 http://localhost:3000 或静态资源由 Spring Boot 托管
- 前端使用 fetch 或 Axios 发送请求
2. 后端：Spring Boot 提供 REST 接口
创建一个简单的用户管理接口示例：
立即学习“Java免费学习笔记（深入）”；
@RestController
@RequestMapping("/api/users")
@CrossOrigin(origins = "http://localhost:3000") // 允许前端域名访问
public class UserController {
@GetMapping
public List getAllUsers() {
return Arrays.asList(
new User(1, "Alice"),
new User(2, "Bob")
);
}
@PostMapping
public ResponseEntity createUser(@RequestBody User user) {
return ResponseEntity.ok("用户 " + user.getName() + " 创建成功");
}
}
@CrossOrigin 注解解决跨域问题，也可通过配置类统一处理。
3. 前端：JavaScript 调用接口
使用原生 fetch 或 Axios 与 Spring Boot 通信。
使用 fetch 获取用户列表：
fetch('http://localhost:8080/api/users')
.then(response => response.json())
.then(users => {
users.forEach(user => {
console.log(user.name);
});
})
.catch(error => console.error('Error:', error));
使用 Axios 提交数据：
axios.post('http://localhost:8080/api/users', {
id: 3,
name: 'Charlie'
})
.then(response => {
alert(response.data);
})
.catch(error => {
console.error(error);
});
4. 静态资源托管（可选方案）
若不想前后端独立部署，可将 JavaScript 前端打包后的文件放入 Spring Boot 的 src/main/resources/static 目录。
- 构建前端项目（如 npm run build）
- 将生成的 JS、CSS、HTML 文件复制到 static 目录
- Spring Boot 自动提供静态资源服务
- 访问 http://localhost:8080 即可加载前端页面
此时 JavaScript 可直接相对路径请求 API，避免跨域问题。
5. 处理跨域（CORS）
开发阶段前后端不同端口，需配置 CORS。
全局配置示例：
@Configuration
public class CorsConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**")
.allowedOrigins("http://localhost:3000")
.allowedMethods("GET", "POST", "PUT", "DELETE");
}
};
}
}
确保前端请求能顺利到达后端接口。
6. 用户认证与安全（进阶）
使用 JWT 实现登录验证：
- 前端登录后收到 token
- 后续请求在 Header 中携带 token：
Authorization: Bearer - Spring Security 验证 token 合法性
- JavaScript 使用拦截器自动附加 token
