[英]Unable to send data from React to Springboot
我無法將數據保存到數據庫中。 我不明白問題是什么。 API 在使用 Postman 進行測試時工作正常。 我想將姓名、出生日期、教室、部門和性別值存儲到數據庫中。
<center><button type="submit" className="btn btn-primary" onClick={this.addStudent}>Register</button></center>
按鈕元素中的 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() 如下:
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如下:
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();
}
}
用這個替換你的點擊 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));
}
並在您的服務中添加 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.