Vue请求JSON Server服务器数据的实现方法

时间:2021-05-26

由于这里是在之前这篇文章的基础上进行稍加修改完成的,因而其绝大部分代码与上面的是一样的,而其不同之处在于,其请求数据的数据源不是来源于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地址

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

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

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

http://localhost:3000/people

其响应后的结果为:

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

从后台获取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服务器数据的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章