Vue中Axios从远程/后台读取数据


Posted in Javascript onJanuary 21, 2019

Axios从远程读取数据

学习Axios的知识,并把数据从远端读取到页面上。后端数据,只要调用相应的页面就可以调取,在实际开发中,这些后台数据是需要后端程序员和你共同讨论制作的。我们现在只做前端,数据大家只要会调用即可。

安装Axios

我们直接使用npm install来进行安装。

cnpm install axios ?save

Vue中Axios从远程/后台读取数据

由于axios是需要打包到生产环境中的,所以我们使用?save来进行安装。

引入Axios(在哪个模块中使用就在哪个模块中引入)

我们在.vue页面引入Axios,由于使用了npm来进行安装,所以这里不需要填写路径。

Vue中Axios从远程/后台读取数据

Vue中Axios从远程/后台读取数据

Vue中Axios从远程/后台读取数据

服务端拉取数据

(在实际项目中这个后台接口地址是后端程序员提供给你的)

可以先把后台给的地址放到地址栏访问一下,是可以正常访问的,并且输出了json格式的字符串,这就是我们需要的远端数据了。这里我们使用Axios的get 方式来获得数据。

created(){
   axios.get('http://jspang.com/DemoApi/oftenGoods.php')
       //then获取成功;response成功后的返回值(对象)
   .then(response=>{
     console.log(response);
     this.oftenGoods=response.data;
   })
       //获取失败
   .catch(error=>{
     console.log(error);
     alert('网络错误,不能访问');
   })
 },

把axios的方法写到了created钩子函数中,我们使用了get 方法进行拉取数据,如果拉取成功用远端数据对oftenGoods进行赋值。

拉取报错,一般有两种情况:

  • 网络不通:网络状况不是很好,这可以在失败后隔5秒再次请求。
  • 报决绝访问:这种多是后端程序员设置了不允许跨域访问,需要你和后端程序员一起调试解决。

拉取分类商品数据:

依然用Get进行拉取,拉取后先用consoe.log(response)查看一下数据结构,让后进行赋值。

在这里贴出拉取和分配不同分类代码:

//读取分类商品列表
   axios.get('http://jspang.com/DemoApi/typeGoods.php')
   .then(response=>{
     console.log(response);
     //this.oftenGoods=response.data;
     this.type0Goods=response.data[0];
     this.type1Goods=response.data[1];
     this.type2Goods=response.data[2];
     this.type3Goods=response.data[3];
   })
   .catch(error=>{
     console.log(error);
     alert('网络错误,不能访问');
   })

html模板输出代码:

<ul class='cookList'>
   <li v-for="goods in type3Goods">
     <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
     <span class="foodName">{{goods.goodsName}}</span>
     <span class="foodPrice">¥{{goods.price}}元</span>
   </li>
</ul>

若有不足请多多指教!希望给您带来帮助!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
用Javascript数组处理多个字符串的连接问题
Aug 20 Javascript
jquery URL参数判断,确定菜单样式
May 31 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
详解js的作用域、预解析机制
Feb 05 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jQuery实现高级检索功能
May 28 jQuery
vue cli3 配置proxy代理无效的解决
Oct 30 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
vue 中使用print.js导出pdf操作
Nov 13 Javascript
原生JavaScript实现幻灯片效果
Feb 19 Javascript
vue项目中实现的微信分享功能示例
Jan 21 #Javascript
在vue项目中引入highcharts图表的方法
Jan 21 #Javascript
js的对象与函数详解
Jan 21 #Javascript
JS实现求5的阶乘示例
Jan 21 #Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 #Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 #Javascript
Vue 表情包输入组件的实现代码
Jan 21 #Javascript
You might like
php算开始时间到过期时间的相隔的天数
2011/01/12 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
PHP chr()函数讲解
2019/02/11 PHP
javascript EXCEL 操作类代码
2009/07/30 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
jquery validate demo 基础
2015/10/29 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
解决Angular.js中使用Swiper插件不能滑动的问题
2018/02/26 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
python如何代码集体右移
2020/07/20 Python
公司道歉信范文
2014/01/09 职场文书
村委会主任先进事迹
2014/01/15 职场文书
代办委托书怎样写
2014/04/08 职场文书
预防传染病方案
2014/06/14 职场文书
奶茶店创业计划书
2014/08/14 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python
Golang解析JSON对象
2022/04/30 Golang
JavaScript实现简单的音乐播放器
2022/08/14 Javascript