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 相关文章推荐
js宝典学习笔记(上)
Jan 10 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
jquery中键盘事件小结
Feb 24 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
详解关于React-Router4.0跳转不置顶解决方案
May 10 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 Javascript
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
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图片上传类带图片显示
2006/11/25 PHP
PHP实现的简单日历类
2014/11/29 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
php根据用户语言跳转相应网页
2015/11/04 PHP
php 截取utf-8格式的字符串实例代码
2016/10/30 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
php中如何执行linux命令详解
2018/11/06 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
小程序实现投票进度条
2019/11/20 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
python离线安装外部依赖包的实现
2020/02/13 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
个人自荐书
2013/12/20 职场文书
导购员的岗位职责
2014/02/08 职场文书
《落花生》教学反思
2014/02/25 职场文书
建房协议书
2014/04/11 职场文书
合作协议书格式
2014/08/19 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书