努力一周,开源一个超好用的接口Mock工具——Msw-Tools
作为一名前端开发,是不是总有这样的体验:基础功能逻辑和页面UI开发很快速,本来可以提前完成,但是接口数据联调很费劲,耗时又耗力,有时为了保证进度还不得不加加班。
为了摆脱这种痛苦,经过一周的努力,从零开发了一个灵活无依赖,且集成简单的数据接口 Mock 工具——Msw-Tools,已开源到 NPM,希望对前端小伙伴有所帮助。
一、前言
Msw-Tools
(Mock Service Worker tools)是一个基于 Msw.js
和 Svelte
构建的数据 Mock 工具,用于前后端接口数据联调,和不同数据、不同场景的功能测试。
痛点引导需求,需求决定产品。
开发 Msw-Tools 最初为了解决我日常开发中遇到的痛点,也就是前边说的,前后端接口数据联调比较耗时,很容易影响开发进度。
早在以前也使用过很多相应的 Mock 方案,但是总感觉不够灵活,而大部分都需要在项目中写 Mock 数据的逻辑代码,这一点是我比较抵制的。因为这样做很容易造成代码耦合,甚至一不小心就会把Mock代码打包到生产环境。
二、前端常用的常用的MOCK方案
前端常用的常用的MOCK方案有以下几类:
- 代码侵入: 直接在代码中写死 Mock 数据,或者请求本地的 JSON 文件,总之,一切需要侵入代码切换环境的行为都是不好的,实际开发中最常用,但不推荐。
- 接口管理工具: 代表为 Apifix、Swagger、Yapi、Moco、Rap等,配置功能强大,有统一的接口管理后台,查找使用方便。但是重度依赖后端,前端发挥空间小,一般会作为大团队的基础建设而存在,维护成本比较高。
- 本地 node 服务器: 代表为 Json-server,基于本地 json 文件的增删改查,配置简单,自定义程度高。但是无法随着后端 API 的修改而自动修改。
- 请求拦截: 代表为 Mockjs,通过拦截特定的AJAX请求,并生成给定的数据类型的随机数,但是需要在业务代码中调用,有入侵性。
- 抓包工具: 代表为 Charles 、Fiddler 等软件工具,便于混合开发的问题排查、线上问题排查,但是使用和调试相对繁琐。
- 组合模式: 代表为 Easy-mock,提供在线服务和接口代理,官网建设中。
- 其他方案: 代表为 Jsonplaceholder,直接 fetch 远程的数据,文档简单。
三、Msw-Tools 灵感火花
- 灵感: 很早以前用过
mockjs
来拦截数据,于是就很好奇,网络请求是怎么拦截的?恰好最近在 npm 上看到一个很不错的开源库 msw,原来这个也是做 Mock 数据的。于是就大概看了一下 mswjs官网介绍,其中提供了很灵活的API,让我们以 Express 路由的形式去配置 Mock 接口,但是所有的 mock 数据都是提前在代码中集成的。然后,我就在想能不能由 Mock 调试者或使用者自由的去配置接口 Url 和 Mock 数据,如果能实现,不仅开发者能灵活的配置想要的接口数据,而且测试人员也能很方便的来修改接口数据,以达到测试不同数据、不同场景的情况,并且还能避免修改数据库。
四、Msw-Tools 功能特点
- 无框架限制: 使用
Svelte
独立封装的Custom Web Components
,像使用div、span
等原生标签一样无感使用。 - 无侵入性: 根据开发环境动态加载,与业务功能代码无依赖、无耦合、无关联。
- 配置范围广: 个性化配置 Mock 接口,Response Data、Status Code、Request Pending Time。
- 控制粒度细: 可以精确控制到每一个数据接口是否使用 Mock。
- 操作友好性: 一键编辑,数据格式化,一键配置,即刻生效。
- 数据便捷性: Mock 数据支持以 JSON 文件的形式一键导入,一键导出。
五、接入使用
Method 1: Using npm:(Recommended)
- install
msw-tools
和msw
npm install -D msw-tools
npm install -D msw
- install
mockServiceWorker.js
。每个脚手架生成的项目,静态文件目录可能不同,具体请参考:Common public directories
npx msw init public/ --save
Method 2: Using CDN in HTML:
<body>
<msw-tools base="/"></msw-tools>
<script src="https://unpkg.com/msw-tools@latest/dist/msw-tools.min.umd.js"></script>
</body>
六、Example
以 Vue3 项目为例:
- 在入口文件
main.js
中根据环境来动态加载
// main.js
import { createApp } from "vue";
import router from "./router";
import store from "./store";
import App from "./App.vue";
import "./assets/css/style.scss";
const app = createApp(App);
app.use(router).use(store);
app.mount("#app");
if (process.env.NODE_ENV === "development") {
const MswTools = require("msw-tools");
new MswTools();
}
- 在根组件
App.vue
中使用<msw-tools />
导入
<template>
<msw-tools base="/" v-if="isDev" />
<router-view />
</template>
<script setup>
import { ref } from "vue";
const isDev = ref(process.env.NODE_ENV === "development");
</script>
七、参数配置
base:开发或生产环境服务的公共基础路径。
- 类型:
string
- 默认:
/
使用参照:
- 访问 URL:
https://tiven.cn
, 对应的 Base:/
, 使用<msw-tools base="/" />
。 - 访问 URL:
https://tiven.cn/service/
,对应的 Base:/service/
,使用<msw-tools base="/service/" />
。
需要与打包工具和 Router 路由的 base 保持一致。请参考:
八、注意事项
mockServiceWorker.js
文件只能放在静态文件目录中(/public
),作为Service Worker
服务的注册文件,不参与打包编译,只能以 相对路径 的形式引用,不然Service Worker
服务无法注册,会导致请求拦截不生效。service Worker
API使用限制:只能在 https(已安转证书)、localhost、127.0.0.1 等服务下使用,否则控制台会出现[MSW] Mocking enabled (fallback mode)
日志,也就是说 http 域名服务下不可用。
九、演示体验
Msw-Tools 在线体验:msw-tools
十、TODO
- Msw-Tools 功能持续优化
- 开启控制台的按钮可拖拽移动
- 封装 mswjs 相关API,减小打包体积
- 规划中...
十一、使用反馈
- Email: tw.email@qq.com
- Issues: msw-tools
欢迎广大 Front-ender 、Tester 体验使用,如有疑问或需求建议请到 Github Issues 提出。
闭门造车造轮子,过程很艰难,坚持才有收获。
Thank you ♪(・ω・)ノ
欢迎访问:天问博客
努力一周,开源一个超好用的接口Mock工具——Msw-Tools的更多相关文章
- 腾讯出品的一个超棒的 Android UI 库
腾讯出品的一个超棒的 Android UI 库 相信做 Android 久了大家都会有种体会,那就是 Android 开发相对于前端开发来说统一的 UI 开源库比较少.造成这种现象的原因一方面是大多数 ...
- 一款开源且超好用的网站克隆机 HTTrack
0x00 前言 我们在学习前端的时候,总是会想着去学习其他人网站是如何制作的,或者我们遇到一些比较有用的知识点的时候,我们可能会选择通过 Ctrl + C / Ctrl + V 去扒下内容,然而我并非 ...
- 搭建一个超好用的 cmdb 系统
10 分钟为你搭建一个超好用的 cmdb 系统 CMDB 是什么,作为 IT 工程师的你想必已经听说过了,或者已经烂熟了,容我再介绍一下,以防有读者还不知道.CMDB 的全称是 Configurati ...
- Linux内核设计第三周——构造一个简单的Linux系统
Linux内核设计第三周 ——构造一个简单的Linux系统 一.知识点总结 计算机三个法宝: 存储程序计算机 函数调用堆栈 中断 操作系统两把宝剑: 中断上下文的切换 进程上下文的切换 linux内核 ...
- java获取本月开始时间和结束时间、上个月第一天和最后一天的时间以及当前日期往前推一周、一个月
import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; import java.uti ...
- php 获取最近一周,一个月,一年
<?php date_default_timezone_set('PRC'); /** * 获取最近一周,一个月,一年 * */ function getLatelyTime($type = ' ...
- Pinpoint是一个开源的 APM (Application Performance Management/应用性能管理)工具,用于基于java的大规模分布式系统,基于Google Dapper论文
Pinpoint是一个开源的 APM (Application Performance Management/应用性能管理)工具,用于基于java的大规模分布式系统,基于Google Dapper论文 ...
- 《Linux内核分析》 第三周 构造一个简单的Linux系统MenuOS
Linux内核分析 第三周 构造一个简单的Linux系统MenuOS 张嘉琪 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/ ...
- 20135327郭皓--Linux内核分析第三周 构造一个简单的Linux系统MenuOS
Linux内核分析第三周 构造一个简单的Linux系统MenuOS 前提回顾 1.计算机是如何工作的三个法宝 1.存储程序计算机 2.函数调用堆栈 3.中断 2.操作系统的两把宝剑 中断上下文的切换 ...
随机推荐
- 多人共用一个Linux用户, 实现Bash配置文件独立
本文中提到的 账户, 用户 均表示同一概念. 例如 ssh wbourne@192.168.xxx.101, 账户, 用户 指的均是 wbourne. 背景 在工作中, 我们经常会连接Linux服务器 ...
- Codeforces Round #796 (Div. 2)(A~E题题解)
文章目录 原题链接: A.Cirno's Perfect Bitmasks Classroom 思路 代码 B.Patchouli's Magical Talisman 思路 代码 C.Manipul ...
- 实践GoF的23种设计模式:观察者模式
摘要:当你需要监听某个状态的变更,且在状态变更时通知到监听者,用观察者模式吧. 本文分享自华为云社区<[Go实现]实践GoF的23种设计模式:观察者模式>,作者: 元闰子 . 简介 现在有 ...
- 整数分解和for循环
整数的分解: 一个整数是由多位数字组成的,那么如何能分解出整数的各个位上的数字呢 对一个整数做%10的操作,就可以得到它的个位数 对一个整数做/10的操作,就去掉了他的个位数 然后再对2的结果做%10 ...
- H5移动端实现一键复制或长摁复制
今天接到了一个新的需求,要求我们对表单中的某一个字段进行复制,这个表单是不可选的,拿到需求的时候有点懵,不清楚下手点在哪,后来网上找了找,终于有了点眉目,感觉网上有些是实现不了的,特地在这里记录下进行 ...
- Jmix- 业务系统高效开发的新方式
企业在数字化转型的过程中,都面临将现有的业务流程进行"软件化"的过程.然而,在我们的印象中,通常会觉得针对业务系统的软件开发不是特别高效.这背后有很多原因,从开发角度看,有一个主要 ...
- mybatis 04: mybatis对象分析 + 测试代码简化 + 配置优化
MyBatis对象分析 测试代码示例 package com.example.test; import com.example.pojo.Student; import org.apache.ibat ...
- python包合集-cffi
一.cffi cffi是连接Python与c的桥梁,可实现在Python中调用c文件.cffi为c语言的外部接口,在Python中使用该接口可以实现在Python中使用外部c文件的数据结构及函数. 二 ...
- 字符编码和python中的文件处理
字符编码与python文件处理 ---------------- 字符编码 1.常见的编码 ASCII: 美国人发明的,只编码英文字母和符号,1个字节. GB2312: 中国人发明的,增加了中文汉字和 ...
- 一个非常简单用.NET操作RabbitMQ的方法
RabbitMQ作为一款主流的消息队列工具早已广受欢迎.相比于其它的MQ工具,RabbitMQ支持的语言更多.功能更完善. 本文提供一种市面上最/极简单的使用RabbitMQ的方式(支持.NET/.N ...