vue接收json数据_Vue请求JSON Server服务器数据的实现方法

由于这里是在的基础上进行稍加修改完成的，因而其绝大部分代码与上面的是一样的，而其不同之处在于，其请求数据的数据源不是来源于json文件，而是来自于后台的数据。此处的后台服务器中的数据由json server所提供。

注意事项

json的数据结构

这是之前所请求的json数据：

{

"status":0

,"message":[

{

"id":1

,"name":"张三"

}

,{

"id":2

,"name":"李四"

}

]

}

如果我们直接使用之前所使用的json数据，其在json server中执行下面命令启动服务器：

json-server db.json

在控制台中我们会看到，其是会报错的，其报的错误代码如下：

\{^_^}/ hi!

loading db.json

done

type of "status" (number) in db.json is not supported. use objects or arrays of objects.

上面的意思是说，在status后面不应该直接跟数字0而是应该跟一个object对象或者是数组对象。之所以出现这种情况，其主要是因为在json server的json顶级对象中，其是不允许直接跟字符串或数字的，而是应该跟object对象或者是数组对象。

所以说上面的json数据应该修改如下：

{

"people": {

"status": {

"status": 0

},

"message": [

{

"id": 1,

"name": "张三"

},

{

"id": 2,

"name": "李四"

}

]

}

}

现在再次执行下面的代码启动服务器：

json-server db.json

其启动后的结果如下：

\{^_^}/ hi!

loading db.json

done

resources

http://localhost:3000/status

http://localhost:3000/message

home

http://localhost:3000

type s + enter at any time to create a snapshot of the database

我们可以看到，现在json server已经启动成功！

请求的url地址

我们在这里不能直接使用的请求地址，然后再获取响应信息后直接点出来，原因如下：

从这里，我们可以看到，我们所获取的实际上返回的是一个页面，我们是不能对页面直接点出来数据然后再操作的。即我们如果在响应结果中使用res.body，其返回的结果为：

此时我们访问的url地址应该为：

其响应后的结果为：

从这里我们可以看出，这才是我们所期望得到的结果。

从后台获取vue-resource的数据源

基本上，在上面两点注意事项修改完成后，下面的代码就可以运行了，因而这里就不必再多说了，直接上完整源码：

源码

.html源码

vue-router

• {{item.name}}

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;

});

}

}

});

db.json源码：

{

"people": {

"status": {

"status": 0

},

"message": [

{

"id": 1,

"name": "张三"

},

{

"id": 2,

"name": "李四"

}

]

}

}

运行结果

总结

以上所述是小编给大家介绍的vue请求json server服务器数据的实现方法，希望对大家有所帮助

希望与广大网友互动？？

点此进行留言吧！