如何使用SpringBoot实现前后端分离架构？

八股文_Springboot面试题 0 156

参考回答

使用 Spring Boot 实现前后端分离架构，主要是通过 RESTful API 提供后端服务，前端通过 AJAX 或 Fetch 请求访问这些接口。前后端分离的核心理念是将前端和后端的职责进行明确划分，前端负责用户界面的展示和交互，后端负责业务逻辑的处理和数据提供。

创建一个 RESTful API 服务：使用 Spring Boot 提供 RESTful 风格的 API，利用 @RestController 或 @Controller 配合 @ResponseBody 来处理 HTTP 请求。
前端通过 AJAX 或 Fetch 请求后端接口：前端可以使用 JavaScript 通过 AJAX 或 Fetch API 向 Spring Boot 后端发起请求，并获取响应数据。
跨域问题处理：由于前后端分离时前端和后端通常部署在不同的端口或者域名下，所以需要处理跨域请求问题。
静态资源托管：Spring Boot 还支持静态资源的托管，可以将前端构建好的静态文件（如 HTML、CSS、JavaScript）部署在后端服务器上，供客户端访问。

详细讲解与拓展

1. 创建 RESTful API 服务

在 Spring Boot 中创建 RESTful API 主要通过 @RestController 注解，@RequestMapping 或 @GetMapping、@PostMapping 等注解来定义 API 接口。

RESTful API 示例：

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class GreetingController {

    @GetMapping("/greet")
    public String greet() {
        return "Hello, World!";
    }
}

这个接口将响应一个 GET 请求，返回 Hello, World! 字符串。前端可以通过 AJAX 或 Fetch 请求这个接口，获取数据。

2. 前端通过 AJAX 或 Fetch 请求后端接口

前端通过 JavaScript 的 AJAX 或 Fetch API 来请求 Spring Boot 提供的 RESTful 接口，并处理返回的数据。

前端使用 Fetch 请求的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SpringBoot Frontend</title>
</head>
<body>
    <h1>Welcome to Spring Boot Frontend!</h1>
    <button id="getGreeting">Get Greeting</button>
    <p id="greeting"></p>

    <script>
        document.getElementById("getGreeting").addEventListener("click", function() {
            fetch("http://localhost:8080/greet")
                .then(response => response.text())
                .then(data => {
                    document.getElementById("greeting").innerText = data;
                })
                .catch(error => console.error('Error:', error));
        });
    </script>
</body>
</html>

在这个示例中，前端点击按钮后，使用 Fetch 向后端接口 /greet 发送请求，获取响应数据后显示在页面上。

3. 跨域问题处理

前后端分离时，前端和后端通常会部署在不同的域或端口上，因此需要处理跨域请求问题。Spring Boot 提供了跨域资源共享（CORS）的支持，可以通过以下方式配置。

全局跨域配置：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000") // 允许跨域的前端地址
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的请求方法
                .allowedHeaders("*"); // 允许的请求头
    }
}

在这个配置中，允许来自 http://localhost:3000 的请求跨域访问后端接口，并允许常见的 HTTP 方法。

4. 静态资源托管

Spring Boot 默认支持静态资源托管。如果前端是通过构建工具（如 Webpack、Vue CLI）生成的静态文件，可以将这些文件放在 Spring Boot 项目的 src/main/resources/static 目录下。Spring Boot 会自动将其作为静态资源提供。

将前端构建后的静态文件托管到后端：

将构建后的 HTML、CSS 和 JavaScript 文件放在 src/main/resources/static 目录下。
Spring Boot 会自动托管这些静态资源，前端可以通过访问 http://localhost:8080/index.html 等路径来访问这些文件。

如果前端和后端分开部署，也可以通过在前端构建工具中配置 API 的代理，将请求转发到后端服务器。

5. 前后端分离的优势

解耦：前端和后端的开发可以独立进行，前端团队和后端团队可以并行开发，提高开发效率。
灵活性：前端和后端可以分别部署在不同的服务器上，适应不同的技术栈和架构。
便于扩展：后端可以根据需要提供多个接口，前端可以自由选择需要的接口进行集成，适应各种客户端（Web、移动端等）。

6. 总结

Spring Boot 提供了非常适合前后端分离的开发方式，通过 RESTful API 提供后端服务，前端通过 AJAX 或 Fetch 请求这些接口，后端返回数据。在实现过程中，需要特别关注跨域问题，并配置相关支持。Spring Boot 还提供了静态资源托管功能，可以方便地部署前端文件。通过这种方式，前后端的开发、测试和部署都可以更加灵活和高效，满足现代 Web 应用的需求。