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 相关文章推荐
JQuery插件Style定制化方法的分析与比较
May 03 Javascript
JavaScript仿支付宝密码输入框
Dec 29 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
bootstrap Table的一些小操作
Nov 01 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
如何从头实现一个node.js的koa框架
Jun 17 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 Javascript
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 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
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
JS常用算法实现代码
2016/11/14 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
使用ionic播放轮询广告的实现方法(必看)
2017/04/24 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
python深度优先搜索和广度优先搜索
2018/02/07 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
Python贪心算法实例小结
2018/04/22 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
小学生田径运动会广播稿
2014/09/11 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python