第一次用vue做前后端分离，POST请求接收不到数据

Question

现在在做一个新建账号的功能

需要发送post请求给后台，以下是我的代码：

let newUsername = {
    name:this.name, //这些数据我已经在HTML用v-model指令绑定好了，这步是没问题的
    email:this.email,
    password:this.password,
    roleId:this.role
}
axios.post('/account/add',newUsername,{ //接口地址也是没问题的
    headers: {
        Authorization : getCookie('token') //每次请求都要携带token
    }
})
.then( res => {
    if( res.data.status == 1){
        layer.msg('创建成功',{time:1500});
        console.log(res);
        $('#myModal').modal('toggle'); //弹窗消失
    }
    else{
        layer.msg(res.data.msg,{time:1500});
        console.log(res)
    }
})

以下是后端给的接口文档

调试了一下午，还是不知道问题出在哪里。哭啊~~

Answer 1

后端要求把参数放进url里面，你post的数据放到了body里面，当然不行了。可以通过配置post的config实现。

Answer 2

axios 使用 post 请求需要自己添加配置

使用qs这个类库

import qs from 'qs';
axios.interceptors.request.use( (config) => {
    if (config.method=="post"){
        config.data = qs.stringify(config.data);
        config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
    }
    return config;
},  (error) => {
    return Promise.reject(error);
});

Answer 3

写个api.js，创建接口，如export const addUser = params => { return axios.post(${base}/_/api/v1/user, params).then(res => res.data); };
然后在页面用import导入，再使用~

Answer 4

还一个status参数？

Answer 5

axios.post('/account/add',{
    headers: {
        Authorization : getCookie('token')
    },
    params:{
        name:this.name,
        email:this.email,
        password:this.password,
        status:1,
        roleId:this.role  
    }
})

我改为这样没错吧？

Answer 6

请问你们公司的后端用什么管理接口的？