首先下载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. 【Vulfocus解题系列】手把手教你使用Vulfocus公开靶场对Apache Log4j2远程命令执行漏洞复现

    前言 关于这个漏洞,啥都不用说了,直接发车. 工具下载 JNDIExploit:https://github.com/0x727/JNDIExploit 复现过程 启动靶场环境 直接用vulfocus ...

  2. 攻击科普：DDos

    目录 一.DDoS 攻击究竟是什么? 二.DDoS 攻击多少G是什么意思? 二.DDoS攻击种类 ICMP Flood UDP Flood NTP Flood SYN Flood CC攻击 DNS Q ...

  3. Log4j漏洞源码分析

    Log4j漏洞源码分析 这几天Log4j的问题消息满天飞,今天我们就一起来看看从源码角度看看这个漏洞是如何产生的. 大家都知道这次问题主要是由于Log4j中提供的jndi的功能. 具体涉及到的入口类是 ...

  4. 使用.NET 6开发TodoList应用(2)——项目结构搭建

    为了不影响阅读的体验,我把系列导航放到文章最后了,有需要的小伙伴可以直接通过导航跳转到对应的文章 : P TodoList需求简介 首先明确一下我们即将开发的这个TodoList应用都需要完成什么功能 ...

  5. 同步IO与一部IO、IO多路复用(番外篇)select、poll、epoll三者的区别;blocking和non-blocking的区别 synchronous IO和asynchronous IO的区别

    Python之路,Day9 , IO多路复用(番外篇)   同步IO和异步IO,阻塞IO和非阻塞IO分别是什么,到底有什么区别?不同的人在不同的上下文下给出的答案是不同的.所以先限定一下本文的上下文. ...

  6. div中出现滚动条，自动保持在最底端---显示聊天窗口最新的信息

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 分享 NET 5.x 自定义文件日志实现 原汁原味

    下面直接贴出实现代码 FileLoggerProvider /// <summary> /// 文件记录器提供商 /// </summary> public class Fil ...

  8. SpringBoot整合nacos实现配置中心（配置动态更新）

    官方教程:https://nacos.io/zh-cn/docs/quick-start-spring-boot.html Linux使用docker部署nacos:https://www.cnblo ...

  9. JAVA中CountDownLatch的简单示例

    public static void main(String[] args) throws InterruptedException { CountDownLatch latch =new Count ...

  10. 一个VS主题网站https://studiostyl.es/

    地址: https://studiostyl.es/ 用法: 工具->导入和导出设置->导入选定的环境设置->是,保存我当前的设置->选择下载的主题文件,完成.