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 相关文章推荐
常用js脚本
Dec 03 Javascript
angularJS 中$scope方法使用指南
Feb 09 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
js数组常用最重要的方法
Feb 04 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 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
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
php遍历目录与文件夹的多种方法详解
2013/11/14 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
详解YII关联查询
2016/01/10 PHP
php上传图片类及用法示例
2016/05/11 PHP
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
Python SQLite3简介
2018/02/22 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
PyCharm如何导入python项目的方法
2020/02/06 Python
openCV提取图像中的矩形区域
2020/07/21 Python
python批量修改交换机密码的示例
2020/09/22 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
CSS3实现swap交换动画
2016/01/19 HTML / CSS
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
DBA的职责都有哪些
2012/05/16 面试题
联谊活动策划书
2014/01/26 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
python flappy bird小游戏分步实现流程
2022/02/15 Python
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技