SpringBoot前后端接口對(duì)接常見錯(cuò)誤小結(jié)

更新時(shí)間：2022年01月18日 15:11:47 作者：JavaDog程序狗

SpringBoot前后端接口對(duì)接工作時(shí)，經(jīng)常遇到請(qǐng)求500，400等問題，本文主要介紹了SpringBoot前后端接口對(duì)接常見錯(cuò)誤小結(jié)，感興趣的可以了解一下

前言

SpringBoot前后端接口對(duì)接工作時(shí)，經(jīng)常遇到請(qǐng)求500，400等問題，馬虎大意經(jīng)常導(dǎo)致時(shí)間浪費(fèi)，為此總結(jié)了4個(gè)常見的復(fù)雜請(qǐng)求類型，以此為戒。

開始

1.實(shí)體嵌套List提交

??例子：提交一個(gè)老師的實(shí)體Teacher，老師管理著不同的學(xué)生，還要傳入學(xué)生實(shí)體List <Student>
?常見問題：提交異常,會(huì)報(bào)400錯(cuò)誤
??正確前端代碼

<button onclick="f1();" class="btn btn-primary">f1提交測(cè)試</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
    }
    // 實(shí)體嵌套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>

??正確后臺(tái)接收

    /**
     * @Description 實(shí)體嵌套List提交
     * @param teacher
     * @Return java.lang.String
     */
    @PostMapping("/f1")
    @ResponseBody
    public String f1(@RequestBody Teacher teacher){
        return teacher.toString();
    }

2.普通文件上傳

??例子：普通input 文件上傳通過onchange事件進(jìn)行數(shù)據(jù)組裝后，提交后臺(tái)
?常見問題：提交后,后臺(tái)接收到的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, // 不需要讓瀏覽器對(duì)FormData進(jìn)行轉(zhuǎn)換
            data: formData
        }).done(function (resData) {
            console.log("f2調(diào)用成功:" + resData)
            alert("f2調(diào)用成功：" + resData)
        })
    }
</script>

??正確后臺(tái)接收

    /**
     * @Description 文件上傳
     * @param file
     * @Return java.lang.String
     */
    @PostMapping("/f2")
    @ResponseBody
    public String f2(@RequestParam("file") MultipartFile file) {
        if (file.isEmpty()) {
            return "上傳失敗，請(qǐng)選擇文件";
        }
        String fileName = file.getOriginalFilename();
        return fileName;
    }

3.List提交

??例子：提交時(shí)，傳給后臺(tái)一個(gè)List
?常見問題：提交異常,會(huì)報(bào)400錯(cuò)誤
??正確前端代碼

 <button onclick="f3();" class="btn btn-primary">f3提交測(cè)試</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>

??正確后臺(tái)接收

    /**
     * @Description List實(shí)體上傳
     * @param teachers
     * @Return java.lang.String
     */
    @PostMapping("/f3")
    @ResponseBody
    public String f3(@RequestBody List<Teacher> teachers) {
        return teachers.toString();
    }

4.數(shù)組Array提交

例子??：提交時(shí)，傳給后臺(tái)一個(gè)Array
?常見問題：提交異常,會(huì)報(bào)500錯(cuò)誤
??正確前端代碼

<button onclick="f4();" class="btn btn-primary">提交f4測(cè)試</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>

??正確后臺(tái)接收

    /**
     * @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>請(qǐng)求列表</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常見出錯(cuò)請(qǐng)求</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>請(qǐng)求代碼</th>
            <th>后端代碼</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr class="active">
            <td>f1</td>
            <td>實(shí)體嵌套List提交</td>
            <td>
                <div>
                    適用于請(qǐng)求時(shí),一個(gè)實(shí)體嵌套這一個(gè)list。</br>
                    舉例:提交一個(gè)老師的實(shí)體Teacher，老師管理著不同的學(xué)生，還要傳入學(xué)生實(shí)體List &lt;Student&gt;
                </div>
            </td>
            <td>提交異常,會(huì)報(bào)400錯(cuò)誤</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提交測(cè)試</button>
            </td>
        </tr>
        <tr class="success">
            <td>f2</td>
            <td>文件上傳</td>
            <td>適用于原生文件上傳,onchange后數(shù)據(jù)組裝</td>
            <td>提交時(shí)后臺(tái)接收的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, // 不需要讓瀏覽器對(duì)FormData進(jìn)行轉(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 "上傳失敗，請(qǐng)選擇文件";
    }
    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>
                    適用于請(qǐng)求時(shí),直接傳一個(gè)List實(shí)體。</br>
                </div>
            </td>
            <td>提交異常,會(huì)報(bào)400錯(cuò)誤</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&lt;Teacher&gt; teachers) {
    return teachers.toString();
}
                </pre>
            </td>
            <td>
                <button onclick="f3();" class="btn btn-primary">f3提交測(cè)試</button>
            </td>
        </tr>

        <tr class="success">
            <td>f4</td>
            <td>上傳數(shù)組Array</td>
            <td>適用于請(qǐng)求時(shí),直接傳一個(gè)數(shù)組。</td>
            <td>提交異常,會(huì)報(bào)500錯(cuò)誤</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">提交測(cè)試</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));

    // 實(shí)體嵌套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, // 不需要讓瀏覽器對(duì)FormData進(jìn)行轉(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;

/**
 * 請(qǐng)求管理
 *
 * @author hdx
 * @version V1.0
 * @date 2021年10月18日
 */
@Controller
public class RequestController {
    @GetMapping("/request")
    public String request(){
        return "request/index";
    }

    /**
     * @Description 實(shí)體嵌套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 "上傳失敗，請(qǐng)選擇文件";
        }
        String fileName = file.getOriginalFilename();
        return fileName;
    }

    /**
     * @Description List實(shí)體上傳
     * @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前后端接口對(duì)接常見錯(cuò)誤小結(jié)的文章就介紹到這了,更多相關(guān)SpringBoot前后端接口對(duì)接內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: