前端使用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);

此时：

后端即可正确接收。