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 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
jquery插件 cluetip 关键词注释
Jan 12 Javascript
JavaScript基础知识之数据类型
Aug 06 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
javascript检测是否联网的实现代码
Sep 28 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
vue cli3适配所有端方案的实现
Apr 13 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
介绍一下28个JS常用数组方法
May 06 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
博士208HAF收音机实习报告
2021/03/02 无线电
小文件php+SQLite存储方案
2010/09/04 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
PHP中魔术变量__METHOD__与__FUNCTION__的区别
2014/09/29 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
PHP中header函数的用法及其注意事项详解
2016/06/13 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
jquery foreach使用示例
2013/09/12 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
jQuery.each使用详解
2015/07/07 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
Python测试网络连通性示例【基于ping】
2018/08/03 Python
python可视化实现KNN算法
2019/10/16 Python
flask实现验证码并验证功能
2019/12/05 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
keras K.function获取某层的输出操作
2020/06/29 Python
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
如何将整数int转换成字串String
2014/03/21 面试题
亲子拓展活动方案
2014/02/20 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
《窃读记》教学反思
2016/02/18 职场文书
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python
MySQL如何使备份得数据保持一致
2022/05/02 MySQL