十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
今天就跟大家聊聊有关Vue请求JSON Server服务器数据的实现,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
创新互联公司成都企业网站建设服务,提供网站设计、成都网站建设网站开发,网站定制,建网站,网站搭建,网站设计,响应式网站设计,网页设计师打造企业风格网站,提供周到的售前咨询和贴心的售后服务。欢迎咨询做网站需要多少钱:13518219792
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源码
vue-router
- {{item.name}}
db.json源码:
{
"people": {
"status": {
"status": 0
},
"message": [
{
"id": 1,
"name": "张三"
},
{
"id": 2,
"name": "李四"
}
]
}
}运行结果

看完上述内容,你们对Vue请求JSON Server服务器数据的实现有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。