SpringBoot前后端接口對接常見錯誤小結(jié)
更新時間：2022年01月18日 15:11:47 作者：JavaDog程序狗
SpringBoot前后端接口對接工作時，經(jīng)常遇到請求500，400等問題，本文主要介紹了SpringBoot前后端接口對接常見錯誤小結(jié)，感興趣的可以了解一下
前言
SpringBoot前后端接口對接工作時，經(jīng)常遇到請求500，400等問題，馬虎大意經(jīng)常導(dǎo)致時間浪費，為此總結(jié)了4個常見的復(fù)雜請求類型，以此為戒。
開始
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(){
// 關(guān)鍵邏輯，需要轉(zhuǎn)化成JSON字符串
let data = JSON.stringify(teacher)
$.ajax({
type : 'post',
url : '/f1',
data : data,
contentType:'application/json',
success : function(resData) {
console.log("f1調(diào)用成功" + resData)
alert("f1調(diào)用成功" + 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事件進行數(shù)據(jù)組裝后，提交后臺
?常見問題：提交后,后臺接收到的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設(shè)置成false
processData: false, // 不需要讓瀏覽器對FormData進行轉(zhuǎn)換
data: formData
}).done(function (resData) {
console.log("f2調(diào)用成功:" + resData)
alert("f2調(diào)用成功：" + 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(){
// 關(guān)鍵邏輯，需要轉(zhuǎn)化成JSON字符串
let data = JSON.stringify(teachers)
$.ajax({
type : 'post',
url : '/f3',
data : data,
contentType:'application/json',
success : function(resData) {
console.log("f3調(diào)用成功" + resData)
alert("f3調(diào)用成功" + resData);
},
});
}
</script>
??正確后臺接收
/**
* @Description List實體上傳
* @param teachers
* @Return java.lang.String
*/
@PostMapping("/f3")
@ResponseBody
public String f3(@RequestBody List<Teacher> teachers) {
return teachers.toString();
}
4.數(shù)組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]
// 直接提交數(shù)組
function f4(){
$.ajax({
type : 'post',
url : '/f4',
data : {
array:array
},
dataType: 'json',
success : function(resData) {
console.log("f4調(diào)用成功" + resData)
alert("f4調(diào)用成功" + resData);
},
});
}
</script>
??正確后臺接收
/**
* @Description 數(shù)組上傳
* @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 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>參數(shù)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(){
// 關(guān)鍵邏輯，需要轉(zhuǎn)化成JSON字符串
let data = JSON.stringify(teacher)
$.ajax({
type : 'post',
url : '/f1',
data : data,
contentType:'application/json',
success : function(resData) {
console.log("f1調(diào)用成功" + resData)
alert("f1調(diào)用成功" + 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后數(shù)據(jù)組裝</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設(shè)置成false
processData: false, // 不需要讓瀏覽器對FormData進行轉(zhuǎn)換
data: formData
}).done(function (resData) {
console.log("f2調(diào)用成功:" + resData)
alert("f2調(diào)用成功：" + 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(){
// 關(guān)鍵邏輯，需要轉(zhuǎn)化成JSON字符串
let data = JSON.stringify(teachers)
$.ajax({
type : 'post',
url : '/f3',
data : data,
contentType:'application/json',
success : function(resData) {
console.log("f3調(diào)用成功" + resData)
alert("f3調(diào)用成功" + 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>上傳數(shù)組Array</td>
<td>適用于請求時,直接傳一個數(shù)組。</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調(diào)用成功" + resData)
alert("f4調(diào)用成功" + 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數(shù)據(jù)格式化
$('#f1Text').html(JsonFormat(teacher));
// 實體嵌套List提交
function f1(){
// 關(guān)鍵邏輯，需要轉(zhuǎn)化成JSON字符串
let data = JSON.stringify(teacher)
$.ajax({
type : 'post',
url : '/f1',
data : data,
contentType:'application/json',
success : function(resData) {
console.log("f1調(diào)用成功" + resData)
alert("f1調(diào)用成功" + 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設(shè)置成false
processData: false, // 不需要讓瀏覽器對FormData進行轉(zhuǎn)換
data: formData
}).done(function (resData) {
console.log("f2調(diào)用成功:" + resData)
alert("f2調(diào)用成功：" + resData)
})
}
const teachers = [{
name: "張老師",
age: "40"
},{
name: "李老師",
age: "35"
}]
// 直接提交List
function f3(){
// 關(guān)鍵邏輯，需要轉(zhuǎn)化成JSON字符串
let data = JSON.stringify(teachers)
$.ajax({
type : 'post',
url : '/f3',
data : data,
contentType:'application/json',
success : function(resData) {
console.log("f3調(diào)用成功" + resData)
alert("f3調(diào)用成功" + resData);
},
});
}
const array = [1,2,3,4]
// 直接提交數(shù)組
function f4(){
$.ajax({
type : 'post',
url : '/f4',
data : {
array:array
},
dataType: 'json',
success : function(resData) {
console.log("f4調(diào)用成功" + resData)
alert("f4調(diào)用成功" + 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 數(shù)組上傳
* @param array
* @Return java.lang.String
*/
@PostMapping("/f4")
@ResponseBody
public int[] f4(@RequestParam(value = "array[]")int[] array) {
return array;
}
}
到此這篇關(guān)于SpringBoot前后端接口對接常見錯誤小結(jié)的文章就介紹到這了,更多相關(guān)SpringBoot前后端接口對接 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Java中FileWriter類的簡介說明,FileWriter類提供了多種寫入字符的方法,包括寫入單個字符、寫入字符數(shù)組和寫入字符串等,它還提供了一些其他的方法,如刷新緩沖區(qū)、關(guān)閉文件等,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了IDEA的.idea文件夾和iml文件使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要為大家介紹了java如何在應(yīng)用代碼里捕獲線程堆棧實現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12
這篇文章主要介紹了Java讀寫文件創(chuàng)建文件夾等多種操作的方法，大家參考使用吧2013-11-11
通過源碼分析，我們可以更深入的了解其底層原理。本文將通過Timer的源碼，帶大家深入了解Java?Timer的使用，感興趣的小伙伴可以了解一下2022-11-11
循壞依賴即循環(huán)引用，兩個或多個bean相互引用，最終形成一個環(huán)。這篇文章主要介紹了Spring循環(huán)依賴的解決辦法,需要的朋友可以參考下2020-06-06
想必大家對克隆都有耳聞，世界上第一只克隆羊多莉就是利用細胞核移植技術(shù)將哺乳動物的成年體細胞培育出新個體，甚為神奇。其實在Java中也存在克隆的概念，即實現(xiàn)對象的復(fù)制。本文將嘗試介紹一些關(guān)于Java中的克隆和一些深入的問題，希望可以幫助大家更好地了解克隆。2016-08-08
本文主要介紹了Java中ArrayList類的源碼解析，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
SpringBoot攔截器與文件上傳實現(xiàn)方法與源碼分析
其實spring boot攔截器的配置方式和springMVC差不多,只有一些小的改變需要注意下就ok了。本文主要給大家介紹了關(guān)于如何在Springboot實現(xiàn)登陸攔截器與文件上傳功能,需要的朋友可以參考下2022-10-10
SpringBoot項目多層級多環(huán)境yml設(shè)計詳解
這篇文章主要為大家介紹了SpringBoot項目多層級多環(huán)境yml設(shè)計詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03