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 相关文章推荐
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
JavaScript 学习笔记之数据类型
Jan 14 Javascript
jquery手风琴特效插件
Feb 04 Javascript
JS中捕获console.log()输出的方法
Apr 16 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
浅谈Vue.set实际上是什么
Oct 17 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
Zend studio文件注释模板设置方法
2013/09/29 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
python使用any判断一个对象是否为空的方法
2014/11/19 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
python实现类之间的方法互相调用
2018/04/29 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
办公室文员工作自我评价
2013/12/01 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
代理词怎么写
2015/05/25 职场文书
一起来学习Python的元组和列表
2022/03/13 Python