当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript与SpringBoot整合指南

JavaScript与SpringBoot整合指南

2025-11-28 23:13:11 0浏览收藏

一分耕耘，一分收获！既然都打开这篇《JavaScript与SpringBoot集成全攻略》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

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如何与SpringBoot集成_JavaScript与SpringBoot集成的完整实现方法

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 接口

创建一个简单的用户管理接口示例：

@RestController
@RequestMapping("/api/users")
@CrossOrigin(origins = "http://localhost:3000") // 允许前端域名访问
public class UserController {

    @GetMapping
    public List<User> getAllUsers() {
        return Arrays.asList(
            new User(1, "Alice"),
            new User(2, "Bob")
        );
    }

    @PostMapping
    public ResponseEntity<String> 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");
            }
        };
    }
}

确保前端请求能顺利到达后端接口。