首页 使用axios 发送ajax请求
打开码云 创建分支 index-ajax 然后cd到文件夹 输入 git pull 然后 git checkout index-ajax然后输入git status 如果不小心改动了其他文件,会报错,不想修改就输入git checkout . 去除这次更改。然后git status在vue中发送ajax可以使用fetch 还有vue-resource 目前最火的是axios,在浏览器端axi
打开码云 创建分支 index-ajax
然后cd到文件夹 输入 git pull 然后 git checkout index-ajax
然后输入git status 如果不小心改动了其他文件,会报错,不想修改就输入git checkout . 去除这次更改。然后git status
在vue中发送ajax可以使用fetch 还有vue-resource 目前最火的是axios,在浏览器端axios可以帮助你发送xhr请求,在node服务器上可以发送http请求,使用axios对ajax数据的请求。
先安装 cd到文件夹 npm install axios --save
然后重新启动 npm run start
浏览观察,发现列表项没了,因为没有把 分支代码合并到master分支上。
首先git clear
然后查看输入 git branch
上一节课的分支是index-recommend
现在把这个分支进行合并(merge是融合的意思) 输入 git merge index-recommend
在git status 然后npm run start.
现在发送ajax请求,
因为首页有5个组件组成,但是不能在每个页面里都进行ajax请求,所以在Home.vue里只进行。
借助生命周期函数来进行ajax数据请求。然后引入axios.。当页面挂载好(mounted)之后,完成getHomeInfo函数的调用,这个函数帮助我们完成ajax数据的获取,用get方法获取一个url
axios返回的是一个promise对象,所以用.then,then里写一个方法,getHOmeInfoSucc,然后定义这个函数。数据获取成功之后就console一下
axiosS
在没有后端的支持下,如何进行数据的模拟呢。
第一步在static文件下新建一个mock文件夹,在里面新建一个index,json文件
(只有static文件夹才可以被外部访问)
这个路径就可以被访问
但是这个路径
所以要把模拟数据放在 static文件夹里。
但是不希望吧mock文件夹里的内容添加到线上,就要打开 主目录下的
填写
那axios请求路径就要改一下
刷新页面 ,数据被请求到
上线之前改动代码是由风险的,所以数据请求的路径不能那么写,在开发环境中依然这么写
,如果有个转发机制可以帮助我们把对api文件夹下的json文件转发到本地的mock文件夹下就好了。vue里提供了一个代理props功能。
第一步打开config文件夹下的index,js文件
通过完善proxyTable这个配置项就可以了。
当我们请求api这个目录的时候,把请求转发到当前的8080端口上,然后把路径做一个替换pathRewrite,一旦请求的地址是‘以api开头的’我就把它替换成这个路径下的文件。这个功能是webpack-dev-server提供的。
因为改了配置文件,需要重新启用一下 npm run start
更多推荐
所有评论(0)