解决后端post请求不用 body json对象传参而是用 query 传递参数的问题

这个问题还是源于自己对content-type了解的太少 本质还是菜 

一直认为post请求只能传json对象，get才是拼接key=value。直到看到项目的api文档中后端的post请求竟然不是request body而是要"拼接url"，如下图所示：

自己信誓旦旦的去找后端，到头来原来是自己了解的太少了。特此记录。

一、 项目是用的axios，关于axios发送请求时params和data的区别：

1. params是添加到url的请求字符串中的，用于get请求。

2. data是把json对象添加到请求体（body）中的， 用于post请求。

3. get请求只能传query参数，query参数都是拼在请求地址上的
4. post可以传body和query两种形式的参数

注意：get是不能传data的

get请求中axios会把我们传递的对象解析成url拼接的形式

post请求如果想要用键值对数据传参，例如key1=value1&key2=value2的形式,有两种实现方法

（1）可以借助qs库的qs.stringify方法实现

（2）传params不用data  

二、关于content-type：

1. 当设置 Content-Type为 application/json的时候，是以json对象的形式传到后端

2. 当设置 Content-Type为 application/x-www-form-urlencoded或者Content-Type: multipart/form-data的时候就会以key=value的形式传到后端

3. 二者的区别只是因为Content-Type设置的不同，并不是数据提交方式的不同，这两种提交都会将数据放在body中，但是chrome浏览器的开发者工具会根据这个ContentType区分显示方式，同时后端的接收方式也会有所不同。

三、关于form的两种编码方式application/x-www-form-urlencoded和multipart/form-data的区别：

首先application/x-www-form-urlencoded为默认编码方式。

1. 在form的action为get时，浏览器用x-www-form-urlencoded的编码方式，将表单数据编码为key=value的形式，然后把这个字符串拼接到url后面，用?分隔

2. 当form的action为post时，浏览器将form数据封装到http body中，然后发送到server。

3. 在没有type=file时候，用默认的 application/x-www-form-urlencoded 就行。

4. 在有 type=file 时候，要用multipart/form-data编码方式。

四、关于qs库的使用方法如下：

1. npm安装

npm install qs 
// cnpm install qs

2. 引入 （一般在定义http请求的文件中）

import qs from 'qs'

3. 使用 （下面是项目中封装两种post的对比）

// 拼接url 
post(path, data) {
    return this.init('POST', path, qs.stringify(data))

  }

// json对象
  postByJson(path,data){
    return this.init('POST', path, data,{
      'Content-Type': 'application/json'
    })
  }