探索全栈开发之旅：React与Spring Boot的完美结合

// Spring Boot后端控制器
@RestController
@RequestMapping("/api")
public class MyController {
 
    @GetMapping("/greeting")
    public ResponseEntity<String> greeting(@RequestParam(name = "name", defaultValue = "World") String name) {
        return ResponseEntity.ok("Hello, " + name + "!");
    }
}

// React前端组件
import React, { useState, useEffect } from 'react';
 
function Greeting() {
    const [message, setMessage] = useState('');
 
    useEffect(() => {
        fetch('/api/greeting?name=JohnDoe')
            .then(response => response.text())
            .then(text => setMessage(text));
    }, []);
 
    return <div>{message}</div>;
}
 
export default Greeting;

这个例子展示了如何使用React作为前端框架，以及如何使用Spring Boot作为后端框架来创建一个简单的应用程序。在React组件中，我们使用fetch函数向后端发送GET请求，并在响应到达时更新组件的状态。在Spring Boot控制器中，我们定义了一个简单的API端点，当访问该端点时，它会返回一个问候语。这个例子展示了前后端交互的一种常见方式，并且是全栈开发中一个基本且关键的环节。