本教程详细讲解如何使用react前端与spring boot后端构建一个简单的web应用。核心内容包括：react组件如何通过表单收集用户输入，利用axios发送get请求到spring `@getmapping` 端点，该端点接收 `@requestparam` 参数并返回json数据。教程重点演示如何在react中正确处理异步api响应，将完整的json数据存储到组件状态中，并有效地解析和展示这些数据，从而实现前后端的数据交互与动态展示。
构建React与Spring动态数据查询应用
在现代Web开发中，前后端分离是常见的架构模式。本教程将指导您如何结合React作为前端框架，以及Spring Boot作为后端服务，构建一个能够接收用户输入、调用后端API并展示动态数据的简单应用。我们将重点关注如何在React中正确处理表单提交、异步请求以及JSON数据的解析与展示。
一、后端服务（Spring Boot Controller）
首先，我们来看后端Spring Boot服务的实现。它负责接收来自前端的请求，处理业务逻辑（在此示例中是调用pollutionService），并返回JSON格式的数据。
import org.json.JSONObject;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class PollutionController {
// 假设 pollutionService 已经注入并提供了获取污染数据的方法
// private final PollutionService pollutionService;
@GetMapping("/pollution/current/city")
public JSONObject getCurrentPollutionDataByCityStateCountry(
@RequestParam(value = "city") String city,
@RequestParam(value = "state") String state,
@RequestParam(value = "country") String country
) {
try {
// 实际应用中这里会调用服务层获取数据
// return pollutionService.getCurrentPollutionDataByCityStateCountry(city, state, country);
// 模拟数据返回
JSONObject response = new JSONObject();
response.put("date", "Tue Dec 06 22:13:32 CET 2022");
response.put("no2", "48.67");
response.put("pm10", "9.51");
response.put("pm2_5", "5.85");
return response;
} catch (Exception e) {
e.printStackTrace();
return new JSONObject(); // 发生异常时返回空JSON对象
}
}
}
后端说明：
- @RestController：表明这是一个RESTful控制器，返回的数据将直接写入HTTP响应体。
- @GetMapping("/pollution/current/city")：定义了一个GET请求的端点。
- @RequestParam：用于从URL的查询参数中提取值，并将其绑定到方法的参数上。这里我们期望接收city、state和country三个参数。
- 返回值JSONObject：后端将返回一个JSON对象，其中包含日期、NO2、PM10和PM2.5等数据。
示例响应：
{"date":"Tue Dec 06 22:13:32 CET 2022","no2":"48.67","pm10":"9.51","pm2_5":"5.85"}
二、前端应用（React）
React前端负责渲染表单、收集用户输入、发送HTTP请求到Spring后端，并展示后端返回的数据。
1. React组件结构与状态管理
我们将使用一个类组件App来管理表单的输入状态和从后端获取的数据。
import React, { Component } from 'react';
import './App.css';
import axios from 'axios'; // 引入axios用于HTTP请求
class App extends Component {
constructor(props) {
super(props);
this.state = {
city: 'New York',
state: 'New York', // 注意：这里命名为state以匹配后端参数，原问题中是province
country: 'US',
responseData: null // 用于存储后端返回的完整JSON数据
};
// 绑定事件处理器的this上下文
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
// 处理表单输入变化的通用方法
handleInputChange(event) {
const target = event.target;
const value = target.value;
const name = target.name; // input元素的name属性与state中的键对应
this.setState({
[name]: value // 使用计算属性名更新对应的state
});
}
// 处理表单提交
handleSubmit(event) {
event.preventDefault(); // 阻止表单默认提交行为，避免页面刷新
// 构建请求URL
const apiUrl = `http://localhost:8080/pollution/current/city?city=${this.state.city}&state=${this.state.state}&country=${this.state.country}`;
// 使用axios发送GET请求
axios.get(apiUrl)
.then(response => {
// 将后端返回的完整数据对象存储到state中
this.setState({ responseData: response.data });
// 在异步请求成功并更新state后，才能访问到最新的responseData
// console.log("Response Data:", response.data); // 可以用于调试
alert('数据已成功获取！请查看结果区域。');
})
.catch(error => {
console.error("请求失败:", error);
alert('获取数据失败，请检查控制台。');
});
}
render() {
// 从state中解构出数据，方便在渲染时使用
const { city, state, country, responseData } = this.state;
return (
<div classname="App">
<h1>城市污染数据查询</h1>
<form onsubmit="{this.handleSubmit}">
<label>
城市:
<input name="city" type="text" value="{city}" onchange="{this.handleInputChange}"></label>
<br><label>
州/省:
<input name="state" type="text" value="{state}" onchange="{this.handleInputChange}"></label>
<br><label>
国家:
<input name="country" type="text" value="{country}" onchange="{this.handleInputChange}"></label>
<br><button type="submit">查询</button>
</form>
{/* 结果展示区域 */}
{responseData && (
<div classname="results-container">
<h2>查询结果:</h2>
<p><strong>日期:</strong> {responseData.date}</p>
<p><strong>二氧化氮 (NO2):</strong> {responseData.no2}</p>
<p><strong>PM10:</strong> {responseData.pm10}</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill10518" title="前端设计引擎"><img
src="https://img.php.cn/upload/skill/000/000/081/179319075280602.jpg" alt="前端设计引擎" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill10518" title="前端设计引擎" class="overflowclass">前端设计引擎</a>
<p class="overflowclass">使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。</p>
</div>
<a rel="nofollow" href="/xiazai/skill10518" title="前端设计引擎" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p><strong>PM2.5:</strong> {responseData.pm2_5}</p>
</div>
)}
</div>
);
}
}
export default App;
2. 关键代码解析与改进
a. 状态管理 (this.state)
- city, state, country: 用于绑定表单输入字段的值，实现受控组件。
- responseData: 初始化为null。当从后端成功获取数据后，将完整的JSON对象存储到此状态变量中。这是解决原问题中“只获取第一个字段”的关键。
b. 输入处理 (handleInputChange)
这是一个通用的事件处理器，通过event.target.name和event.target.value动态更新state中对应的字段。这使得您可以为多个输入字段使用同一个处理器，保持代码简洁。
c. 表单提交与API请求 (handleSubmit)
- event.preventDefault(): 这是非常重要的一步，它阻止了浏览器在表单提交时的默认行为（即页面刷新），这对于单页应用至关重要。
- 构建URL: 使用模板字符串（``）来动态构建包含查询参数的URL，这比字符串拼接更清晰。
-
Axios请求: axios.get(apiUrl)发送GET请求。
- .then(response => { ... }): 请求成功后的回调函数。
- this.setState({ responseData: response.data }): 这是原问题中最重要的修正点。 应该将整个response.data对象存储到responseData状态中，而不是只取response.data.date。这样，您就可以访问JSON响应中的所有字段（如no2, pm10, pm2_5）。
- 异步注意事项: setState是异步的。在setState调用之后立即访问this.state.responseData可能不会得到最新的值。如果您需要在setState完成后执行操作，应将其放在setState的回调函数中，或者在then块中直接使用response.data。本例中的alert放在then块中，但它显示的是静态消息，实际数据展示依赖render方法。
- .catch(error => { ... }): 请求失败后的回调函数，用于处理网络错误或后端返回的错误状态。
- .then(response => { ... }): 请求成功后的回调函数。
d. 结果展示 (render 方法)
- 在render方法中，我们通过条件渲染{responseData && (...)来确保只有当responseData有值（即成功获取数据后）才显示结果。
- 通过responseData.date, responseData.no2等方式，可以直接访问并展示后端返回JSON对象中的各个字段。
三、运行应用
- 后端： 确保您的Spring Boot应用已启动，并在8080端口监听。
- 前端： 在React项目目录下，运行npm start或yarn start启动React开发服务器。
- 打开浏览器访问http://localhost:3000（React默认端口），您将看到带有输入框和提交按钮的表单。输入信息并点击提交，即可在页面上看到后端返回的数据。
四、注意事项与最佳实践
-
跨域问题 (CORS)：如果您的React应用运行在与Spring Boot后端不同的端口或域名上，可能会遇到跨域资源共享（CORS）问题。您需要在Spring Boot后端配置CORS策略，例如在@GetMapping方法上添加@CrossOrigin注解，或全局配置CORS。
import org.springframework.web.bind.annotation.CrossOrigin; // ... @CrossOrigin(origins = "http://localhost:3000") // 允许React应用访问 @GetMapping("/pollution/current/city") public JSONObject getCurrentPollutionDataByCityStateCountry(...) { // ... } - 错误处理: 在实际应用中，catch块中的错误处理应更健壮，例如向用户显示友好的错误消息，而不仅仅是打印到控制台。
- 加载状态: 在发送请求时，可以添加一个isLoading的状态，并在请求期间显示“加载中...”的提示，提高用户体验。
- 代码风格: 对于更复杂的应用，建议将API请求逻辑封装到单独的服务模块中，而不是直接放在组件内部。
- 函数式组件与Hooks: 虽然本教程使用了类组件，但React官方推荐使用函数式组件和Hooks（如useState和useEffect）来管理状态和副作用，这通常能让代码更简洁、更易于理解和测试。
通过本教程，您应该已经掌握了如何使用React与Spring Boot进行前后端数据交互的基本流程，特别是如何正确处理异步请求和JSON数据，从而构建一个功能完善的动态数据查询应用。
