使用GET 请求 从 服务端给的API请求到数据
全局设置 URL请求头
Vue.http.options.root='url'
在使用的时候 要用相对路径 这个root才会生效 如果在请求的时候使用绝对路径 那么这个设置将不会生效
全局设置emulateJSON
Vue.http.options.emluateJSON=true,
emulateJSON是通过POST请求的第三个参数 代表的是向服务端传的值是表单
因为这个API没有删除 和 添加功能 所以 并没有实现删除和增加功能
<!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.由于已经导入了VUE-RESOURCE 可以直接通过 this.$http发起请求
//2.了解get 或者post请求
//3.this,$http.get("url").then(function{})
//4.当通过then指定回调函数之后。在回调函数之中 可以拿到数据库返回的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>
网友评论