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 相关文章推荐
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
详解JavaScript数组的操作大全
Oct 19 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 Javascript
Vue实现商品详情页的评价列表功能
Sep 04 Javascript
js实现简单的打印表格
Jan 15 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
详解使用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
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
Json解析的方法小结
2016/06/22 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
微信小程序url传参写变量的方法
2018/08/09 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
JS中this的4种绑定规则详解
2020/02/04 Javascript
python数据结构之链表的实例讲解
2017/07/25 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
python命令行工具Click快速掌握
2019/07/04 Python
悦木之源美国官网:Origins美国
2016/08/01 全球购物
开会迟到检讨书
2014/02/03 职场文书
保密工作实施方案
2014/02/24 职场文书
会务接待方案
2014/02/27 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
环保建议书500字
2014/05/14 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
党组织领导班子整改方案
2014/10/25 职场文书
优秀员工事迹材料
2014/12/20 职场文书
小学生运动会广播
2015/08/19 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB