Vue向后端傳數(shù)據(jù)后端接收為null問(wèn)題及解決
更新時(shí)間：2022年09月07日 09:52:23 投稿：jingxian
這篇文章主要介紹了Vue向后端傳數(shù)據(jù)后端接收為null問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Vue向后端傳數(shù)據(jù)后端接收為null
由于axios默認(rèn)發(fā)送數(shù)據(jù)時(shí)，數(shù)據(jù)格式是Request Payload，而并非我們常用的Form Data格式，后端數(shù)據(jù)就為null，所以在發(fā)送之前，需要使用qs模塊對(duì)其進(jìn)行處理。
他們的格式
- Request Payload：http://localhost:8080/login?zh=123,pw=123
- Form Data:http://localhost:8080/login,{zh=“123”,pw=“123”}
安裝qs
npm install qs
mian.js中添加
import qs from 'qs' //引入qs Vue.prototype.$qs = qs
vue請(qǐng)求
axios.post('http://localhost:8080/manage/doctor/login.do',
this.$qs.stringify({
doctorName:this.form.username,
password:this.form.password,
// test:3,
})
)
.then(response=>{
console.log(response);
})
//獲取失敗
.catch(error=>{
console.log(error);
alert('網(wǎng)絡(luò)錯(cuò)誤，不能訪問(wèn)');
})
我的后端用的java，給你們看下效果圖吧：
Vue捕獲后端拋出異常
修改vue項(xiàng)目中 src/utils/request.js中 service.interceptors.response.use內(nèi)容
設(shè)置前
設(shè)置后
service.interceptors.response.use(
(response) => {
loadingInstance &&
setTimeout(function () {
loadingInstance.close()
}, 500)
const res = response.data
return res
},
(error) => {
loadingInstance &&
setTimeout(function () {
loadingInstance.close()
}, 500)
if (error && error.response) {
var { status, data } = error.response
if (status === 401 || status === 403) {
if (!loginInstance && whiteRoutes.indexOf(requestUrl) === -1) {
loginInstance = MessageBox.confirm('登錄超時(shí)請(qǐng)重新登錄', '重新登錄', {
confirmButtonText: '好的',
type: 'warning'
})
.then(() => {
loginInstance = null
store.dispatch('user/resetToken').then(() => {
location.reload()
})
})
.catch(() => {
loginInstance = null
})
}
} else {
if (data) {
Message({
message: data,
type: 'error',
duration: 5 * 1000
})
} else {
Message({
message: data.message || '服務(wù)器異常，請(qǐng)稍后再試或聯(lián)系管理員',
type: 'error',
duration: 5 * 1000
})
}
}
} else {
Message({
message: '服務(wù)器異常，請(qǐng)稍后再試或聯(lián)系管理員',
type: 'error',
duration: 5 * 1000
})
}
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue組件中節(jié)流函數(shù)的失效的原因和解決方法
這篇文章主要介紹了vue組件中節(jié)流函數(shù)的失效和解決方法，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了Vue和React的區(qū)別，畢竟是兩個(gè)框架，不像兩個(gè)?API，要說(shuō)細(xì)節(jié)上的區(qū)別就太多太多了，本文就簡(jiǎn)單的帶大家說(shuō)說(shuō)Vue?和?React?的區(qū)別,需要的朋友可以參考下2023-05-05
vue.js模版插值的原理與實(shí)現(xiàn)方法簡(jiǎn)析
這篇文章主要介紹了vue.js模版插值的原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式簡(jiǎn)單分析了vue.js模板插值的基本功能、原理、實(shí)現(xiàn)方法與注意事項(xiàng),需要的朋友可以參考下2023-04-04
vue金額格式化保留兩位小數(shù)的實(shí)現(xiàn)
這篇文章主要介紹了vue金額格式化保留兩位小數(shù)的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
詳談vue中router-link和傳統(tǒng)a鏈接的區(qū)別
這篇文章主要介紹了詳談vue中router-link和傳統(tǒng)a鏈接的區(qū)別，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要為大家詳細(xì)介紹了Vue.js仿 Select下拉框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了Vuex中State的使用方法,Vuex 使用單一狀態(tài)樹(shù),用一個(gè)對(duì)象就包含了全部的應(yīng)用層級(jí)狀態(tài),這也意味著,每個(gè)應(yīng)用將僅僅包含一個(gè) store 實(shí)例,需要的朋友可以參考下2023-11-11
vue項(xiàng)目依賴升級(jí)報(bào)錯(cuò)處理方式
這篇文章主要介紹了vue項(xiàng)目依賴升級(jí)報(bào)錯(cuò)處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
多個(gè)Vue項(xiàng)目部署到服務(wù)器的步驟記錄
這篇文章主要給大家介紹了關(guān)于多個(gè)Vue項(xiàng)目部署到服務(wù)器的相關(guān)資料，文中通過(guò)圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
Vue中對(duì)iframe實(shí)現(xiàn)keep alive無(wú)刷新的方法
這篇文章主要介紹了Vue中對(duì)iframe實(shí)現(xiàn)keep alive無(wú)刷新的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07