React与Spring集成：构建动态数据查询与展示应用

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对象
        }
    }
}

{"date":"Tue Dec 06 22:13:32 CET 2022","no2":"48.67","pm10":"9.51","pm2_5":"5.85"}

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>
                        <p><strong>PM2.5:</strong> {responseData.pm2_5}</p>
                    </div>
                )}
            </div>
        );
    }
}

export default App;