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

女爷i 2024-04-17 18:39 69阅读 0赞

![在这里插入图片描述][20190830023658843.png]  
如图 post请求  
![在这里插入图片描述][20190830023724269.png]  
后端controller 层对象参数打印为null。

> 问题解决方案  
> 修改请求数据格式  
> this. h t t p . p o s t ( " i t e m / c a t e g o r y " , t h i s . 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。使用这种编码格式时发送到后台的数据长得像这样子  
![在这里插入图片描述][2019083003225080.png]  
不同字段以–boundary开始，接着是内容描述信息，最后是字段具体内容。如果传输的是文件，还要包含文件名和文件类型信息

##### 3. application/json #####

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

首先是application/json：  
![在这里插入图片描述][20190830032707157.png]  
接着是application/x-www-form-urlencoded： ![在这里插入图片描述][20190830032851991.png]  
这里可以明显看出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，这样就不需要后台做什么修改了。

[20190830023658843.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/e5508473c10141b792117870f5272e31.png
[20190830023724269.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/c4c845181129452f84512fca381dd309.png
[2019083003225080.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/57c87dfaa4b94d0f882df7899f360bf2.png
[20190830032707157.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/1310ca8e9c924b15944c86cdafcab236.png
[20190830032851991.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/5b182c0d408c42be92755dfca62fc35b.png