react如何连接java
React 连接 Java 后端的方法
React 作为前端框架，通常通过 HTTP 请求与 Java 后端交互。以下是几种常见方法：
使用 REST API
React 应用可以通过 fetch 或 axios 发送 HTTP 请求到 Java 后端。Java 后端需提供 RESTful 接口，通常使用 Spring Boot 框架。
React 端代码示例：
import axios from 'axios';
const fetchData = async () => {
try {
const response = await axios.get('http://localhost:8080/api/data');
console.log(response.data);
} catch (error) {
console.error('Error fetching data:', error);
}
};Java 端代码示例（Spring Boot）：
@RestController
@RequestMapping("/api")
public class DataController {
@GetMapping("/data")
public ResponseEntity<String> getData() {
return ResponseEntity.ok("Hello from Java backend!");
}
}使用 WebSocket 实时通信
对于需要实时双向通信的场景，可以使用 WebSocket。
React 端代码示例：
const socket = new WebSocket('ws://localhost:8080/ws');
socket.onopen = () => {
socket.send('Hello from React');
};
socket.onmessage = (event) => {
console.log('Message from server:', event.data);
};Java 端代码示例（Spring Boot）：
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(new MyHandler(), "/ws");
}
}
public class MyHandler extends TextWebSocketHandler {
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
session.sendMessage(new TextMessage("Hello from Java: " + message.getPayload()));
}
}使用 GraphQL
GraphQL 提供更灵活的数据查询方式。
React 端代码示例（使用 Apollo Client）：
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
const client = new ApolloClient({
uri: 'http://localhost:8080/graphql',
cache: new InMemoryCache()
});
client.query({
query: gql`
query {
getData {
id
name
}
}
`
}).then(result => console.log(result));Java 端代码示例（使用 Spring GraphQL）：
@Controller
public class GraphQLController {
@QueryMapping
public Data getData() {
return new Data("1", "Sample Data");
}
}
public record Data(String id, String name) {}跨域问题处理
如果前端和后端运行在不同端口，需要处理 CORS 问题。
Java 端配置（Spring Boot）：
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/")
.allowedOrigins("http://localhost:3000") // React 默认端口
.allowedMethods("*");
}
}这些方法涵盖了 React 与 Java 后端交互的主要方式，可以根据具体需求选择适合的方案。
