前端使用Vue傳入參數，后端接收時多一個等於號=的問題

今天前端使用Vue傳入參數，后端接收時發現在參數末尾多了一個等於號=

前端：

<template>
    <div>
        <el-input v-model="phoneNum" placeholder="請輸入手機號"/>
        <el-button @click="sendVerifyCode(phoneNum)">發送驗證碼</el-button>
        <el-input v-model="verifyCode" placeholder="請輸入驗證碼"/>
        <el-button @click="checkVerifyCode(phoneNum, verifyCode)">提交</el-button>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return{
                phoneNum: '',
                verifyCode: ''
            }
        },
        methods:{
            sendVerifyCode(phoneNum){
                console.log(phoneNum);
                axios.post('http://localhost:8181/verifyCode/sendVerifyCode', phoneNum)
                .then(response => {
                    console.log(response)
                })
            },
            checkVerifyCode(phoneNum, verifyCode){
                console.log(phoneNum, verifyCode)
            }
        }
    }
</script>

<style scoped>

</style>

后端：

    @PostMapping("sendVerifyCode")
    public String sendVerifyCode(@RequestBody String phoneNum){
        logger.info(phoneNum);
        Boolean flag = verifyCodeService.setVerifyCode(phoneNum);
        if(flag){
            return "success";
        }
        return "failed";
    }

 

在后端接收參數時，發現參數值的末尾會自動添加一個等於號=

仔細分析就能發現，原來是沒有把參數包裝成FormData傳入，導致傳入的參數不正確：

所以顯然，我們需要再進行封裝，把參數封裝進FormData中

const formData = new FormData();
formData.append("phoneNum", phoneNum);

此時：

后端即可正確接收。