[英]Unable to send data from React to Springboot
I couldn't save the data to the database.我无法将数据保存到数据库中。 I can't understand what the issue is.我不明白问题是什么。 API is working when tested it using Postman. API 在使用 Postman 进行测试时工作正常。 I want to store name, dob, classroom, division and gender values to the database.我想将姓名、出生日期、教室、部门和性别值存储到数据库中。
<center><button type="submit" className="btn btn-primary" onClick={this.addStudent}>Register</button></center>
onClick in the button element will call the below addStudent() function.按钮元素中的 onClick 将调用下面的 addStudent() function。
addStudent (e) {
let studentData = {
name: this.state.name,
dob: this.state.dob,
classroom: this.state.classroom,
division: this.state.division,
gender: this.state.gender
};
JSON.stringify(studentData);
ApiService.getStudents(studentData).then((response) => {
console.log(response);
});
}
ApiService() is given below: ApiService() 如下:
import axios from "axios";
const SAVE_DATA = "http://localhost:8080/api/save"
const STUDENT_DATA = "http://localhost:8080/api/students"
class ApiService {
saveStudent(studentData) {
console.log("Inside saveStudent()")
return axios.post(SAVE_DATA, studentData);
}
getStudents() {
return axios.get(STUDENT_DATA);
}
}
export default new ApiService();
Springboot API Controller is given below: Springboot API Controller如下:
package com.student.registration.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import com.student.registration.entity.Student;
import com.student.registration.services.RegServices;
@CrossOrigin(origins = "http://localhost:3000")
@RestController
@RequestMapping(value = "/api")
public class RegController {
@Autowired
RegServices services;
@RequestMapping(value = "/save", method = RequestMethod.POST)
public String saveData(@RequestBody Student student) {
return services.save(student);
}
@RequestMapping(value = "/students")
public List<Student> getAllStudents() {
return services.getAll();
}
}
Replace your click function with this because you're calling the wrong function from your API service用这个替换你的点击 function 因为你从你的 API 服务中调用了错误的 function
addStudent (e) {
let studentData = {
name: this.state.name,
dob: this.state.dob,
classroom: this.state.classroom,
division: this.state.division,
gender: this.state.gender
};
studentData = JSON.stringify(studentData);
ApiService.saveStudent(studentData).then((response) => {
console.log(response);
}).catch((error) => console.log(error));
}
and add async/await in your service并在您的服务中添加 async/await
import axios from "axios";
const SAVE_DATA = "http://localhost:8080/api/save"
const STUDENT_DATA = "http://localhost:8080/api/students"
class ApiService {
async saveStudent(studentData) {
console.log("Inside saveStudent()")
return await axios.post(SAVE_DATA, studentData);
}
async getStudents() {
return await axios.get(STUDENT_DATA);
}
}
export default new ApiService();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.