Charles（自行下载）=>此工具用来模拟接口返回的数据，安装在本地，json-server 也能模拟接口数据，或者Mock.js请求拦截

在开发过程中我们少不了需要些动态数据，除了用mock模拟动态数据，Charles也是不错的选择，更方便

• 先在某个地方创建一个.json文件，用来手动写数据
• 打开工具，点Tools=>然后点 Map Local
• 当前是空的内容=> 点add增加一个配置项
• Protocal=>http当你访问http协议
• Host=>localhost这个域名下的
• Port=>3000端口下的，（端口随便定义对的上就行）
• Path=>/api/todolist (路径自己定义，用的时候一样就可以拿到数据)
• Map to Local path => 点Choose 帮助我们把这个请求，链接到对应的.json文件下
• 点Ok => Enable Map Local的勾打上，所要用的接口前面的勾也要一并打上
• 页面上 axios.get("/api/todolist") 刷新下就有返回数据了

Charles就是个代理服务器它能抓到中间浏览器的请求，如果路径和配置的一样，他就返回给你所对应的.json里的内容

免费数据接口, json-server模拟，后端有时还没做出API,前端需要自己模拟数据格式请求, json-server的安装与使用

vscode控制台

• npm install json-server -g 要先全局安装这个
• json-server --watch db.json 进入到db.json那个目录下，直接执行这条命令watch它, 成功的话默认3000端口可以打开，看到你自己定义的数据
• json-server --watch --port 3001 .\db.json 如果你的3000端口已被占用，需要 --port 3001 重新指定空闲的端口
• 免费的数据端口 http://jsonplaceholder.typicode.com/ 里面返回的数据，可以模拟API
• 参考篇章 https://blog.csdn.net/qq_40976321/article/details/97486701 , https://www.jianshu.com/p/9cfc5cdb0aeb

比如这是 db.json 文件的内容
{
    "user": {
        "a":0, 
        "b":1, 
        "c":2, 
        "d":3，
        "e":4, 
        "f":5
    },
    "id":[0,1,2,3，4，5],
    "data": [
        {"userId": 1, "id": 1},
        {"userId": 2, "id": 2}
        {"userId": 3, "id": 3}
    ]
}

localhost:3000/data    
localhost:3000/id    
localhost:3000/user
localhost:3000/data/1      第一条数据   {"userId": 1, "id": 1}
localhost:3000/id/2        第二个数据   1   

或者用 Mock.js 请求拦截

• 缺点：只支持ajax, 不支持fetch

结语

前端react QQ群：788023830 ---- React/Redux - 地下老英雄

前端交流 QQ群：249620372 ---- FRONT-END-JS前端

（我们的宗旨是，为了加班，为了秃顶……，仰望大佬），希望小伙伴们加群一起学习