vuejs請求後台介面的方法：1、安裝axios並引入；2、使用get或post請求；3、安裝vue-resource並引入；4、使用vue-resource發送跨域請求。
本文操作環境：windows7系統、vue2.9.6版，DELL G3電腦。
vuejs怎麼請求後台介面？
vue請求後台介面 方法：
ue不支援直接傳送AJAX請求，需要使用vue-resource、axios等外掛程式實作。
一.使用axios發送AJAX請求：
1.安裝axios並引入：
1）npm install axios -S （直接下載axios元件，下載後axios .js就存放在node_modules\axios\dist中），首先在main.js 中引入axios：在此檔案加入import axios from 'axios'，如果在其它的元件中無法使用axios 指令。可以將 axios 改寫為 Vue 的原型屬性：Vue.prototype.$http=axios，在 main.js 中加入了這兩行程式碼之後，就能直接在元件的 methods 中使用 this.$http指令。
2）網路上直接下載axios.min.js檔案,透過script src的方式進行檔案的引入
2.傳送請求：
1）get請求使用格式：
a：axios([options]) （這種格式直接將所有資料寫在options裡，options其實是個字典）
b：axios.get(url[,options] );
<script>
new Vue({
el:'#itany',
data:{
user:{
name:'alice',
age:19
},
},
methods:{
send(){
axios({//格式a
method:'get',
url:'http://www.baidu.com?name=tom&age=23'
}).then(function(resp){
console.log(resp.data);
}).catch(resp => {
console.log('请求失败：'+resp.status+','+resp.statusText);
});
},
sendGet(){//格式b
axios.get('server.php',{
params:{
name:'alice',
age:19
}
})
.then(resp => {
console.log(resp.data);
}).catch(err => { //
console.log('请求失败：'+err.status+','+err.statusText);
});
},
}
});
</script>2）post請求格式：
a：axios.post(url,data,[options]);
new Vue({
el:'#itany',
data:{
user:{
name:'alice',
age:19
},
},
methods:{
sendPost(){
// axios.post('server.php',{
// name:'alice',
// age:19
// }) //该方式发送数据是一个Request Payload的数据格式，一般的数据格式是Form Data格式，所有发送不出去数据
// axios.post('server.php','name=alice&age=20&') //方式1通过字符串的方式发送数据
axios.post('server.php',this.user,{ //方式2通过transformRequest方法发送数据，本质还是将数据拼接成字符串
transformRequest:[
function(data){
let params='';
for(let index in data){
params+=index+'='+data[index]+'&';
}
return params;
}
]
})
.then(resp => {
console.log(resp.data);
}).catch(err => {
console.log('请求失败：'+err.status+','+err.statusText);
});
},
}
});3）傳送跨網域請求：
a:須知：axios本身不支援發送跨網域的請求，沒有提供對應的API，作者也暫沒計畫在axios新增支援發送跨網域請求，所以只能使用第三方函式庫
b:使用vue-resource傳送跨網域請求
c: 安裝vue-resource並引入
npm info vue-resource #查看vue-resource 版本信息 cnpm install vue-resource -S #等同于cnpm install vue-resource -save
d: 基本使用方法（使用this.$http傳送請求）
this.$http.get(url, [options]) this.$http.head(url, [options]) this.$http.delete(url, [options]) this.$http.jsonp(url, [options]) this.$http.post(url, [body], [options]) this.$http.put(url, [body], [options]) this.$http.patch(url, [body], [options])
二.vue-resource發送請求：
1.安裝引入vue-resource方式：
1）npm install axios -S （直接下載axios元件，下載完畢後axios.js就存放在node_modules\axios\dist中），透過改路由的index.js引入：在index.js加入import VueResource from 'vue-resource'和Vue.use(VueResource)即可
2）網路上直接下載axios.min.js文件，透過script src的方式進行文件的引入
2.post請求方式：
1) this.$http({ method:'POST',
url:'/a/b', //接口路径 data:{'a':'123124'}, //参数
headers: {"X-Requested-With": "XMLHttpRequest"},
}).then((res) => { if(res.body.code == "0") {
this.data= res.body.result;
} else {
this.warnMessage = "获取班级失败";
this.colorMessage = "red"
}
}).catch(err => {
this.warnMessage = "访问接口失败";
this.colorMessage = "red"
})
2）this.$http.post('../a/b/c', {}, {
header: {},
emulateJSON: true
}).then((res) => {
if(res.body.code == "0") {
this.data= res.body.result;
} else {
this.warnMessage = "获取班级失败";
this.colorMessage = "red"
}
}).catch(err => {
this.warnMessage = "访问接口失败";
this.colorMessage = "red"
})2.get請求方式同post，直接將上面的post改為get即可
推薦：《最新的5個vue.js影片教學精選》
以上是vuejs怎麼請求後台接口的詳細內容。更多資訊請關注PHP中文網其他相關文章！
