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 imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
jQuery 入门级学习笔记及源码
Jan 22 Javascript
再谈javascript面向对象编程
Mar 18 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
详解VUE 定义全局变量的几种实现方式
Jun 01 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 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
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
怎样在PHP中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
php下封装较好的数字分页方法
2010/11/23 PHP
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
JavaScript Sort 表格排序
2009/10/31 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
Js逆向实现滑动验证码图片还原的示例代码
2020/03/10 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
python中的set实现不重复的排序原理
2018/01/24 Python
python web基础之加载静态文件实例
2018/03/20 Python
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
父亲生日宴会答谢词
2014/01/10 职场文书
迟到检讨书500字
2014/02/05 职场文书
销售总经理岗位职责
2014/03/15 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
公务员年终个人总结
2015/02/12 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
无线电通信名词解释
2022/02/18 无线电
css3新特性的应用示例分析
2022/03/16 HTML / CSS
Win11快速关闭所有广告推荐
2022/04/19 数码科技