首页 使用axios 发送ajax请求

打开码云 创建分支 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

猜你喜欢

转载自blog.csdn.net/qq_41153478/article/details/80383857