当前位置：首页 > React

java如何react

2026-03-30 17:57:53React

Java 与 React 的集成方法

Java 后端与 React 前端可以通过 RESTful API 或 GraphQL 进行通信。以下是常见的集成方式：

使用 Spring Boot 作为后端 Spring Boot 提供 REST API 支持，React 前端通过 fetch 或 axios 调用这些 API。

// Spring Boot 示例控制器
@RestController
@RequestMapping("/api")
public class MyController {
    @GetMapping("/data")
    public ResponseEntity<String> getData() {
        return ResponseEntity.ok("Hello from Java");
    }
}

React 调用 API 在 React 组件中使用 axios 调用 Java 后端 API：

import axios from 'axios';

function App() {
    const [data, setData] = useState('');

    useEffect(() => {
        axios.get('http://localhost:8080/api/data')
            .then(response => setData(response.data));
    }, []);

    return <div>{data}</div>;
}

跨域问题解决方案

由于 React 运行在 localhost:3000 而 Java 后端可能在 localhost:8080，需要处理 CORS：

// Spring Boot 配置 CORS
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/")
            .allowedOrigins("http://localhost:3000")
            .allowedMethods("*");
    }
}

项目结构建议

典型的全栈项目结构分为两部分：

后端：Java (Spring Boot) 项目，提供 API
前端：React 项目，独立部署或与 Java 打包

Maven 集成前端 可以通过 frontend-maven-plugin 将 React 构建集成到 Java 项目中：

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.12.1</version>
    <executions>
        <execution>
            <id>install node and npm</id>
            <goals>
                <goal>install-node-and-npm</goal>
            </goals>
        </execution>
        <execution>
            <id>npm install</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <phase>generate-resources</phase>
        </execution>
        <execution>
            <id>npm build</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <phase>generate-resources</phase>
            <configuration>
                <arguments>run build</arguments>
            </configuration>
        </execution>
    </executions>
</plugin>

部署选项

独立部署

Java 后端部署在 Tomcat 或云服务
React 前端部署在 Nginx 或 CDN

联合部署 将 React 构建的静态文件放在 Spring Boot 的 resources/static 目录下，打包为单一 JAR。

java如何react

// Spring Boot 配置静态资源
@SpringBootApplication
public class Application implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/")
            .addResourceLocations("classpath:/static/");
    }
}