前言
SpringBoot前后端接口对接工作时，经常遇到请求500，400等问题，马虎大意经常导致时间浪费，为此总结了4个常见的复杂请求类型，以此为戒。
开始
1.实体嵌套List提交
例子：提交一个老师的实体Teacher，老师管理着不同的学生，还要传入学生实体List
❌常见问题：提交异常,会报400错误
✔️正确前端代码
✔️正确后台接收
/**
* @Description 实体嵌套List提交
* @param teacher
* @Return java.lang.String
*/
@PostMapping("/f1")
@ResponseBody
public String f1(@RequestBody Teacher teacher){
return teacher.toString();
}
2.普通文件上传
例子：普通input 文件上传通过onchange事件进行数据组装后，提交后台
❌常见问题：提交后,后台接收到的MultipartFile为空
✔️正确前端代码
✔️正确后台接收
/**
* @Description 文件上传
* @param file
* @Return java.lang.String
*/
@PostMapping("/f2")
@ResponseBody
public String f2(@RequestParam("file") MultipartFile file) {
if (file.isEmpty()) {
return "上传失败，请选择文件";
}
String fileName = file.getOriginalFilename();
return fileName;
}
3.List提交
例子：提交时，传给后台一个List
❌常见问题：提交异常,会报400错误
✔️正确前端代码
✔️正确后台接收
/**
* @Description List实体上传
* @param teachers
* @Return java.lang.String
*/
@PostMapping("/f3")
@ResponseBody
public String f3(@RequestBody List teachers) {
return teachers.toString();
}
4.数组Array提交
例子：提交时，传给后台一个Array
❌常见问题：提交异常,会报500错误
✔️正确前端代码
✔️正确后台接收
/**
* @Description 数组上传
* @param array
* @Return java.lang.String
*/
@PostMapping("/f4")
@ResponseBody
public int[] f4(@RequestParam(value = "array[]")int[] array) {
return array;
}
可视化代码
前端
请求列表
SpringBoot常见出错请求
No
类型
描述
常见问题
参数Data
请求代码
后端代码
操作
f1
实体嵌套List提交
适用于请求时,一个实体嵌套这一个list。
举例:提交一个老师的实体Teacher，老师管理着不同的学生，还要传入学生实体List <Student>
提交异常,会报400错误
{
"name": "张老师",
"age": "40",
"students": [
{
"name": "王小明",
"age": "15"
},
{
"name": "李小红",
"age": "15"
}
]
}
function f1(){
// 关键逻辑，需要转化成JSON字符串
let data = JSON.stringify(teacher)
$.ajax({
type : 'post',
url : '/f1',
data : data,
contentType:'application/json',
success : function(resData) {
console.log("f1调用成功" + resData)
alert("f1调用成功" + resData);
},
});
}
@PostMapping("/f1")
@ResponseBody
public String f1(@RequestBody Teacher teacher){
return teacher.toString();
}
f2
文件上传
适用于原生文件上传,onchange后数据组装
提交时后台接收的MultipartFile为空
file: (binary)
function f2(){
let file = event.target.files[0];
let formData = new FormData();
formData.append('file', file);
$.ajax({
url: '/f2',
type: 'post',
contentType: false, // ContentType设置成false
processData: false, // 不需要让浏览器对FormData进行转换
data: formData
}).done(function (resData) {
console.log("f2调用成功:" + resData)
alert("f2调用成功：" + resData)
})
}
@PostMapping("/f2")
@ResponseBody
public String f2(@RequestParam("file") MultipartFile file) {
if (file.isEmpty()) {
return "上传失败，请选择文件";
}
String fileName = file.getOriginalFilename();
return fileName;
}
f3
上传List
适用于请求时,直接传一个List实体。
提交异常,会报400错误
[{
name: "张老师",
age: "40"
},{
name: "李老师",
age: "35"
}]
function f3(){
// 关键逻辑，需要转化成JSON字符串
let data = JSON.stringify(teachers)
$.ajax({
type : 'post',
url : '/f3',
data : data,
contentType:'application/json',
success : function(resData) {
console.log("f3调用成功" + resData)
alert("f3调用成功" + resData);
},
});
}
@PostMapping("/f3")
@ResponseBody
public String f3(@RequestBody List<Teacher> teachers) {
return teachers.toString();
}
f4
上传数组Array
适用于请求时,直接传一个数组。
提交异常,会报500错误
[1,2,3,4]
function f4(){
$.ajax({
type : 'post',
url : '/f4',
data : {
array:array
},
dataType: 'json',
success : function(resData) {
console.log("f4调用成功" + resData)
alert("f4调用成功" + resData);
},
});
}
@PostMapping("/f4")
@ResponseBody
public int[] f4(@RequestParam(value = "array[]")int[] array) {
return array;
}
后端
package net.javadog.requestdemo.controller;
import net.javadog.requestdemo.entity.Teacher;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.util.List;
/**
* 请求管理
*
* @author hdx
* @version V1.0
* @date 2021年10月18日
*/
@Controller
public class RequestController {
@GetMapping("/request")
public String request(){
return "request/index";
}
/**
* @Description 实体嵌套List提交
* @param teacher
* @Return java.lang.String
*/
@PostMapping("/f1")
@ResponseBody
public String f1(@RequestBody Teacher teacher){
return teacher.toString();
}
/**
* @Description 文件上传
* @param file
* @Return java.lang.String
*/
@PostMapping("/f2")
@ResponseBody
public String f2(@RequestParam("file") MultipartFile file) {
if (file.isEmpty()) {
return "上传失败，请选择文件";
}
String fileName = file.getOriginalFilename();
return fileName;
}
/**
* @Description List实体上传
* @param teachers
* @Return java.lang.String
*/
@PostMapping("/f3")
@ResponseBody
public String f3(@RequestBody List teachers) {
return teachers.toString();
}
/**
* @Description 数组上传
* @param array
* @Return java.lang.String
*/
@PostMapping("/f4")
@ResponseBody
public int[] f4(@RequestParam(value = "array[]")int[] array) {
return array;
}
}
到此这篇关于SpringBoot前后端接口对接常见错误小结的文章就介绍到这了,更多相关SpringBoot前后端接口对接 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！