React從Spring Boot REST API獲取資料範例。
範例環境:
- Spring Boot 2
- React 17
Spring Boot
建立Spring Boot應用程式網址為http:localhost:8080
。
新增一個DemoController
提供API GET | /employees
用來給React取得Employee
資料。
後端Spring Boot網址為http://localhost:8080
與前端React http://localhost:3000
屬於不同源的網路資源,瀏覽器預設會限制CORS(Cross-Origin Resource Sharing),因此Server端必須設定允許CORS,Spring Boot要在Controller method前加上@CrossOrigin
,否則React無法從Spring Boot REST API取資料。
DemoController
package com.abc.demo.controller;
import com.abc.demo.model.Employee;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.Arrays;
import java.util.List;
@RestController
public class DemoController {
@CrossOrigin
@GetMapping("/employees")
public List<Employee> getEmployees() {
return Arrays.asList(
new Employee(1, "John", 33),
new Employee(2, "Mary", 28),
new Employee(3, "Tony", 45)
);
}
}
API回傳的Employee
結構如下。
Employee
package com.abc.demo.model;
import lombok.AllArgsConstructor;
import lombok.Data;
@Data
@AllArgsConstructor
public class Employee {
private long id;
private String name;
private int age;
}
使用cURL或直接在瀏覽器測試API回傳以下結果。
[{"id":1,"name":"John","age":33},{"id":2,"name":"Mary","age":28},{"id":3,"name":"Tony","age":45}]
React
建立React應用程式網址為http:localhost:3000
。
App.js
內容如下,建立ComponentTable
及ROW
。
App.js
import { useEffect, useState } from "react";
import "./App.css";
import * as React from 'react';
function App() {
return (
<Table>
<Row />
</Table>
);
}
const Row = () => {
const [employees, setEmployees] = useState([])
useEffect(() => {
fetch("http://localhost:8080/employees")
.then(response => response.json())
.then(data => setEmployees(data))
}, [])
return (
<>
{
employees.map((emp, i) => {
return (
<tr key={emp.id}>
<td>{emp.id}</td>
<td>{emp.name}</td>
<td>{emp.age}</td>
</tr>
);
})
}
</>
)
};
const Table = (props) => {
return (
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>{props.children}</tbody>
</table>
);
};
export default App;
ROW
中在Hook API useEffect()
使用JavaScript的fetch()
呼叫Spring Boot的GET | /employees
取得response
後轉成json呼叫setEmployees()
更新Row.state.employees
的狀態。useEffect()
第二個參數為dependency array,使用一個空陣列避免因狀態改變造成的無窮迴圈。
測試
在瀏覽器輸入http://localhost:3000
回傳的table html內容如下。
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>33</td>
</tr>
<tr>
<td>2</td>
<td>Mary</td>
<td>28</td>
</tr>
<tr>
<td>3</td>
<td>Tony</td>
<td>45</td>
</tr>
</tbody>
</table>
參考github。
沒有留言:
張貼留言