在現代 Web 開發中，無縫連接 Java 框架和前端框架至關重要。透過整合 Java 的後端能力和前端框架的 UI 功能，可以建立健壯高效的應用程式。後端配置：建立類別映射靜態 React 資源到 / 端點，允許前端載入後端檔案。前端配置：使用 useEffect 鉤子從後端獲取數據，並使用 useState 鉤子儲存和處理數據。實戰案例：Spring Boot 後端提供 REST API，React 前端透過 useEffect 取得數據，並使用 useState 管理數據。
Java 框架和前端框架無縫連接的實作
在現代Web 開發中，無縫連接Java 框架和前端框架對於建立健壯且高效的應用程式至關重要。透過整合這兩種技術，開發人員可以利用 Java 的強大後端處理能力和前端框架的出色使用者介面設計功能。
以下是如何在Java 框架（如Spring Boot）和前端框架（如React）之間建立無縫連接：
後端（Java）配置
@SpringBootConfiguration
public class ReactConfiguration {
@Bean
public ClassPathResourceHandler reactStaticResourcesHandler() {
ClassPathResourceHandler handler = new ClassPathResourceHandler();
handler.setCachePeriod(0);
handler.setPathPatterns("*.*");
return handler;
}
}前端（React）配置
// App.js
import { useEffect, useState } from "react";
const App = () => {
const [data, setData] = useState([]);
useEffect(() => {
fetch("/api/data")
.then(res => res.json())
.then(data => setData(data))
.catch(error => console.error(error));
}, []);
return (
<>
...
</>
);
};
export default App;#實戰案例
假設我們有一個Spring Boot 後端，它公開了一個REST API 來檢索資料。我們使用 React 作為我們的前端框架來顯示這些資料。
在 Java 後端中，ReactConfiguration 類別將靜態 React 資源對應到 / 端點。這允許 React 應用從後端載入必要的 JavaScript 和 CSS 檔案。
在 React 前端中，App.js 元件使用 useEffect 鉤子在元件掛載時從後端取得資料。然後，它使用 useState 鉤子儲存和處理接收到的資料。
透過這種集成，Java 後端和 React 前端可以無縫通信，後端處理業務邏輯和資料處理，而前端管理使用者介面和互動。
以上是Java框架與前端框架無縫連接的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！
