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 相关文章推荐
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
javascript制作的滑动图片菜单
May 15 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 Javascript
微信小程序 仿猫眼实现实例代码
Mar 14 Javascript
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 Javascript
vue使用map代替Aarry数组循环遍历的方法
Apr 30 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 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程序的php代码
2008/04/07 PHP
php URL验证正则表达式
2011/07/19 PHP
php设计模式之单例、多例设计模式的应用分析
2013/06/30 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
js实现返回顶部效果
2017/03/10 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
2019/04/20 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
详解Python迭代和迭代器
2016/03/28 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
大学生英语演讲稿
2014/04/24 职场文书
干部作风建设心得体会
2014/10/22 职场文书
护理工作个人总结
2015/03/03 职场文书
会计专业自荐信范文
2015/03/05 职场文书
出国导师推荐信
2015/03/25 职场文书
创业计划书之书店
2019/09/10 职场文书