本教程详细讲解如何使用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;@RestControllerpublic 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 ( 城市污染数据查询
{/* 结果展示区域 */} {responseData && ( 查询结果:
日期: {responseData.date}
二氧化氮 (NO2): {responseData.no2}
PM10: {responseData.pm10}
PM2.5: {responseData.pm2_5}
)} ); }}export default App;
2. 关键代码解析与改进
a. 状态管理 (this.state)
Zyro AI Background Remover
Zyro推出的AI图片背景移除工具
55 查看详情 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 => { … }): 请求失败后的回调函数，用于处理网络错误或后端返回的错误状态。
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数据，从而构建一个功能完善的动态数据查询应用。
以上就是React与Spring集成：构建动态数据查询与展示应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1104988.html
微信扫一扫 
支付宝扫一扫 
