鍍金池/ 問(wèn)答/HTML5  HTML/ 第一次用vue做前后端分離，POST請(qǐng)求接收不到數(shù)據(jù)

第一次用vue做前后端分離，POST請(qǐng)求接收不到數(shù)據(jù)

現(xiàn)在在做一個(gè)新建賬號(hào)的功能

clipboard.png

需要發(fā)送post請(qǐng)求給后臺(tái)，以下是我的代碼：

let newUsername = {
    name:this.name, //這些數(shù)據(jù)我已經(jīng)在HTML用v-model指令綁定好了，這步是沒(méi)問(wèn)題的
    email:this.email,
    password:this.password,
    roleId:this.role
}
axios.post('/account/add',newUsername,{ //接口地址也是沒(méi)問(wèn)題的
    headers: {
        Authorization : getCookie('token') //每次請(qǐng)求都要攜帶token
    }
})
.then( res => {
    if( res.data.status == 1){
        layer.msg('創(chuàng)建成功',{time:1500});
        console.log(res);
        $('#myModal').modal('toggle'); //彈窗消失
    }
    else{
        layer.msg(res.data.msg,{time:1500});
        console.log(res)
    }
})

以下是后端給的接口文檔

clipboard.png

調(diào)試了一下午，還是不知道問(wèn)題出在哪里?？薨~

回答
編輯回答
挽歌

axios 使用 post 請(qǐng)求需要自己添加配置

使用qs這個(gè)類庫(kù)

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);
});
2018年7月13日 13:08
編輯回答
涼心人

寫個(gè)api.js，創(chuàng)建接口，如export const addUser = params => { return axios.post(${base}/_/api/v1/user, params).then(res => res.data); };
然后在頁(yè)面用import導(dǎo)入，再使用~

2017年5月24日 00:13
編輯回答
汐顏

后端要求把參數(shù)放進(jìn)url里面，你post的數(shù)據(jù)放到了body里面，當(dāng)然不行了。可以通過(guò)配置post的config實(shí)現(xiàn)。

2018年2月21日 19:51
編輯回答
荒城

請(qǐng)問(wèn)你們公司的后端用什么管理接口的？

2018年5月5日 00:13
編輯回答
笨笨噠

還一個(gè)status參數(shù)？

2018年4月24日 02:40
編輯回答
裸橙
axios.post('/account/add',{
    headers: {
        Authorization : getCookie('token')
    },
    params:{
        name:this.name,
        email:this.email,
        password:this.password,
        status:1,
        roleId:this.role  
    }
})

我改為這樣沒(méi)錯(cuò)吧？

2018年7月18日 13:39