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 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
js打印纸函数代码(递归)
Jun 18 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
js HTML5 Canvas绘制转盘抽奖
Sep 13 Javascript
JS排序之选择排序详解
Apr 08 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 Javascript
小程序实现列表展开收起效果
Jul 29 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/05/18 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
PHP查询快递信息的方法
2015/03/07 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
jQuery Ajax之load()方法
2009/10/12 Javascript
关于js datetime的那点事
2011/11/15 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
js表单登陆验证示例
2016/10/19 Javascript
javascript 单例模式详解及简单实例
2017/02/14 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
详解js类型判断
2018/05/22 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
python+django加载静态网页模板解析
2017/12/12 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
python实现翻译word表格小程序
2020/02/27 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
Python中过滤字符串列表的方法
2020/12/22 Python
找到不普通的东西:Bonanza
2016/10/20 全球购物
J2EE包括哪些技术
2016/11/25 面试题
团日活动策划书
2014/02/01 职场文书
培训专员岗位职责
2014/02/26 职场文书
报关员个人职业生涯规划书
2014/03/12 职场文书
大型活动组织方案
2014/05/10 职场文书
校运动会广播稿300字
2014/10/07 职场文书
自查自纠工作总结
2014/10/15 职场文书
2014年政协工作总结
2014/12/09 职场文书
保护动物的宣传语
2015/07/13 职场文书
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android