vue3.2之边学边练(三)vue下post数据发送至java后端

        被封控了接近两月,终于又见着我的老伙伴(破电脑)了。

之前测试了axios封装的get请求,没有什么大问题,昨天想试着加点东西,发现传过去的数据都是空对象,整整折腾了一天。

最后发现是由于前端传给后端的数据是json字符串

{item:value,item2:value2,item3:value}

像是这个样子。到后端以后

@PostMapping("/api/menu/add")
    public String addMenu(Menu menu){
        menuRepository.save(menu);
        return "success";
    }

接受的要的是这个menu的对象,然后两者不匹配,最后就会以空对象论处了。

通过csdn各路查询的支持,找到了前端序列化的模块qs

引入qs

npm install qs -S
import qs from 'qs'

然后在发送数据前将数据序列化

export function addMenu(data) {
    //qs的方法stringify,将数据序列化
    data = qs.stringify(data)
    return request({
        url: 'menu/add',
        method: 'post',
        data
    })
}

测试 

vue3.2之边学边练(三)vue下post数据发送至java后端_第1张图片

 vue3.2之边学边练(三)vue下post数据发送至java后端_第2张图片

vue3.2之边学边练(三)vue下post数据发送至java后端_第3张图片 

数据成功添加。 

就个这,折腾整整一天。唉!

下一篇搞一搞element-plus的 el-drawer 和ElMessage吧。

你可能感兴趣的:(JavaScript学习,vue.js,前端,javascript)