Vue项目首页_使用axios发送ajax请求
安装axios: npm install axios --save
在Home.vue中发送一个ajax请求,然后把数据传递给子组件。
在Home.vue中:
在static目录下新建mock目录,mock下新建index.json:
{"ret": true,"data": {"swiperList": [{"id": "0001","imgUrl": "http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg"},{"id": "0002","imgUrl": "http://img1.qunarzz.com/piao/fusion/1802/42/7c92b9a381e46402.jpg_640x200_1cdce2a4.jpg"},{"id": "0003","imgUrl": "http://img1.qunarzz.com/piao/fusion/1802/51/e78f936a5b404102.jpg_640x200_c14f0b3a.jpg"},{"id": "0004","imgUrl": "http://img1.qunarzz.com/piao/fusion/1712/91/a275569091681d02.jpg_640x200_0519ccb9.jpg"}],"iconList": [{"id": "0001","imgUrl": "http://img1.qunarzz.com/piao/fusion/1611/54/ace00878a52d9702.png","desc": "景点门票"}, {"id": "0002","imgUrl": "http://img1.qunarzz.com/piao/fusion/1711/df/86cbcfc533330d02.png","desc": "滑雪季"}, {"id": "0003","imgUrl": "http://img1.qunarzz.com/piao/fusion/1710/a6/83f636bd75ae6302.png","desc": "泡温泉"}, {"id": "0004","imgUrl": "http://img1.qunarzz.com/piao/fusion/1611/35/2640cab202c41b02.png","desc": "动植园"}, {"id": "0005","imgUrl": "http://img1.qunarzz.com/piao/fusion/1611/d0/e09575e66f4aa402.png","desc": "游乐园"}, {"id": "0006","imgUrl": "http://img1.qunarzz.com/piao/fusion/1611/59/569d3c096e542502.png","desc": "必游榜单"}, {"id": "0007","imgUrl": "http://img1.qunarzz.com/piao/fusion/1611/17/4bd370f3eb1acd02.png","desc": "演出"}, {"id": "0008","imgUrl": "http://img1.qunarzz.com/piao/fusion/1611/7f/b1ea3c8c7fb6db02.png","desc": "城市观光"}, {"id": "0009","imgUrl": "http://img1.qunarzz.com/piao/fusion/1611/a9/ffc620dbda9b9c02.png","desc": "一日游"}],"recommendList": [{"id": "0001","imgUrl": "http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_140x140_80f63803.jpg","title": "故宫","desc": "东方宫殿建筑代表,世界宫殿建筑典范"}, {"id": "0002","imgUrl": "http://img1.qunarzz.com/sight/p0/1511/d2/d2aec2dfc5aa771290.water.jpg_140x140_abb362a7.jpg","title": "南山滑雪场","desc": "北京专业级滑雪圣地"}, {"id": "0003","imgUrl": "http://img1.qunarzz.com/sight/p0/1501/f4/f467729126949c3a.water.jpg_140x140_ef235b1c.jpg","title": "天安门广场","desc": "我爱北京天安门,天安门上太阳升"}, {"id": "0004","imgUrl": "http://img1.qunarzz.com/sight/p0/1501/40/40b2b6c951b28fdd.water.jpg_140x140_1c863e5c.jpg","title": "水立方","desc": "中国的荣耀,阳光下的晶莹水滴"}, {"id": "0005","imgUrl": "http://img1.qunarzz.com/sight/p0/201308/23/b283071686e64dfec8d65eac.jpg_140x140_8c5a7c49.jpg","title": "温都水城养生馆","desc": "各种亚热带植物掩映其间仿佛置身热带雨林"}],"weekendList": [{"id": "0001","imgUrl": "http://img1.qunarzz.com/sight/source/1510/6e/1ea71e2f04e.jpg_r_640x214_aa6f091d.jpg","title": "北京温泉排行榜","desc": "细数北京温泉,温暖你的冬天"}, {"id": "0002","imgUrl": "http://img1.qunarzz.com/sight/source/1505/aa/7baaf8a851d221.jpg_r_640x214_1431200f.jpg","title": "北京必游TOP10","desc": "来北京必去的景点非这些地方莫属"}, {"id": "0003","imgUrl": "http://img1.qunarzz.com/sight/source/1505/9e/21df651e19af5d.jpg_r_640x214_3ea5bb38.jpg","title": "寻找北京的皇城范儿","desc": "数百年的宫廷庙宇,至今依旧威严霸气"}, {"id": "0004","imgUrl": "http://img1.qunarzz.com/sight/source/1505/ce/bc89bc2f0e33ea.jpg_r_640x214_3e408453.jpg","title": "学生最爱的博物馆","desc": "周末干嘛?北京很多博物馆已经免费开放啦"}, {"id": "0005","imgUrl": "http://img1.qunarzz.com/sight/source/1505/b2/fde1bfcd057a52.jpg_r_640x214_bbf3fa44.jpg","title": "儿童剧场,孩子的乐园","desc": "带宝贝观看演出,近距离体验艺术的无穷魅力"}]}
}
修改config目录下的index.js:
proxyTable: {'api': {target: 'http://localhost:8080',pathRewrite: {'^/api': '/static/mock'}}},
实现将api请求转发到mock文件夹下。
在.gitignore文件中添加:
mock目录不会提交到线上,也不会提交到本地仓库。
控制台打印出res内容:
Vue项目首页_使用axios发送ajax请求相关推荐
- Vue之axios发送Ajax请求
2.10 axios发送ajax请求 axios github 2.10.1 准备工程 创建一个django工程,例如 login.创建完成之后,再创建一个子应用,例如users.最后再设置一下模板文 ...
- promise的应用和在VUE中使用axios发送AJAX请求服务器
promise 用promise对函数封装: 原来的代码: <!DOCTYPE html> <html> <head><title>vue demo&l ...
- 使用rest_framework写api接口的一些注意事项(axios发送ajax请求)
1. 类继承GenericAPIView,定义queryset 印象深刻的事: 由于原来对于继承关系不太清楚,写接口 APIView/泛指GenericAPIView不太关注queryset 没有设置 ...
- axios 发送 AJAX请求
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
- 前端学axios还是ajax,【Web前端问题】axios发送ajax请求问题?
在程序里借助axios库发送ajax请求,但是失败了,返回这个 然而在同一个位置换成jquery的代码却能成功,代码如下,不知axios哪里写的不对??谢谢~ //axios axios.post(& ...
- jquery发送ajax请求_复习之Vue用axios发送ajax请求
Axios是一个基于promise的HTTP库. 浏览器支持情况:Chrome.Firefox.Safari.Opera.Edge.IE8+. 官网:https://github.com/axios/ ...
- vue小项目总结与笔记【六】——使用axios发送ajax请求
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 安装: npm install axios --save 引入: import axios from ...
- Vue项目首页_热销推荐组件、周末游组件开发
热销推荐效果: 新建Recommend.vue: <template><div><div class="title">热销推荐</div& ...
- vue中使用axios发送ajax请求
1 get请求: html代码: js代码: 2 post请求 3 综合方法 综合方法也可以传递参数的,分别和get请求和post请求传递的参数形式是一样的.... 一个简单的总结,后面再接着完善! ...
最新文章
- c 语言编译是什么意思,我有个C语言编译程序,但是不知道是什么意思,望大家解释哈,在下...
- Linux 安装json神器 jq
- eclipse 对齐行号在括号中显示和字体调整
- IOS开发之页面切换
- AI行业真实现状:做芯片没工作,做视觉、语音血赚
- ##6.2 Neutron计算节点-- openstack pike
- 用小学的试题测试你,换个脑袋吧~~~
- linux把一个文件拷贝到另一个目录,linux把某个文件拷贝到不同的目录下面
- java1.8 ojdbc14.jar_ojdbc14_g.jar与ojdbc14.jar区别
- clientkey(ClientKeyt利用)
- Unity3d编辑器的使用
- 不知道何时,我逐渐丧失了表达能力
- 智能编程计算机表演赛,中国儿童青少年计算机表演赛在京闭幕
- [CF1538G] Gift Set (数学简单题)
- 关于全球时间的一点理解
- 工程施工阶段成本变化
- 蘑菇街防重复请求处理的实践与总结
- 爱上开源之Boot4go-etcdv3-browser之剧透篇
- MXNet的训练基础脚本:base_module.py
- Python二级应用题代码自用(无忧二级)