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 相关文章推荐
JavaScript写的一个自定义弹出式对话框代码
Jan 17 Javascript
一个简单的js动画效果代码
Jul 20 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
仿百度的关键词匹配搜索示例
Sep 25 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
有关php运算符的知识大全
2011/11/03 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
学习ExtJS Window常用方法
2009/10/07 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
AngularJS constant和value区别详解
2017/02/28 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
python 如何实现遗传算法
2020/09/22 Python
彪马英国官网:PUMA英国
2019/02/11 全球购物
如何选择使用结构还是类
2014/05/30 面试题
幼儿园中班开学寄语
2014/04/03 职场文书
英语教师个人工作总结
2015/02/09 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript