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

vue post请求参数在controller层无法封装问题_第1张图片
如图 post请求
vue post请求参数在controller层无法封装问题_第2张图片
后端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。使用这种编码格式时发送到后台的数据长得像这样子
vue post请求参数在controller层无法封装问题_第3张图片
不同字段以–boundary开始,接着是内容描述信息,最后是字段具体内容。如果传输的是文件,还要包含文件名和文件类型信息

3. application/json

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

首先是application/json:
在这里插入图片描述
接着是application/x-www-form-urlencoded: vue post请求参数在controller层无法封装问题_第4张图片
这里可以明显看出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,这样就不需要后台做什么修改了。

你可能感兴趣的:(神坑集合,Vue)