### 集成 React 和
Spring MVC 进行前后端开发
#### 前后端分离架构概述
在前后端分离的架构中，前端和后端各自独立部署。前端主要由 HTML、CSS 和 JavaScript 组成，通常采用现代 JavaScript 框架如 React 来构建用户界面；后端则专注于提供 RESTful API 服务，使用像
Spring MVC 这样的框架来处理 HTTP 请求并返回 JSON 或 XML 格式的响应数据[^1]。
#### 创建
Spring Boot 项目
为了简化配置过程，建议使用
Spring Initializr 工具创建一个新的
Spring Boot 项目，并勾选 Web 开发所需的依赖项（例如
Spring Web），这将自动生成必要的 Maven 构建文件以及基础结构代码[^2]。
#### 实现 RESTful API 控制器
定义一个简单的 `@RestController` 类，在其中编写方法以映射特定
URL 路径上的 GET/POST 等类型的 HTTP 请求。这些方法可以接收来自客户端的数据作为输入参数，并通过实体类封装业务逻辑的结果，最后将其序列化为 JSON 字符串形式发送回给调用者[^4]。
```java
@RestController
@Request
Mapping("/api")
public class MyController {
@Get
Mapping("/hello")
public ResponseEntity<Str
ing> sayHello() {
return new ResponseEntity<>("Hello from backend!", HttpStatus.OK);
}
}
```
#### 设置 CORS 政策支持跨域资源共享
由于浏览器的安全机制，默认情况下不允许不同源之间的资源访问请求。因此需要在
Spring 应用程序中启用 Cross-Orig
in Resource Shar
ing (CORS)，可以通过全局配置方式或者针对单个接口单独设置允许哪些域名发起 AJAX 请求。
```java
@Configuration
public class CorsConfig implements Web
MvcConfigurer {
@Override
public void addCors
Mappings(CorsRegistry registry) {
registry.add
Mapping("/**").allowedOrig
ins("*");
}
}
```
#### 使用 Create React App 初始化前端工程
借助 Facebook 提供的 create-react-app CLI 可快速搭建起一套完整的 React 单页应用程序模板环境。安装完成后进入项目目录执行 npm start 命令即可启动本地服务器监听指定端口号等待调试[^5]。
```bash
npx create-react-app my-front-end
cd my-front-end
npm
install axios --save # 安装用于发起HTTP请求的库
npm start # 启动开发服务器
```
#### 发送异步请求获取远程数据
利用 Axios 库代替原生 XMLHttpRequest 对象实现更简洁优雅地向远端API发出GET/POST等类型的操作命令。下面展示了一个例子说明怎样从上面提到的那个 `/api/hello` 接口中读取消息并在控制台打印出来：
```javascript
import React, { useEffect } from 'react';
import axios from 'axios';
function App() {
useEffect(() => {
async function fetchData() {
try {
let response = await axios.get('http://localhost:8080/api/hello');
console.log(response.data); // 输出 "Hello from backend!"
}
catch (
error) {
console.
error(
error);
}
}
fetchData();
}, []);
return (
<div className="App">
{/* JSX */}
</div>
);
}
export default App;
```
扫一扫
6154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
