在前端项目里，如果后端没有及时提供接口，经常需要前端自己mock数据。这篇文章主要介绍使用charles这个软件进行mock数据的方法。
- 首先下载这个软件https://www.charlesproxy.com/latest-release/download.do
-
默认启动的是8888端口。如果端口被占用。在菜单栏找到 Proxy Settings..对端口号进行更改
91a8dceb00a4baeb831b8004a362c1f.png - 我在前端调用的代码如下：
componentDidMount () {
axios.get('/api/todolist')
.then((res) => {
console.log(res);
})
}
这个接口默认查找的是:
f251ea8f9f0a37d0dff670afdf63640.png
可以看到请求返回404，表示并没有找到这个接口
- 接下来在桌面新建一个文件夹mock。文件夹里新建一个todolist.json文件，写上需要mock的数据
- 配置tools -> Map Local Settings
6d04345c22650a8ab8dc6bbe1d085f6.png
cfca07af68d98b0a0f5bcdc53442915.png
如上图所示，Path和代码中请求的地址一致/api/todolist
f0027ff792c986526fe76192caa90eb.png -
点击ok后，在浏览器查看，发现数据已经拿到啦
a5f7328a73b3d9fd236f036e6a0dc7a.png
8511a19744bd7d57fa0c9a60900e13e.png
是不是很方便呐~
