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 相关文章推荐
JQuery开发的数独游戏代码
Oct 29 Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
JS实用的动画弹出层效果实例
May 05 Javascript
JavaScript程序中的流程控制语句用法总结
May 23 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
JavaScript监听键盘事件代码实现
Jun 03 Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 Javascript
js+css3实现简单时钟特效
Sep 13 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
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python-OpenCV基本操作方法详解
2018/04/02 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
大学军训自我鉴定
2013/12/15 职场文书
安全教育月活动总结
2014/05/05 职场文书
六查六看心得体会
2014/10/14 职场文书
大学生毕业评语
2014/12/31 职场文书
维稳工作承诺书
2015/01/20 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技