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

axois_qs 使用表单传参

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

那么,如何使用?

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

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

  1. 请求头要用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
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页