vue post请求参数在controller层无法封装问题

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_44580977/article/details/100149694

在这里插入图片描述

如图 post请求

在这里插入图片描述

后端controller 层对象参数打印为null。

问题解决方案 修改请求数据格式 this.http.post("item/category",this.http.post("item/category",this.http.post("item/category",this.qs.stringify(data)); 就可以了，下面讲解原因

post提交数据的四种编码方式

1. application/x-www-form-urlencoded

这应该是最常见的post编码方式，一般的表单提交默认以此方式提交。大部分服务器语言对这种方式都有很好的支持。

这要求，post字符串格式是这样的， name=%E6%96&parentId=2 因此刚刚的问题 需要讲json转成此格式。

2. multipart/form-data

这也是一种比较常见的post数据格式，我们用表单上传文件时，必须使form表单的enctype属性或者ajax的contentType参数等于multipart/form-data。使用这种编码格式时发送到后台的数据长得像这样子

在这里插入图片描述

不同字段以–boundary开始，接着是内容描述信息，最后是字段具体内容。如果传输的是文件，还要包含文件名和文件类型信息

3. application/json

axios默认提交就是使用这种格式。如果使用这种编码方式，那么传递到后台的必须是序列化后的json字符串。我们可以将application/json与application/x-www-form-urlencoded发送的数据进行比较

首先是application/json：

在这里插入图片描述

接着是application/x-www-form-urlencoded：

在这里插入图片描述

这里可以明显看出application/x-www-form-urlencoded上传到后台的数据是以key-value形式进行组织的，而application/json则直接是个json字符串。如果在处理application/json时后台还是采用对付application/x-www-form-urlencoded的方式将会产生问题。问题如题无法封装。

解决思路

既然我们知道axios post方法默认使用application/json格式编码数据，那么解决方案就有两种，一是后台改变接收参数的方法，另一种则是将axios post方法的编码格式修改为application/x-www-form-urlencoded，这样就不需要后台做什么修改了。