vue $http請求服務
阿新 • • 發佈：2019-02-20
vue中的$http服務 需要引入一個叫vue-resource.js的檔案，因為vue.js中沒有$http服務。如果需要使用這個服務去百度下載vue-resource.js 然後引進專案即可
引入單個vue的時候 可以使用 vue-resource.js的檔案實現互動效果
搭建vue專案的時候，我們一般用 axios
Vue 原本有一個官方推薦的 ajax 外掛 vue-resource，但是自從 Vue 更新到 2.0 之後，官方就不再更新 vue-resource
目前主流的 Vue 專案，都選擇 axios 來完成 ajax 請求，而大型專案都會使用 Vuex 來管理資料
後期會更新 axios以及專案搭建
get方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> <script src="vue-resource.js"></script> </head> <body> <div id="app"> <button @click='get()'>點選</button> </div> <script> var vm=new Vue({ el:'#app', data:{}, methods:{ get:function(){ //get請求 需要向後臺傳引數 語法：{params:{a:10,b:2}} //this.$http.get('get.php',{params:{a:10,b:2}}).then(function(res){} this.$http.get('get.php',{params:{a:10,b:2}}).then(function(res){ console.log(res); console.log(res.data); },function(res){ console.log('失敗') }) } } }) </script> </body> </html>
get.php檔案：
<?php
$a=$_GET['a'];
$b=$_GET['b'];
echo $a-$b;
?>
get方法有兩個引數get("PHP檔案"，“引數”)
post方法：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> <script src="vue-resource.js"></script> </head> <body> <div id="app"> <button @click='post()'>點選</button> </div> <script> var vm=new Vue({ el:'#app', data:{}, methods:{ post:function(){ //post方法有三個引數post("php檔案"，"引數","emulateJSON:true") //emulateJSON:true 模擬一個JSON資料傳送到伺服器，這樣才可以成功執行 this.$http.post('post.php',{a:10,b:2},{emulateJSON:true}).then(function(res){ console.log(res); console.log(res.data); },function(res){ console.log('失敗') }) } } }) </script> </body> </html>
post.php:
<?php
$a=$_POST['a'];
$b=$_POST['b'];
echo $a+$b;
?>
post方法有三個引數post("php檔案"，"引數","emulateJSON:true"
- emulateJSON:true 模擬一個JSON資料傳送到伺服器，這樣才可以成功執行
這樣放在伺服器環境下就可以運行了，我用的是phpstudy
=======================================
模擬介面資料---顯示到頁面上
data.json資料
{
"total":"4",
"data":[
{
"name":"三國演義",
"category":"文學",
"desc":"一個軍閥混戰的年代"
},{
"name":"水滸傳",
"category":"文學",
"desc":"草寇or英雄好漢"
},{
"name":"西遊記",
"category":"文學",
"desc":"妖魔鬼怪牛鬼蛇神什麼都有"
},{
"name":"紅樓夢",
"category":"文學",
"desc":"一個封建王朝的縮影"
}
],
"obj":{"adf":"adf"}
}解析資料 get請求
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
</head>
<body>
<div id="app">
<button @click='get()'>點選請求顯示資料</button>
<!--遍歷陣列 資料 -->
<ul>
<li v-for='(item,index) in arr'>{{item.name}} {{item.desc}}</li>
</ul>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
//宣告變數 存資料 $http 請求的資料
arr:[],
},
methods:{
get:function(){
//get 請求資料 沒有傳參 模擬資料json
this.$http.get('data.json').then(function(res){
console.log(res);
// .data 資料
console.log(res.data)
console.log(res.data.data);
//資料res.data.data 給一個變數
this.arr=res.data.data;
},function(){
alert("失敗")
})
}
}
})
</script>
</body>
</html>顯示頁面效果：
可以練習顯示資料：
