从后台获取vue-resource的数据源
基本上，在上面两点注意事项修改完成后，下面的代码就可以运行了，因而这里就不必再多说了，直接上完整源码：
源码
.html源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list">{{item.name}}</li>
</ul>
</div>
<script src="../../../../js/vue/vue/1.0/vue.js"></script>
<script src="../../../../js/vue/vue-resource/1.2.1/vue-resource.js"></script>
<script type="application/javascript">
var vm = new Vue({
el:'#app'
,data:{
list:[] }
,created(){
this.getData();
}
,methods:{
getData(){
var url = 'http://localhost:3000/people';
this.$http.get(url).then(function(res){
var body = res.body;
if(!body.status){
alert('请求出错！');
}
this.list = body.message;
});
}
}
});
</script>
</body>
</html>db.json源码：
{
"people": {
"status": {
"status": 0
},
"message": [
{
"id": 1,
"name": "张三"
},
{
"id": 2,
"name": "李四"
}
] }
}运行结果
总结
以上所述是小编给大家介绍的Vue请求JSON Server服务器数据的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
