首先下载charles软件地址，更详细的使用方法都包含在操作文档里，包含汉化版补丁（下载后查看）

链接：https://pan.baidu.com/s/1Q5rMbcX0Wus7AwdGUWa-Wg

提取码：mkgt

如何利用charles来mock呢？首先我们要新建一个json文件来写我们的json数据

1.点击菜单栏中的工具

2.点击本地映射

3.勾选启用本地映射

4.点击添加

5.协议(http) => 主机(localhost) => 端口(当前本地端口号) => 路径(/api/lala) => 点击选择，选择自己创建的json文件 => 点击确定

6.ajax请求/api/lala接口，就可以返回数据了

大家学会了吗？

react中使用charles实现本地数据mock的更多相关文章

  1. 【React自制全家桶】七、React实现ajax请求以及本地数据mock

    一.下载axios插件 yarn add axios 二.React的ajax请求代码如何放置 建议放置在生命周期函数之componentDidMount()中 三.ajax之get请求 axios. ...

  2. layui中的submit提交本地数据在控制在输出为空数组(解决)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. React中利用axios来实现数据请求

    axios是基于Promise来封装的,通常我们会用axios在数据请求这块作如下配置: 一.拦截器 有注释,不难理解,通常请求头参数不是写死的,应该是去浏览器中读的,例如,login之后返回toke ...

  4. 11. react 基础 使用charles 模拟接口数据

    charles参考文档 charles官网 模拟数据 模拟 axios 请求的数据 eg: 1. 编写 axios 请求 axios.get('/api/xxx') .then(()=>{ale ...

  5. React中父子组件数据传递

    Vue.js中父子组件数据传递:Props Down ,  Events Up Angular中父子组件数据传递:Props Down,  Events  Up React中父子组件数据传递:Prop ...

  6. 前端MVVM模式及其在Vue和React中的体现

    MVVM相关概念 Mvvm 前端数据流框架精讲 1) MVVM典型特点是有四个概念:Model.View.ViewModel.绑定器.MVVM可以是单向绑定也可以是双向绑定甚至是不绑定 2) 绑定器: ...

  7. 前端开发数据mock神器 -- xl_mock

    1.为什么要实现数据 mock 要理解为什么要实现数据 mock,我们可以提供几个场景来解释, 1.现在的开发很多都是前后端分离的模式,前后端的工作是不同的,当我们前端界面已经完成,但是后端的接口迟迟 ...

  8. React中的Ajax

    React中的Ajax 组件的数据来源,通常是通过Ajax请求从服务器获取,可以使用componentDidMount方法设置Ajax请求,等到请求成功,再用this.setState方法重新渲染UI ...

  9. vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete)

    vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete) 手把手式笔记 Axios配置 安装 axios ...

随机推荐

  1. Windows下mysql5.6升级到5.7的方法（亲测有效哦！）

    Mysql的升级方式分为两种:原地升级和逻辑升级.这两种升级方式,本质没有什么区别的. 只是在对数据文件的处理上有些区别而已.原地升级是直接将数据文件进行拷贝,而逻辑升级对数据文件的处理方式是通过逻辑 ...

  2. ciscn_2019_s_6

    例行检查 没有开启nx保护,考虑用shellcode来做这道题 程序放入ida查看 我们可以输入48个字符覆盖0使printf打印出bp的值 继续看这里,buf的大小实际上只有0x38的大小,但是re ...

  3. [BUUCTF]PWN——hitcontraining_uaf

    [BUUCTF]--hitcontraining_uaf 附件 步骤: 例行检查,32位,开启了nx保护 试运行一下程序,非常常见的创建堆块的菜单 32位ida载入分析,shift+f12查看程序里的 ...

  4. 【web】docker复现环境踩坑

    在先知看到有师傅发了个学习 P 牛的代码审计的文章,在 github 上下下来复现环境,结果 docker 各种问题,气死 安装 docker-compose:pip install -i https ...

  5. CF116B Little Pigs and Wolves 题解

    Content 有一张 \(n\times m\) 的地图,其中,\(\texttt{P}\) 代表小猪,\(\texttt{W}\) 代表狼.如果狼的上下左右有一头以上的小猪,那么它会吃掉其中相邻的 ...

  6. linux安装软件系列之npm安装

    什么是rpm 百度说它是 Red-hat Package Manager (红帽包管理器) 其实它是:RPM Package Manager (RPM包管理器,来源于:https://rpm.org) ...

  7. java面向对象类的继承~ 匿名类 ；多态特性；强制类型转换

    类的继承 创建子类语法:     修饰符 class 子类名 extends 父类名{        } 匿名子类语法: 直接实例化,过程中通过匿名类 继承父类,在实例化过程中将子类匿名 <父类 ...

  8. 如何获得Spring容器里管理的Bean，。不论是Service层，还是实体Dao层

    如何获得Spring容器里管理的Bean,.不论是Service层,还是实体Dao层, 下面的这个必须配置,否则必出错,空指针 下面的这个是代码 而获得bean代码如下: serviceManager ...

  9. 在JSP页面里，时间控件的JS位置在下面然后就显示不出来

    在JSP页面里,时间空间的JS位置在下面然后就显示不出来,放到前面然后就显示出来了, 情何以堪啊,开始还以为是什么错误.

  10. TURN协议(RFC5766详解)

    如果一台主机处于NAT后面,那么在一定条件下两台主机无法之间进行通讯.在这种条件下,那么使用中继服务提供通讯是有必要的. 这个规范定义了一个名为TURN(使用中继穿越NAT)的协议,它允许一台主机使用 ...