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设置首页和收藏页面的小例子
Nov 11 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
JQuery中基础过滤选择器用法实例分析
May 18 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 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 传值赋值与引用赋值的区别
2010/12/29 PHP
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
jquery获取img的src值的简单实例
2016/05/17 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python 代码性能优化技巧分享
2012/08/07 Python
python去掉字符串中重复字符的方法
2014/02/27 Python
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
python批量修改文件编码格式的方法
2018/05/31 Python
Python目录和文件处理总结详解
2019/09/02 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
小学三年级数学教学反思
2014/01/31 职场文书
2014婚礼司仪主持词
2014/03/14 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
2014年服务员工作总结
2014/11/18 职场文书
2014司机年终工作总结
2014/12/05 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
图文详解matlab原始处理图像几何变换
2021/07/09 Python
python中tkinter复选框使用操作
2021/11/11 Python
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android