当前位置：首页 > React

react如何连接java

2026-02-12 02:16:11React

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 后端交互的主要方式，可以根据具体需求选择适合的方案。

react如何连接java