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 相关文章推荐
setTimeout和setInterval的区别你真的了解吗?
Mar 31 Javascript
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
JS块级作用域和私有变量实例分析
May 11 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
原生js实现3D轮播图
Mar 21 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
php+javascript的日历控件
2009/11/19 PHP
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
Javascript 获取LI里的内容
2008/12/17 Javascript
JavaScript 学习笔记(六)
2009/12/31 Javascript
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
python实现大文件分割与合并
2019/07/22 Python
Python实现序列化及csv文件读取
2020/01/19 Python
Hammitt官网:设计师手袋
2020/05/23 全球购物
高中生毕业自我鉴定
2013/10/10 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
2014年标准化工作总结
2014/12/17 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书