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地址
我们在这里不能直接使用http://localhost:3000的请求地址，然后再获取响应信息后直接点出来，原因如下：
从这里，我们可以看到，我们所获取的实际上返回的是一个页面，我们是不能对页面直接点出来数据然后再操作的。即我们如果在响应结果中使用res.body，其返回的结果为：
此时我们访问的url地址应该为：
其响应后的结果为：
从这里我们可以看出，这才是我们所期望得到的结果。
从后台获取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服务器数据的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了vue-property-decorator使用手册，文中较详细的给大家介绍了他们的用法，通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
在vue3.x中vuex调取值在html代码里可以直接使用vue2.x的方法,但是在js里与vue2.x就有了那么一丢丢的不同,下面这篇文章主要给大家介绍了关于Vue3中Vuex详细使用的相关资料,需要的朋友可以参考下2022-07-07
这篇文章主要为大家详细介绍了vue+swiper实现时间轴效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
基于vue2.0的活动倒计时组件countdown(附源码下载)
这是一款基于vue2.0的活动倒计时组件，可以使用服务端时间作为当前时间，在倒计时开始和结束时可以自定义回调函数。这篇文章主要介绍了基于vue2.0的活动倒计时组件countdown,需要的朋友可以参考下2018-10-10
vue3中的ref,toRef,toRefs三个的作用使用小结
Vue3中ref、reactive、toRef、toRefs都是与响应式数据相关的，就此做一份笔记作为区别，本文重点给大家讲解vue3中的ref，toRef，toRefs三个是干嘛的，有什么作用，感兴趣的朋友跟随小编一起看看吧2022-11-11
vue3中使用ant-design-vue的layout组件实现动态导航栏和面包屑功能
这篇文章主要介绍了vue3中使用ant-design-vue的layout组件实现动态导航栏和面包屑功能,基于一个新建的Vue3项目上实现，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下2023-01-01
这篇文章主要介绍了Vant 在vue-cli 4.x中按需加载操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了Vue-admin-template 添加、跳转子页面问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了浅谈在Vue.js中如何实现时间转换指令，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了vue如何实现动态改变地址栏的参数值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
最新评论