- 写一个最简单的组件
js
import React, { useState, useEffect } from 'react';
function StudentQuery() {
const [studentName, setStudentName] = useState(''); // 存储学生的姓名
const [response, setResponse] = useState(null); // 存储从服务器获取的响应数据
const [error, setError] = useState(null); // 存储错误信息
// 当studentName发生变化时,自动发起请求
useEffect(() => {
const fetchData = async () => {
try {
const url = new URL('http://localhost:8080/student'); // 替换为实际的API地址
console.log(url);
url.searchParams.append('name', studentName); // 添加查询参数
const response = await fetch(url);
console.log(response);
if (!response.ok) {
console.log(response);
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json(); // 假设服务器返回JSON格式的数据
setResponse(data);
console.log(data);
} catch (err) {
setError(err.message);
}
};
if (studentName) {
fetchData();
}
}, [studentName]); // 依赖数组,只有当studentName改变时才会触发useEffect
return (
<div>
<input
type="text"
placeholder="Enter student name"
value={studentName}
onChange={(e) => setStudentName(e.target.value)}
/>
{response && <p>Response: {JSON.stringify(response)}</p>}
{error && <p style={{ color: 'red' }}>Error: {error}</p>}
</div>
);
}
export default StudentQuery;
- 后端controller层代码
java
package com.example.demo2.controller;
import com.example.demo2.model.Student;
import com.example.demo2.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpHeaders;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.*;
@RestController
public class StudentController {
@Autowired
private StudentService studentService;
// 在 Spring MVC 的控制器方法中,如果返回Student对象,确保方法的返回类型和@RequestMapping(或者@GetMapping、@PostMapping等注解)中的produces属性设置正确
@CrossOrigin(origins = "http://localhost:3000") // 解决浏览器跨来源资源共享限制,否则响应结果前端收不到
@GetMapping(value = "/student", produces = MediaType.APPLICATION_JSON_VALUE)
public @ResponseBody Student getStudentByName(@RequestParam String name) {
return studentService.getStudentByName(name);
}
}
- 后续非关键代码即为查询数据库