SpringBoot前后端接口对接常见错误小结
更新时间：2022年01月18日 15:11:47 作者：JavaDog程序狗
SpringBoot前后端接口对接工作时，经常遇到请求500，400等问题，本文主要介绍了SpringBoot前后端接口对接常见错误小结，感兴趣的可以了解一下
前言
SpringBoot前后端接口对接工作时，经常遇到请求500，400等问题，马虎大意经常导致时间浪费，为此总结了4个常见的复杂请求类型，以此为戒。
开始
1.实体嵌套List提交
🌰例子：提交一个老师的实体Teacher，老师管理着不同的学生，还要传入学生实体List <Student>
❌常见问题：提交异常,会报400错误
✔️正确前端代码
<button onclick="f1();" class="btn btn-primary">f1提交测试</button>
<script src="https://code.jquery.com/jquery.js"></script>
<script>
const students = [{
name: "王小明",
age: "15",
},{
name: "李小红",
age: "15",
}]
const teacher = {
name: "张老师",
age: "40",
students:students
}
// 实体嵌套List提交
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);
},
});
}
</script>
✔️正确后台接收
/**
* @Description 实体嵌套List提交
* @param teacher
* @Return java.lang.String
*/
@PostMapping("/f1")
@ResponseBody
public String f1(@RequestBody Teacher teacher){
return teacher.toString();
}
2.普通文件上传
🌰例子：普通input 文件上传通过onchange事件进行数据组装后，提交后台
❌常见问题：提交后,后台接收到的MultipartFile为空
✔️正确前端代码
<input type="file" name="f2" id="f2" onchange="f2()" multiple="multiple"></input>
<script src="https://code.jquery.com/jquery.js"></script>
<script>
// 文件上传
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)
})
}
</script>
✔️正确后台接收
/**
* @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错误
✔️正确前端代码
<button onclick="f3();" class="btn btn-primary">f3提交测试</button>
<script src="https://code.jquery.com/jquery.js"></script>
<script>
const teachers = [{
name: "张老师",
age: "40"
},{
name: "李老师",
age: "35"
}]
// 直接提交List
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);
},
});
}
</script>
✔️正确后台接收
/**
* @Description List实体上传
* @param teachers
* @Return java.lang.String
*/
@PostMapping("/f3")
@ResponseBody
public String f3(@RequestBody List<Teacher> teachers) {
return teachers.toString();
}
4.数组Array提交
例子🌰：提交时，传给后台一个Array
❌常见问题：提交异常,会报500错误
✔️正确前端代码
<button onclick="f4();" class="btn btn-primary">提交f4测试</button>
<script src="https://code.jquery.com/jquery.js"></script>
<script>
const array = [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);
},
});
}
</script>
✔️正确后台接收
/**
* @Description 数组上传
* @param array
* @Return java.lang.String
*/
@PostMapping("/f4")
@ResponseBody
public int[] f4(@RequestParam(value = "array[]")int[] array) {
return array;
}
可视化代码
前端
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>请求列表</title>
<link rel="shortcut icon" href="/static/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<table class="table">
<caption style="text-align: center;"> <h2>SpringBoot常见出错请求</h2></caption>
<thead>
<tr>
<th style="min-width: 40px">No</th>
<th style="min-width: 140px">类型</th>
<th style="min-width: 180px">描述</th>
<th style="min-width: 100px">常见问题</th>
<th>参数Data</th>
<th>请求代码</th>
<th>后端代码</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>f1</td>
<td>实体嵌套List提交</td>
<td>
<div>
适用于请求时,一个实体嵌套这一个list。</br>
举例:提交一个老师的实体Teacher，老师管理着不同的学生，还要传入学生实体List <Student>
</div>
</td>
<td>提交异常,会报400错误</td>
<td>
<pre id="f1Text">
{
"name": "张老师",
"age": "40",
"students": [
{
"name": "王小明",
"age": "15"
},
{
"name": "李小红",
"age": "15"
}
]
}
</pre>
</td>
<td>
<pre id="f1Code">
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);
},
});
}
</pre>
</td>
<td>
<pre id="f1Java">
@PostMapping("/f1")
@ResponseBody
public String f1(@RequestBody Teacher teacher){
return teacher.toString();
}
</pre>
</td>
<td>
<button onclick="f1();" class="btn btn-primary">f1提交测试</button>
</td>
</tr>
<tr class="success">
<td>f2</td>
<td>文件上传</td>
<td>适用于原生文件上传,onchange后数据组装</td>
<td>提交时后台接收的MultipartFile为空</td>
<td>
<pre id="f2Text">file: (binary)</pre>
</td>
<td>
<pre id="f2Code">
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)
})
}
</pre>
</td>
<td>
<pre id="f2Java">
@PostMapping("/f2")
@ResponseBody
public String f2(@RequestParam("file") MultipartFile file) {
if (file.isEmpty()) {
return "上传失败，请选择文件";
}
String fileName = file.getOriginalFilename();
return fileName;
}
</pre>
</td>
<td>
<input type="file" name="f2" id="f2" onchange="f2()" multiple="multiple"></input>
</td>
</tr>
<tr class="active">
<td>f3</td>
<td>上传List</td>
<td>
<div>
适用于请求时,直接传一个List实体。</br>
</div>
</td>
<td>提交异常,会报400错误</td>
<td>
<pre id="f3Text">
[{
name: "张老师",
age: "40"
},{
name: "李老师",
age: "35"
}]
</pre>
</td>
<td>
<pre id="f3Code">
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);
},
});
}
</pre>
</td>
<td>
<pre id="f3Java">
@PostMapping("/f3")
@ResponseBody
public String f3(@RequestBody List<Teacher> teachers) {
return teachers.toString();
}
</pre>
</td>
<td>
<button onclick="f3();" class="btn btn-primary">f3提交测试</button>
</td>
</tr>
<tr class="success">
<td>f4</td>
<td>上传数组Array</td>
<td>适用于请求时,直接传一个数组。</td>
<td>提交异常,会报500错误</td>
<td>
<pre id="f4Text">[1,2,3,4]</pre>
</td>
<td>
<pre id="f4Code">
function f4(){
$.ajax({
type : 'post',
url : '/f4',
data : {
array:array
},
dataType: 'json',
success : function(resData) {
console.log("f4调用成功" + resData)
alert("f4调用成功" + resData);
},
});
}
</pre>
</td>
<td>
<pre id="f4Java">
@PostMapping("/f4")
@ResponseBody
public int[] f4(@RequestParam(value = "array[]")int[] array) {
return array;
}
</pre>
</td>
<td>
<button onclick="f4();" class="btn btn-primary">提交测试</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="https://code.jquery.com/jquery.js"></script>
<script>
const students = [{
name: "王小明",
age: "15",
},{
name: "李小红",
age: "15",
}]
const teacher = {
name: "张老师",
age: "40",
students:students
}
// F1 Json数据格式化
$('#f1Text').html(JsonFormat(teacher));
// 实体嵌套List提交
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);
},
});
}
// 文件上传
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)
})
}
const teachers = [{
name: "张老师",
age: "40"
},{
name: "李老师",
age: "35"
}]
// 直接提交List
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);
},
});
}
const array = [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);
},
});
}
// Json格式化工具
function JsonFormat(json) {
if (typeof json != 'string') {
json = JSON.stringify(json, undefined, 2);
}
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}
</script>
<style>
pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
.container{
width: 1900px;
}
</style>
</body>
</html>
后端
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<Teacher> 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前后端接口对接 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Java中FileWriter类的简介说明,FileWriter类提供了多种写入字符的方法,包括写入单个字符、写入字符数组和写入字符串等,它还提供了一些其他的方法,如刷新缓冲区、关闭文件等,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了IDEA的.idea文件夹和iml文件使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
这篇文章主要为大家介绍了java如何在应用代码里捕获线程堆栈实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
这篇文章主要介绍了Java读写文件创建文件夹等多种操作的方法，大家参考使用吧2013-11-11
通过源码分析，我们可以更深入的了解其底层原理。本文将通过Timer的源码，带大家深入了解Java Timer的使用，感兴趣的小伙伴可以了解一下2022-11-11
循坏依赖即循环引用，两个或多个bean相互引用，最终形成一个环。这篇文章主要介绍了Spring循环依赖的解决办法,需要的朋友可以参考下2020-06-06
想必大家对克隆都有耳闻，世界上第一只克隆羊多莉就是利用细胞核移植技术将哺乳动物的成年体细胞培育出新个体，甚为神奇。其实在Java中也存在克隆的概念，即实现对象的复制。本文将尝试介绍一些关于Java中的克隆和一些深入的问题，希望可以帮助大家更好地了解克隆。2016-08-08
本文主要介绍了Java中ArrayList类的源码解析，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
其实spring boot拦截器的配置方式和springMVC差不多,只有一些小的改变需要注意下就ok了。本文主要给大家介绍了关于如何在Springboot实现登陆拦截器与文件上传功能,需要的朋友可以参考下2022-10-10
这篇文章主要为大家介绍了SpringBoot项目多层级多环境yml设计详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
最新评论