Vue之mock假数据并通过axios获取数据

目录

axios是干什么用的

使用axios

1.安装axios

2.引入axios

效果展示

---

axios是干什么用的

浏览器发送请求，或者Node.js发送请求都可以用到Axios。具体功能表现在以下几个方面

1、可以在浏览器中发送 XMLHttpRequests
2、可以在 node.js 发送 http 请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求数据和响应数据
6、能够取消请求
7、自动转换 JSON 数据
8、客户端支持保护安全免受 XSRF 攻击

使用axios

1.安装axios

npm install axios --save

2.引入axios

如下图，先把axios引入进来

然后使用mounted()生命周期函数挂载一个叫getHomeInfo()的方法，在这个方法里写入请求ajax数据的地址

这里使用getHomeInfo()方法其实是把整个主页面作为了一个ajax请求，如下图，ajax的地址在api/index.json中

如果要想获取到上面地址下的json我们还需要做两件事。第一，把json文件放在指定的位置；第二，让我们写的api地址指向的真实的路径。

把json文件放在哪里呢？

我们要把json文件放在static目录下，因为整个工程中只有static目录下的内容可以被外部访问到

我们知道，我们自己mock假数据都是做测试用，如果上传代码时不想把假数据上传到仓库上该如何做呢？

.gitignore设置忽略提交

在下面的位置加一行即可

把api地址转发到真实的路径。

找到config文件夹，进入index.js页中，在红框中写上你要把api路径转发到哪里

上面的一步操作完成之后切记要重启项目，只要我们更改了config文件就要重启项目

效果展示