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


Posted in Javascript onNovember 02, 2018

由于这里是在之前这篇文章的基础上进行稍加修改完成的,因而其绝大部分代码与上面的是一样的,而其不同之处在于,其请求数据的数据源不是来源于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的请求地址,然后再获取响应信息后直接点出来,原因如下:

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

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

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

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

http://localhost:3000/people

其响应后的结果为:

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

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

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

Javascript 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
JavaScript 学习笔记(七)字符串的连接
Dec 31 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
深入浅析Node.js 事件循环
Dec 20 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
js实现GIF图片的分解和合成
Oct 24 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 #Javascript
如何使用vuex实现兄弟组件通信
Nov 02 #Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 #Javascript
vue头部导航动态点击处理方法
Nov 02 #Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 #Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 #Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 #Javascript
You might like
php生成图形验证码几种方法小结
2013/08/15 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
js实现特定位取反原理及示例
2014/06/30 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
javascript中call apply 与 bind方法详解
2016/03/10 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
python解析xml文件实例分享
2013/12/04 Python
Python里disconnect UDP套接字的方法
2015/04/23 Python
Python2.x与Python3.x的区别
2016/01/14 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
交通事故调解协议书
2014/04/16 职场文书
党员承诺践诺书
2014/05/20 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
个人贷款收入证明
2014/10/26 职场文书
旷课检讨书范文
2015/01/27 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书