当前位置：首页 > React

springmvc如何跑react

2026-03-31 11:13:09React

整合 Spring MVC 与 React 的方法

Spring MVC 作为后端框架，可以与 React 前端框架结合使用。以下是实现方式：

后端配置（Spring MVC）

确保 Spring MVC 配置允许静态资源访问。在 spring-mvc.xml 或 Java 配置类中添加以下内容：

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/static/")
                .addResourceLocations("classpath:/static/");
    }
}

将 React 构建后的静态文件（如 index.html、bundle.js 等）放置在 src/main/resources/static 目录下。

前端配置（React）

在 React 项目中，修改 package.json 添加代理设置，避免开发时的跨域问题：

"proxy": "http://localhost:8080"

构建 React 项目时，输出目录指向 Spring MVC 的静态资源目录：

npm run build
cp -r build/* ../spring-mvc-project/src/main/resources/static/

API 交互

Spring MVC 提供 RESTful API，React 通过 fetch 或 axios 调用：

@RestController
@RequestMapping("/api")
public class ApiController {
    @GetMapping("/data")
    public ResponseEntity<String> getData() {
        return ResponseEntity.ok("Response from Spring MVC");
    }
}

React 组件中调用 API：

import React, { useEffect, useState } from 'react';
import axios from 'axios';

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

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

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

部署流程

开发环境下，React 通过 npm start 独立运行，后端 Spring MVC 运行在另一端口，利用代理连接。

生产环境下，将 React 构建产物复制到 Spring MVC 的静态资源目录，打包为 WAR 或 JAR 文件部署。

springmvc如何跑react

注意事项

确保 React 路由与 Spring MVC 的 URL 模式不冲突，可配置 Spring MVC 将所有非 API 请求转发到 React 的 index.html。
跨域问题在生产环境部署后不存在，开发时需配置代理或 CORS。
静态资源缓存问题可通过在文件名中添加哈希或配置 Spring MVC 的缓存控制头解决。