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 Chart 插件整理
Jun 18 Javascript
Jquery + Ajax调用webService实例代码(asp.net)
Aug 27 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
微信小程序 Video API实例详解
Oct 02 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
javascript中join方法实例讲解
Feb 21 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
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
BootStrap table使用方法分析
2016/11/08 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
前端把html表格生成为excel表格的实例
2017/09/19 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
Django对models里的objects的使用详解
2019/08/17 Python
Python PIL库图片灰化处理
2020/04/07 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
服装销售人员求职自我评价
2013/09/26 职场文书
毕业生自我鉴定范文
2013/11/08 职场文书
vue实现锚点定位功能
2021/06/29 Vue.js