vue 使用qs向后端传递表单FormData参数

axois_qs 使用表单传参

在使用vue+elementUI搭建了登录页面之后，想和后端的Springboot对接一下；对接的vue-cli配置研究一番再写笔记；总所周知，再前后端对接的时候，后端接收的一般就是字符串，直接返回json字符串；而前端内，最好选择表单字段，也就是applicaton/x-www-form-urlencoded格式，这种后端最好接收。

那么，如何使用？

1. 引入axios和qs

//axios是官方推荐前端发送请求的方式，虽然你也可以用jsonp,但我没用过
cnpm axios vue-axios --save

//qs.stringify()序列化后的结果是a=a&b=b；而JSON.stringify()/得结果是{'a':a,'b':b}

2. 请求头要用application/x-www-form-ulrencoded，这样才能发送FormData格式的数据，代码如下：

//必须引入这两货
import qs from 'qs'
import axios from 'axios';

async accountLoginUrl(){
    console.log('accountLoginUrl')
    let result =  this.$axios({
        method: 'post',
        url: '/login',
        headers: { 'content-type': 'application/x-www-form-urlencoded' }, // 请求头，发送FormData格式的数据，必须是 这种请求头。
        data: qs.stringify({
        loginName: this.ruleForm.name,
        password: this.ruleForm.pwd
        })
    });
    console.log('result: ', result);
},

注意：这里的$axios使用得是重新定义过的：

// 将API方法绑定到全局
Vue.prototype.$axios = axios