开源一个超好用的接口Mock工具——Msw-Tools

这篇具有很好参考价值的文章主要介绍了开源一个超好用的接口Mock工具——Msw-Tools。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

作为一名前端开发,是不是总有这样的体验:基础功能逻辑和页面UI开发很快速,本来可以提前完成,但是接口数据联调很费劲,耗时又耗力,有时为了保证进度还不得不加加班。
为了摆脱这种痛苦,经过一周的努力,从零开发了一个灵活无依赖,且集成简单的数据接口 Mock 工具——Msw-Tools,已开源到 NPM,希望对前端小伙伴有所帮助。

开源一个超好用的接口Mock工具——Msw-Tools,工具,开源,Mock,postman

一、前言

Msw-Tools(Mock Service Worker Tools)是一个基于 Msw.jsSvelte 构建的数据 Mock 工具,用于前后端接口数据联调,方便开发者在不同数据、不同场景下进行功能测试。

  • Msw-Tools 能做什么?
  • Msw-Tools 能做什么?
  • Msw-Tools 能做什么?

Msw-Tools 以浏览器 localStorage数据库,能让开发者分布式的在浏览器上建立一套独立的接口服务,前端人员在不依赖后端接口完成的情况下走正常的开发调试流程,开发者可以很精确自由的控制哪些接口使用 Msw-Tools 提供的本地 Mock 数据服务,哪些接口使用后端提供的接口数据服务。 再也不用担心加班熬夜调接口了,摸鱼什么的统统到碗里来 ^_^

痛点引导需求,需求决定产品。

开发 Msw-Tools 最初为了解决我日常开发中遇到的痛点,也就是前边说的,前后端接口数据联调比较耗时,很容易影响开发进度。
早在以前也使用过很多相应的 Mock 方案,但是总感觉不够灵活,而大部分都需要在项目中写 Mock 数据的逻辑代码,这一点是我比较抵制的。因为这样做很容易造成代码耦合,甚至一不小心就会把Mock代码打包到生产环境。

二、前端常用的MOCK方案

前端常用的常用的MOCK方案有以下几类:

  1. 代码侵入: 直接在代码中写死 Mock 数据,或者请求本地的 JSON 文件,总之,一切需要侵入代码切换环境的行为都是不好的,实际开发中最常用,但不推荐。
  2. 接口管理工具: 代表为 Apifix、Swagger、Yapi、Moco、Rap等,配置功能强大,有统一的接口管理后台,查找使用方便。但是重度依赖后端,前端发挥空间小,一般会作为大团队的基础建设而存在,维护成本比较高。
  3. 本地 node 服务器: 代表为 Json-server,基于本地 json 文件的增删改查,配置简单,自定义程度高。但是无法随着后端 API 的修改而自动修改。
  4. 请求拦截: 代表为 Mockjs,通过拦截特定的AJAX请求,并生成给定的数据类型的随机数,但是需要在业务代码中调用,有入侵性。
  5. 抓包工具: 代表为 Charles 、Fiddler 等软件工具,便于混合开发的问题排查、线上问题排查,但是使用和调试相对繁琐。
  6. 组合模式: 代表为 Easy-mock,提供在线服务和接口代理,官网建设中。
  7. 其他方案: 代表为 Jsonplaceholder,直接 fetch 远程的数据,文档简单。

三、Msw-Tools 灵感火花

很早以前用过 mockjs 来拦截数据,于是就很好奇,网络请求是怎么拦截的?恰好最近在 npm 上看到一个很不错的开源库 msw,原来这个也是做 Mock 数据的。于是就大概看了一下 mswjs官网介绍,其中提供了很灵活的API,让我们以 Express 路由的形式去配置 Mock 接口,但是所有的 mock 数据都是提前在代码中集成的。然后,我就在想能不能由 Mock 调试者或使用者自由的去配置接口 Url 和 Mock 数据,如果能实现,不仅开发者能灵活的配置想要的接口数据,而且测试人员也能很方便的来修改接口数据,以达到测试不同数据、不同场景的情况,并且还能避免修改数据库。

四、Msw-Tools 功能特点

  • 无框架限制: 使用 Svelte 独立封装的 Custom Web Components,像使用 div、span 等原生标签一样无感使用,不管是 Vue2/Vue3、React、Angular、Svelte、SolidJs 等流行框架,还是传统的多页面 HTML、JQuery、JSP、PHP 都可以轻松集成。
  • 无侵入性: 根据开发环境动态加载,与业务功能代码无依赖、无耦合、无关联。
  • 配置范围广: 个性化配置 Mock 接口,Response Data、Status Code、Request Pending Time。
  • 控制粒度细: 可以精确控制到每一个数据接口是否使用 Mock。
  • 操作友好性: 一键编辑,数据格式化,一键配置,即刻生效。
  • 数据便捷性: Mock 数据支持以 JSON 文件的形式一键导入,一键导出。

五、接入使用

Method 1: Using npm:(Recommended)

  • install msw-toolsmsw
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 项目为例:

  1. 在入口文件 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'

// 只在开发环境使用
if (import.meta.env.MODE === 'development') {
  const MswTools = require('msw-tools')
  new MswTools()
}

const app = createApp(App)

app.use(router).use(store)
app.mount('#app')

  1. 在根组件 App.vue 中使用 <msw-tools /> 导入
<template>
  <msw-tools :base="env.baseUrl" v-if="env.isDev" />

  <router-view />
</template>

<script setup>
  import { reactive } from 'vue'

  const env = reactive({
    baseUrl: '',
    isDev: true,
  })
  
  const { BASE_URL, MODE } = import.meta.env
  env.baseUrl = BASE_URL
  env.isDev = MODE === 'development'
</script>

七、参数配置

base:开发或生产环境服务的公共基础路径。

  • 类型: string
  • 默认: /

使用参照:

  1. 访问 URL:https://tiven.cn, 对应的 Base:/, 使用 <msw-tools base="/" />
  2. 访问 URL:https://tiven.cn/service/ ,对应的 Base:/service/,使用 <msw-tools base="/service/" />

需要与打包工具和 Router 路由的 base 保持一致。请参考:

  • Vitebase 配置:Vite Base
  • Vue3Router/base 路由配置:Vue3 Base

八、注意事项

  1. mockServiceWorker.js 文件只能放在静态文件目录中(/public),作为 Service Worker 服务的注册文件,不参与打包编译,只能以 相对路径 的形式引用,不然 Service Worker 服务无法注册,会导致请求拦截不生效。
  2. 由于浏览器 service Worker API 使用限制:只能在 https(已安装证书)、localhost、127.0.0.1 等服务下使用,否则控制台会出现 [MSW] Mocking enabled (fallback mode) 日志,也就是说 http 域名服务,包括本地 IP 服务,例如:http://10.168.44.123:3000/ 等服务下不可用。

九、演示体验

Msw-Tools 在线体验:msw-tools
Msw-Tools 在线体验:msw-tools
Msw-Tools 在线体验:msw-tools

开源一个超好用的接口Mock工具——Msw-Tools,工具,开源,Mock,postman

十、TODO

  • 开启控制台的按钮可拖拽移动
  • Msw-Tools 功能持续优化 doing
  • 封装 mswjs 相关API,减小打包体积
  • 规划中…

十一、使用反馈

  • Email: tw.email@qq.com
  • Issues: msw-tools

欢迎广大 Front-enderTester 体验使用,如有疑问或需求建议请到 Github Issues 提出。

闭门造车造轮子,过程很艰难,坚持才有收获。

Thank you ♪(・ω・)ノ


欢迎访问:天问博客文章来源地址https://www.toymoban.com/news/detail-781918.html

到了这里,关于开源一个超好用的接口Mock工具——Msw-Tools的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 如何使用postman10 mock一个接口并设置返回参数为json

    本来今天高高兴兴,换了新电脑、下载了现在最新的postman版本(v10.0.7)。没想到几年的时间,mock操作已经改得不会用了。 落泪踩坑并记录下走默认mock配置,导致http接口接收不到返回值的问题 看见这个界面就是简单的配置完成啦~ 在这里可以调用我们之前配置的mock服务,点

    2024年02月01日
    浏览(60)
  • 推荐一个好用的电商开源项目yudao源码

    1、项目下载cloneruoyi-vue-pro: 🔥 官方推荐 🔥 RuoYi-Vue 全新 Pro 版本,优化重构所有功能。基于 Spring Boot + MyBatis Plus + Vue Element 实现的后台管理系统 + 微信小程序,支持 RBAC 动态权限、数据权限、SaaS 多租户、Flowable 工作流、三方登录、支付、短信、商城等功能。你的 ⭐️ Sta

    2024年02月07日
    浏览(63)
  • 软件接口测试有什么作用?接口测试有哪些好用工具?

    一、软件接口测试有什么作用? 在软件开发过程中,接口是不可避免的一部分。接口测试是为了检查软件系统中不同模块之间的接口能否正常工作,以及模块之间的数据是否能够互相传输而进行的测试。接口测试的主要作用包括保证系统区域间的互通性、降低软件的故障率、

    2024年02月06日
    浏览(73)
  • 软件接口测试是什么?有哪些好用的接口测试工具?

    在软件开发中,接口是不可避免的。软件接口测试是一种验证应用程序接口是否按照设计规范进行交互和协作的测试方法。接口测试是将模块之间的接口连接在一起以进行完整系统测试的关键部分。 当软件开发过程中不同模块之间需要数据交互,采用接口协议来实现模块之间

    2024年02月11日
    浏览(52)
  • 一个很好用且开源的java验证码框架kaptcha

             kaptcha是一个优秀的验证码框架 ,在不多的项目中使用了很多年很稳定,功能强大配置项很丰富,可以根据不同的需求配置不同的效果。  以下最常用的配置  字母+数字 验证码实现的效果图:    如果不是springboot项目,xml配置项:

    2024年04月12日
    浏览(43)
  • test mock-03-wiremock 模拟 HTTP 服务的开源工具 flexible and open source API mocking

    test 之 jmockit-01-overview jmockit-01-test 之 jmockit 入门使用案例 mockito-01-overview mockito 简介及入门使用 PowerMock Mock Server ChaosBlade-01-测试混沌工程平台整体介绍 jvm-sandbox 入门简介 WireMock是一个流行的开源工具,用于API模拟测试,每月下载量超过500万次。它可以帮助您创建稳定的测试和

    2024年01月21日
    浏览(36)
  • 【IPAM】Netbox —— 一个公认好用的开源网络资源管理系统

    NetBox 是一个 IP 地址管理(IP address management,IPAM)和数据中心基础设施管理(data center infrastructure management,DCIM)工具。最初起源于 DigitalOcean 的网络工程团队,专门用于满足网络和基础设施工程师的需求。它是一个基础设施资源建模 (IRM) 应用程序,旨在支持网络自动化。N

    2024年02月08日
    浏览(45)
  • 好用到爆!10个你可能不知道的VSCode开源工具神器

    作为一款广受欢迎的开源IDE,VSCode凭借其轻量级和高度可扩展的特性,成为了越来越多开发者的首选工具。但是,VSCode的强大功能并不仅限于其本身,是可以通过插件、主题和其他扩展来进一步扩展其功能。在本篇文章中,我将介绍10个原先你可能根本不知道的开源工具,这

    2024年02月11日
    浏览(41)
  • 工作记录----CountDownLatch(特别好用的一个工具类)

    CountDownLatch 是 Java 并发包中的一个同步工具类,它可以让一个或多个线程等待其他线程完成操作。它的核心思想是,一个线程(或多个线程)在执行某个任务时,可以通过它等待其他线程的信号,直到其他线程的任务完成才继续执行。用于实现线程间的等待和通知机制。 主要

    2024年02月03日
    浏览(38)
  • 我用 Laf 开发了一个非常好用的密码管理工具

    【KeePass 密码管理】是一款简单、安全简洁的账号密码管理工具,服务端使用 Laf 云开发,支持指纹验证、FaceID,N 重安全保障,可以随时随地记录我的账号和密码。 写这个小程序之前,在国内市场找了很多密码存储类的 App 体验不是太好用。之前还遇到数据全部丢失的 App..

    2024年02月02日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包