在前後端分離架構成為主流的今天，Spring Boot 作為後端框架，並非 “只負責後端”—— 它需要與前端（如 Vue、React、Angular 等）高效協作，甚至在輕量場景下直接集成前端資源。本文將梳理 Spring Boot 與前端開發相關的核心知識點，幫你打通 “後端接口→前端交互” 的全流程。
一、Spring Boot 與前端的協作模式
首先要明確：Spring Boot 不直接做 “前端開發”（如寫 HTML/CSS/JS），而是通過兩種核心模式支撐前端運行：
- 前後端分離模式（主流）：後端僅提供 RESTful API，前端獨立部署（如部署在 Nginx、OSS 上），通過 HTTP 請求調用後端接口；
- 前後端集成模式（輕量場景）：將前端打包後的靜態資源（HTML、CSS、JS、圖片）放入 Spring Boot 項目，由 Spring Boot 內嵌容器（Tomcat）一併部署，適合小型應用或管理系統。
二、核心知識點 1：前後端分離下的接口設計規範
後端接口是前後端協作的 “橋樑”，Spring Boot 需遵循統一規範，確保前端能高效調用：
1. 接口格式約定
- 數據格式：所有接口返回 JSON 格式，統一封裝響應體（避免前端處理零散數據），示例： java
// 統一響應體類
@Data
public class Result<T> {
private Integer code; // 狀態碼：200成功、400參數錯誤、500服務器錯誤
private String message; // 提示信息
private T data; // 業務數據（泛型適配不同類型）
// 成功響應靜態方法
public static <T> Result<T> success(T data) {
Result<T> result = new Result<>();
result.setCode(200);
result.setMessage("success");
result.setData(data);
return result;
}
// 失敗響應靜態方法
public static <T> Result<T> fail(Integer code, String message) {
Result<T> result = new Result<>();
result.setCode(code);
result.setMessage(message);
return result;
}
}- HTTP 方法對應業務：GET（查詢）、POST（新增）、PUT（修改）、DELETE（刪除），如：
- 查詢用户列表：
GET /api/users - 新增用户：
POST /api/users
2. 跨域問題解決（CORS）
前後端分離時，前端（如 http://localhost:8081）調用後端（http://localhost:8080）會觸發瀏覽器 “跨域攔截”，Spring Boot 需配置 CORS 允許跨域請求：
java
// 全局CORS配置類
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**") // 對/api/**路徑的接口允許跨域
.allowedOrigins("http://localhost:8081") // 允許的前端域名（生產環境填實際域名）
.allowedMethods("GET", "POST", "PUT", "DELETE") // 允許的HTTP方法
.allowedHeaders("*") // 允許的請求頭
.allowCredentials(true); // 是否允許攜帶Cookie（如登錄態）
}
}三、核心知識點 2：前後端集成（靜態資源處理）
輕量場景下，將前端打包後的靜態資源（如 Vue 打包後的 dist 目錄內容）放入 Spring Boot，步驟如下：
1. 靜態資源存放路徑
Spring Boot 默認掃描以下路徑的靜態資源（優先級從高到低）：
classpath:/META-INF/resources/classpath:/resources/classpath:/static/（推薦）classpath:/public/
操作步驟：將前端打包後的 index.html 及 css/js/img 文件夾，全部複製到 Spring Boot 項目的 src/main/resources/static/ 目錄下。
2. 配置默認首頁
若需訪問 http://localhost:8080 直接打開前端首頁，需配置視圖控制器：
java
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
// 訪問根路徑時，跳轉到static目錄下的index.html
registry.addViewController("/").setViewName("forward:/index.html");
}
}3. 處理前端路由（History 模式）
若前端用 Vue Router 的 History 模式（URL 無 #），直接刷新頁面會出現 404 錯誤（因為請求會被髮送到後端，後端無對應接口），需配置後端 “兜底” 路由：
java
// 在WebConfig中添加
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
// 所有非/api/**的請求，都轉發到index.html（由前端路由處理）
registry.addResourceHandler("/**")
.addResourceLocations("classpath:/static/")
.resourceChain(true)
.addResolver(new PathResourceResolver() {
@Override
protected Resource getResource(String resourcePath, Resource location) throws IOException {
Resource resource = location.createRelative(resourcePath);
return resource.exists() && resource.isReadable() ? resource : new ClassPathResource("/static/index.html");
}
});
}四、核心知識點 3：接口調試與聯調工具
前後端協作中，高效調試是關鍵，推薦搭配以下工具：
1. Swagger/OpenAPI（接口文檔自動生成）
Spring Boot 集成 Swagger 後，可自動生成帶測試功能的接口文檔，前端開發者無需手動記接口參數：
- 依賴引入（SpringDoc，適用於 Spring Boot 2.6+）： xml
<dependency>
<groupId>org.springdoc</groupId>
<artifactId>springdoc-openapi-starter-webmvc-ui</artifactId>
<version>2.2.0</version>
</dependency>- 訪問文檔：啓動項目後，訪問
http://localhost:8080/swagger-ui/index.html，可直接在頁面上測試接口（填參數、發送請求、看響應）。
2. Postman（接口測試工具）
後端開發時，先用 Postman 驗證接口正確性（如參數校驗、響應格式），再交付給前端，避免聯調時暴露基礎問題：
- 常用操作：創建 Collection 管理接口、保存請求參數、設置環境變量（如統一管理域名
http://localhost:8080）。
3. 瀏覽器開發者工具（前端聯調）
前端調用接口時，通過瀏覽器 F12 打開 “網絡” 面板，查看請求的 URL、參數、響應體：
- 若出現 400 錯誤：檢查參數是否與後端接口約定一致（如字段名、數據類型）；
- 若出現 500 錯誤：查看後端控制枱日誌，定位服務器端異常；
- 若出現 CORS 錯誤：檢查後端 CORS 配置是否包含前端域名。
五、總結
Spring Boot 與前端開發的協作，核心是 “規範接口、解決跨域、高效調試”：
- 前後端分離模式下，重點關注接口格式統一和 CORS 配置；
- 輕量集成模式下，需掌握靜態資源存放、首頁配置和前端路由兼容；
- 藉助 Swagger、Postman 等工具，減少聯調溝通成本。
掌握這些知識點，就能讓 Spring Boot 後端與前端無縫協作，無論是開發小型管理系統，還是大型前後端分離項目，都能高效推進。