前端 mock 数据的几种方式

目录

接口demo

Better-mock

just mock

koa

webpack

Charles

总结

        具体需求开发前，后端往往只提供接口文档，对于前端，最简单的方式就是把想要的数据写死在代码里进行开发，但这样的坏处就是和后端联调前还需要再把写死的数据从代码里删除，最好的方式是无侵入的 mock 。下边介绍几种常用的方式，大家可以结合自己的项目来选取。

        大致分为三类，重写 xhr/fetch、node.js 服务中转、系统层面拦截。

接口demo

        为了后边方便的安装 node 包，可以用 webpack 进行打包，具体配置可以参考 2021年从零开发前端项目指南，看到 React 配置的前一步就够了，只需要配置一个 html 和一个接口请求。 需要注意下 webpack 的版本，不同版本后续的配置会不同，这里我用的是 5.75.0 。

最终目标是通过 mock 让下边还没有开发好的接口正常返回数据：

fetch("/api/data", {body: JSON.stringify({ id: 10 }),method: "POST",
}).then((response) => response.json()).then((json) => console.log(json));

现在肯定是 404 。

图片

Better-mock

        better-mock fork 自 Mock.js，使用方法和 Mock.js 一致，用于 javascript mock 数据生成，它可以拦截 XHR 和 fetch 请求，并返回自定义的数据类型。

        https://github.com/lavyun/better-mock

只需要在调用接口前，引入 better-mock 。

import Mock from "better-mock";// mock list 返回数组，大小是 1 到 10，对象中的 id 自动加 1
Mock.mock("/api/data", {"list|1-10": [{"id|+1": 1,},],
});fetch("/api/data", {body: JSON.stringify({ id: 10 }),method: "POST",
}).then((response) => response.json()).then((json) => console.log(json));

控制台此时就会输出数据了。

图片

    better-mock 一个好处就是可以通过它既有的语法来生成一些随机的数据，每次请求都会返回不同的数据。

        坏处是会在请求发送前就拦截，导致在 Chrome 控制台就看不见请求了。

图片

just mock

        just mock 是一个浏览器插件，在代码中什么都不需要更改，只需要添加相应的接口和数据即可实现拦截。

        https://just-mock.vercel.app/

插件安装好后添加相应的域名就可以拦截到相应的请求。

图片

接着进行相应的编辑添加对应的 mock 数据就好。

图片

这样接口就会被拦截，控制台输出预设的数据：

图片

        浏览器插件原理和 Better-mock 是一样的，但会更加轻便，无需融入到代码中。两者的原理是一样的，都是在网络请求前重写了全局的 xhr 和 fetch ，具体可以参考 油猴脚本重写fetch和xhr请求。

koa

本地通过 koa 开启一个接口服务。

// serve.js
const Koa = require("koa");
const router = require("koa-router")();
const app = new Koa();router.post("/api/data", async (ctx, next) => {ctx.response.body = {status: true,data: [1, 2, 3],msg: "获取数据成功",};
});
// add router middleware:
app.use(router.routes());app.listen(3000);

        本地开启运行：node server.js，接口提供的地址是 localhost:3000，但是请求的地址是 loacalhost:8080 ，当然可以直接修改代码里的地址为 localhost:3000 ，但还可以通过 webpack  的配置，将请求转发到 localhost:3000 。

const path = require("path");
module.exports = {entry: "./src/main.js",output: {path: path.resolve(__dirname, "./dist"),filename: "bundle.js",},devServer: {static: path.resolve(__dirname, "./dist"),proxy: {// 将 /api 开头的 http 请求，都代理到 localhost:3000 上，由 koa 提供 mock 数据"/api": {target: "http://localhost:3000",secure: false,},},},
};

这样就可以看到控制台输出了：

图片

此外，Chrome 的 Network 也可以正常看到这个请求：

图片

这种方法也可以用来解决跨域问题，举个例子：

如果本地想访问一个具体域名的接口，比如请求知乎的热榜接口：

fetch("https://www.zhihu.com/api/v3/feed/topstory/hot-lists/total?limit=50&desktop=true",{headers: {accept: "*/*","accept-language": "zh-CN,zh;q=0.9,en;q=0.8","sec-ch-ua":'"Not?A_Brand";v="8", "Chromium";v="108", "Google Chrome";v="108"',"sec-ch-ua-mobile": "?0","sec-ch-ua-platform": '"macOS"',"sec-fetch-dest": "empty","sec-fetch-mode": "cors","sec-fetch-site": "same-origin","x-ab-param": "","x-ab-pb":"CpoBCAAbAD8ARwC0AGkBagF0ATsCzALXAtgCoAOhA6IDtwOmBNYEEQVRBYsFjAWeBTAGMQbrBicHdAh2CHkI2gg/CWAJwwnECcUJxgnHCcgJyQnKCcsJzAnRCfQJBApJCmUKawqYCqUKqQq+CsQK1ArdCu0K/go7CzwLQwtGC3ELhwuNC9cL4AvlC+YLLAw4DHEMjwysDMMMyQz4DBJNAQAAAAAAAAAAAAAAAAAAAAAEAAEAAAEAAAEAAAIGAAABAAAAAAAAAAAAAAADAAAAAAEAAAABAQAAAAEAAQAAAAUCAQAABgIEAAACAAA=","x-api-version": "3.0.76","x-requested-with": "fetch","x-zse-93": "101_3_3.0","x-zse-96":"2.0_LYJSVCX+9b1YXp/sG1Azyi5tC5RpabLbkXb3w5s6rv=Gxy9uMXqMXm4LjYWRdoIz","x-zst-81":"3_2.0aR_sn77yn6O92wOB8hPZnQr0EMYxc4f18wNBUgpTQ6nxERFZfRY0-4Lm-h3_tufIwJS8gcxTgJS_AuPZNcXCTwxI78YxEM20s4PGDwN8gGcYAupMWufIoLVqr4gxrRPOI0cY7HL8qun9g93mFukyigcmebS_FwOYPRP0E4rZUrN9DDom3hnynAUMnAVPF_PhaueTF4C8IhwVIDO_8ioC0JXfW9CKpCwCs4OBQAc0uBefagCKGMo1yroBh9CKe_STVHC1IqLKHJL_chSflqHCOqgYPhYKVwH8M4Lqqq9y1wH967NC7vH80UC8wCHswgHBDgY_ovg9r0wBcJO8s9OCzcLMNgLfkgNByqCLhhUf_veOQRY_dvxmCg_zugS8iBtBFgOZkwNLDw2skTX18XSYuJLqpCYBo_pMWbS8Pv3YtGFBaqL9AwCYhbL9eGVV2rNClDL1wJLmxCgKagNBUwSqYrHBbGp8e8HGggSMQ7xC3rOs",},referrer: "https://www.zhihu.com/hot",referrerPolicy: "no-referrer-when-downgrade",body: null,method: "GET",mode: "cors",credentials: "include",}
);

由于本地域名是 http://localhost:8080/ ，此时浏览器就会报跨域的错了。

图片

        此时后端可以通过 CORS 策略解决跨域的问题，但因为是测试环境，后端可能会说你自己解决吧，此时就可以通过 Koa 进行中转。

改写一下 Koa 的代码，先请求后端的接口，接着将收到的数据拿到后返回。

import Koa from "koa";
import fetch from "node-fetch";
import Router from "koa-router";const app = new Koa();
const router = new Router();
router.post("/api/data", async (ctx, next) => {const res = await fetch("https://www.zhihu.com/api/v3/feed/topstory/hot-lists/total?limit=50&desktop=true",{headers: {accept: "*/*","accept-language": "zh-CN,zh;q=0.9,en;q=0.8","sec-ch-ua":'"Not?A_Brand";v="8", "Chromium";v="108", "Google Chrome";v="108"',"sec-ch-ua-mobile": "?0","sec-ch-ua-platform": '"macOS"',"sec-fetch-dest": "empty","sec-fetch-mode": "cors","sec-fetch-site": "same-origin","x-ab-param": "","x-ab-pb":"CpoBCAAbAD8ARwC0AGkBagF0ATsCzALXAtgCoAOhA6IDtwOmBNYEEQVRBYsFjAWeBTAGMQbrBicHdAh2CHkI2gg/CWAJwwnECcUJxgnHCcgJyQnKCcsJzAnRCfQJBApJCmUKawqYCqUKqQq+CsQK1ArdCu0K/go7CzwLQwtGC3ELhwuNC9cL4AvlC+YLLAw4DHEMjwysDMMMyQz4DBJNAQAAAAAAAAAAAAAAAAAAAAAEAAEAAAEAAAEAAAIGAAABAAAAAAAAAAAAAAADAAAAAAEAAAABAQAAAAEAAQAAAAUCAQAABgIEAAACAAA=","x-api-version": "3.0.76","x-requested-with": "fetch","x-zse-93": "101_3_3.0","x-zse-96":"2.0_LYJSVCX+9b1YXp/sG1Azyi5tC5RpabLbkXb3w5s6rv=Gxy9uMXqMXm4LjYWRdoIz","x-zst-81":"3_2.0aR_sn77yn6O92wOB8hPZnQr0EMYxc4f18wNBUgpTQ6nxERFZfRY0-4Lm-h3_tufIwJS8gcxTgJS_AuPZNcXCTwxI78YxEM20s4PGDwN8gGcYAupMWufIoLVqr4gxrRPOI0cY7HL8qun9g93mFukyigcmebS_FwOYPRP0E4rZUrN9DDom3hnynAUMnAVPF_PhaueTF4C8IhwVIDO_8ioC0JXfW9CKpCwCs4OBQAc0uBefagCKGMo1yroBh9CKe_STVHC1IqLKHJL_chSflqHCOqgYPhYKVwH8M4Lqqq9y1wH967NC7vH80UC8wCHswgHBDgY_ovg9r0wBcJO8s9OCzcLMNgLfkgNByqCLhhUf_veOQRY_dvxmCg_zugS8iBtBFgOZkwNLDw2skTX18XSYuJLqpCYBo_pMWbS8Pv3YtGFBaqL9AwCYhbL9eGVV2rNClDL1wJLmxCgKagNBUwSqYrHBbGp8e8HGggSMQ7xC3rOs",},referrer: "https://www.zhihu.com/hot",referrerPolicy: "no-referrer-when-downgrade",body: null,method: "GET",mode: "cors",credentials: "include",});const data = await res.json();ctx.response.body = {status: true,data,msg: "获取数据成功",};
});
app.use(router.routes());app.listen(3000);

此时还是请求 /api/data 。

fetch("/api/data", {body: JSON.stringify({ id: 10 }),method: "POST",
}).then((response) => response.json()).then((json) => console.log(json));

依旧让 Webpack 将数据转发到 Koa 。

devServer: {static: path.resolve(__dirname, "./dist"),proxy: {// 将 `/api` 开头的 http 请求，都代理到 `localhost:3000` 上，由 koa 提供 mock 数据"/api": {target: "http://localhost:3000",secure: false,},},},

现在控制台输出的就是知乎返回的数据了，跨域问题也消失了：

图片

当然上边解决跨域只是一个思路，具体的封装还需要结合项目来进行。

webpack

        上边可以通过 webpack 进行转发数据，是因为 webpack 也启动了一个 HTTP 服务器，只不过用的不是 Koa ，是更早的一个框架 Express ，而且它们是同一个团队开发的。

        既然已经有了一个 HTTP 服务器，所以也没必要再开启另一个 Koa 的了，通过给 webpack 传递一个函数，重写 Koa 返回的数据即可。

只需要通过 setupMiddlewares 重写数据即可。

const path = require("path");
module.exports = {entry: "./src/main.js",output: {path: path.resolve(__dirname, "./dist"),filename: "bundle.js",},devServer: {static: path.resolve(__dirname, "./dist"),setupMiddlewares: (middlewares, devServer) => {if (!devServer) {throw new Error("webpack-dev-server is not defined");}middlewares.unshift({path: "/api/data",middleware: (req, res) => {// mock 数据模拟接口数据res.send({ list: [1, 2, 3], msg: "webpack mock" });},});return middlewares;},},
};

此时控制台也可以看到输出的内容：

图片

同时 Network 也是可以看到网络请求的。

图片

Charles

        终极必杀 mock 方法，因为它除了可以拦截浏览器中的请求，也可以拦截任意 App 的数据，甚至还可以拦截手机中的 HTTPS 请求，前段时间很火的羊了个羊就可以通过 Charles 抓取请求然后迅速通关。

        需要注意的是 Charles 抓不到 localhost 的请求，访问的时候需要将 localhost 改为 localhost.charlesproxy.com。

图片

webpack 需要加一个 allowedHosts 的配置，不然会返回 Invalid Host header 。

devServer: {static: path.resolve(__dirname, "./dist"),allowedHosts: "all",
},

全部配置好后就可以看到 Charles 抓到的请求了。

图片

此时只需要提前写好一个 json 文件，然后将右键选择 Map Local 对应的文件即可。

图片

{"data": [1, 2, 3],"msg": "from charles"
}

接下来就可以在控制台看到 mock 成功了。

图片

总结

        几种 mock 方式各有优缺点，上边只是提供一个思路，具体的 mock 方案就需要结合项目进行一定的封装了。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/2152.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

spring5源码篇(10)——spring-aop代理过程

spring5源码篇(10)——spring-aop代理过程

spring-framework 版本：v5.3.19 文章目录 1、ProxyFactory1.1、createAopProxy() 创建AopProxy1.2、getProxy() 创建代理对象1.3、JdkDynamicAopProxy#invoke 代理逻辑1.3.1、advised.getInterceptorsAndDynamicInterceptionAdvice() 匹配添加的advisor并转化成所需…
阅读更多...
基于51单片机和proteus的电流采集系统

基于51单片机和proteus的电流采集系统

此系统是基于51单片机和proteus的仿真设计，功能如下： 1. LCD1602实时显示获取到电流值及设定值。 2. 按键可调整电流设定值。 3. 电流值过高则蜂鸣器报警。 4. 指示灯指示电流及系统状态。 5. 系统信息可通过串口实时更新。 功能框图如下&#xff1…
阅读更多...
＜C语言＞ 自定义类型

＜C语言＞ 自定义类型

1.结构体 结构体是一种用户自定义的数据类型，允许将不同类型的数据项组合在一起，形成一个更大的数据结构。结构体可以包含多个成员变量，每个成员变量可以是不同的数据类型，如整数、字符、浮点数等，甚至可以包含其他结构…
阅读更多...
用html+javascript打造公文一键排版系统5：二级标题排版

用html+javascript打造公文一键排版系统5：二级标题排版

公文中二级标题的一般以（X）标注（其中X为由"一二三四五六七八九十"中的字符组成的字符串），用楷体字加粗。 首先我们要判断一段文字是否包含二级标题，最简单的方法 就是判断文字中的头一个字符是否…
阅读更多...
Unity中指定物体的模型面数分析

Unity中指定物体的模型面数分析

给定一架飞机模型，需要分析该模型中，各个3D物体的面数和三角形数，目的是用于观察哪些物体面数过多，需要减面。 一、模型面数分析 二、脚本代码 using System.Collections; using System.Collections.Generic; using UnityEngine…
阅读更多...
ROS：action通信

ROS：action通信

目录 一、前言二、概念三、作用四、实际案例4.1需求4.2action通信自定义action文件4.2.1定义action文件4.2.2编辑配置文件4.2.3编译 4.3action通信自定义action文件调用(C)4.3.1流程4.3.2vscode配置4.3.3服务端4.3.4客户端4.3.5编译配置文件4.3.6执行 4.4action通信自定义actio…
阅读更多...
字节跳动面试挂在2面，复盘后，决定二战.....

字节跳动面试挂在2面，复盘后，决定二战.....

先说下我基本情况，本科不是计算机专业，现在是学通信，然后做图像处理，可能面试官看我不是科班出身没有问太多计算机相关的问题，因为第一次找工作，字节的游戏专场又是最早开始的，就投递了&#xf…
阅读更多...
EXCEl——移除单元格中换行符

EXCEl——移除单元格中换行符

方法一：使用清除格式功能 步骤如下: 1.选中需要取消换行的单元格 2.在“开始"选项卡中找到"清除”功能，点击下拉菜单中的“清除格式" 3.这时单元格的换行就被取消了。 清除前效果图 清除后效果图 方法一：使用函数功能 步骤…
阅读更多...
K8s入门

K8s入门

K8s入门 目录 K8s入门namespacepoddeployment多版本扩缩容治愈能力滚动更新版本回退 serviceClusterIPNodePort ingress域名访问路径重写流量限制 存储抽象PV&PVCConfigMapSecret namespace kubectl get ns # 获取命名空间 kubectl create ns 名字 # 创建命名空间 ku…
阅读更多...
自动收小麦机（牛客2023萌新）

自动收小麦机（牛客2023萌新）

题目链接 示例1 输入 复制 4 1 2 1 1 4 5 2 2 2 3 4 输出 复制 10 说明 在第4格放出水流后，水流会流向第3格，由于第3格高度比第4格低，所以水流继续向左流向第2格，因为平地水流只能流2格，所以到达第2格后水流停…
阅读更多...
【Fiddler】Fiddler实现mock测试（模拟接口数据）

【Fiddler】Fiddler实现mock测试（模拟接口数据）

软件接口测试过程中，经常会遇后端接口还没有开发完成，领导就让先介入测试，然后缩短项目时间，有的人肯定会懵，接口还没开发好，怎么介入测试，其实这就涉及到了我们要说的mock了。 一、mock原理 m…
阅读更多...
【ArcGIS Pro二次开发】(49)：村规数据入库【福建省】

【ArcGIS Pro二次开发】(49)：村规数据入库【福建省】

之前用Arcpy脚本工具做了一个村规数据入库和主要图纸生成工具。 在使用过程中，感觉对电脑环境比较高，换电脑用经常会一些莫名其妙的错误，bug修得很累。近来随着ArcGIS Pro SDK的熟悉，就有了移植的想法。 这里先把村规数据入库工…
阅读更多...
QT学习—【属于自己的】串口调试助手

QT学习—【属于自己的】串口调试助手

文章目录 一、功能简介二、串口助手实现2.1 创建UI2.2 扫描可用串口2.3 配置波特率2.4 配置数据位2.5 配置停止位2.6 配置校验位2.7 打开/关闭串口2.8 刷新串口2.9 发送新行2.10 串口发送2.11 串口接收显示2.12 清空接收窗口2.13 定时发送2.14 固定窗口大小 三、总结3.1 将信号…
阅读更多...
本地前端项目使用gitee仓库外链图片加载失败

本地前端项目使用gitee仓库外链图片加载失败

错误&#xff1a;本地的前端项目&#xff0c;比如vue&#xff0c;纯html使用<img/>标签加载gitee保存的图片文件的时候&#xff0c;浏览器加载失败。 但是gitee可以正常访问图片 解决办法&#xff1a; 在index.html中加入meta标签就可以完美解决 <meta name"r…
阅读更多...
centos升级龙蜥

centos升级龙蜥

centos升级龙蜥 龙蜥简介龙蜥官方社区centos升级龙蜥首先确认自己的centos版本下载迁移镜像源安装epel源迁移工具安装i686包查看执行迁移脚本结果查看重启机器查看系统信息 龙蜥简介 2021年10月19日的大会上&#xff0c;阿里云发布全新操作系统“龙蜥”并宣布开源。龙蜥操作系…
阅读更多...
python 批量下载图片（协程）

python 批量下载图片（协程）

要下载的图片网站 1、总共多少页&#xff0c;得到每页的 url 列表 2、每页的图片详情的 ulr 列表&#xff08;因为该高清大图在图片详情页&#xff0c;因此需要去图片详情页拿图片的url) ​​​​​​​ 3、进入图片详情页&#xff0c;获取到图片url 然后下载。 完整代码如下&…
阅读更多...
涂鸦智能打造专业家庭智能生活助手，实现人机交互升级

涂鸦智能打造专业家庭智能生活助手，实现人机交互升级

近年来&#xff0c;智能家居设备的品类不断拓展&#xff0c;同时&#xff0c;人们对AI与智能家居的联动愈发憧憬。自然语言交互是未来人机交互的主要趋势之一&#xff0c;其关键在于使AI具备主动理解信息的能力&#xff0c;让用户的交互更轻松。如何将智能场景的交互变得更“善…
阅读更多...
SpringBoot中通过自定义Jackson注解实现接口返回数据脱敏

SpringBoot中通过自定义Jackson注解实现接口返回数据脱敏

场景 SpringBoot中整合Sharding Sphere实现数据加解密/数据脱敏/数据库密文&#xff0c;查询明文&#xff1a; SpringBoot中整合Sharding Sphere实现数据加解密/数据脱敏/数据库密文&#xff0c;查询明文_霸道流氓气质的博客-CSDN博客 上面讲的是数据库中存储密文&#xff0…
阅读更多...
HTML+CSS+JavaScript：渲染柱形统计图

HTML+CSS+JavaScript：渲染柱形统计图

一、需求 用户输入四个季度的数据&#xff0c;根据数据生成柱形统计图&#xff0c;浏览器预览效果如下 二、完整代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content&q…
阅读更多...
【图像分割 2023 CVPR】CFNet

【图像分割 2023 CVPR】CFNet

文章目录 【图像分割 2023 CVPR】CFNet摘要1. 简介2. 相关工作2.1 稠密预测的主干网设计2.2 多尺度特征融合 3. 方法3.1 整体架构3.2 过渡块3.4 结构变体 【图像分割 2023 CVPR】CFNet 论文题目&#xff1a;CFNet: Cascade Fusion Network for Dense Prediction 中文题目&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023