使用GET 請求 從 服務(wù)端給的API請求到數(shù)據(jù)
全局設(shè)置 URL請求頭
Vue.http.options.root='url'
在使用的時候 要用相對路徑 這個root才會生效 如果在請求的時候使用絕對路徑 那么這個設(shè)置將不會生效
全局設(shè)置emulateJSON
Vue.http.options.emluateJSON=true,
emulateJSON是通過POST請求的第三個參數(shù) 代表的是向服務(wù)端傳的值是表單
因?yàn)檫@個API沒有刪除 和 添加功能 所以 并沒有實(shí)現(xiàn)刪除和增加功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
添加品牌
</h3>
</div>
<div class="panel-body form-inline">
<label for="">
Name:
<input class="form-control" type="text" v-model="name">
</label>
<label for="">
<input class="btn btn-primary" type="button" value="添加" @click="add">
</label>
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Phone</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.phone}}</td>
<td><a href="">刪除</a></td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
Vue.http.options.root='http://jsonplaceholder.typicode.com/';
Vue.http.options.emulateJSON= true;
var phone=parseInt(100+Math.random()*899)+"-"+parseInt(100+Math.random()*899)+"-"+parseInt(100+Math.random()*899)
console.log(phone)
var vm=new Vue({
el:"#app",
data:{
name:null,
list:[
]
},
methods:{
add(){
},
getAllList(){//獲取所有品牌列表
//1.由于已經(jīng)導(dǎo)入了VUE-RESOURCE 可以直接通過 this.$http發(fā)起請求
//2.了解get 或者post請求
//3.this,$http.get("url").then(function{})
//4.當(dāng)通過then指定回調(diào)函數(shù)之后诗祸。在回調(diào)函數(shù)之中 可以拿到數(shù)據(jù)庫返回的result
//5.先判斷 result。status 是否等于0轴总，如果等于0直颅，就成功了』痴粒可以把result.message賦值給this.list 如果不等于0
//提示 獲取失敗
this.$http.get("users").then(function (result) {
if(result.status===200){
result=result.body;
console.log(result)
this.list=result;
}else{
alert("獲取失敗")
}
})
}
},
created(){
this.getAllList();
}
})
</script>
</html>
