推荐六款实用 Mock 神器

工具好不好用，关键在于用。肯定有很多前端程序猿联调前很悠闲😌，但联调阶段持续加班，直到提测、上线。这其中缘由不外乎需求不明确等原因，但如果我们能在联调前完成大部分工作，相…

前言

    工具好不好用，关键在于用。肯定有很多前端程序猿联调前很悠闲😌，但联调阶段持续加班，直到提测、上线。 
    这其中缘由不外乎需求不明确等原因，但如果我们能在联调前完成大部分工作，相信就能准点下班啦🚗。如果你也有类似的现象，希望能看完此篇，或许能让你在不协调的工作中解放出来。 
     
    ##### 背景 
    在开发环境中，由于后端与前端并行开发、或者前端需要等待后台接口开发。接口直接严重依赖，生成数据的业务逻辑复杂等，严重影响了开发效率。 
    因此学会使用最适合自己的 Mock 数据的方法就非常重要。 
    下面介绍了几种常用的mock方案，通过了解自动化mock的方式，减少重复工作，减少真实联调问题，我们可以根据开发场景，选择并配置最合适自己的方案。 
     
    ##### 六类常用的 MOCK 方案说明 
     
    ###### 方案1：代码侵入（实际开发中最常用，但不推荐） 
     
     
    ###### 方案2：接口管理工具 
    代表： 
    rap（阿里，已停止维护，使用rap2） 
     
    swagger 
     
    moco（和前端处理mock类似，json假数据+服务） 
     
    yapi（去哪儿网开发 yapi 官网） 
     
     
    优缺点（接口管理工具） 
    优点： 
     
      配置功能强大，接口管理与 Mock 一体，后端修改接口 Mock 也跟着更改，可靠  
      有统一的接口管理后台，查找使用方便。  
     
    缺点： 
     
      配置复杂，依赖后端，可能会出现后端不愿意出手，或者等配置完了，接口也开发出来了的情况。mock数据都由后台控制，有什么异常情况 前端同学基本上使不上力。有背前后台分离的原则。  
      一般会作为大团队的基础建设而存在， 没有这个条件的话需慎重考虑  
      增加后台负担，与其让后台处理mock数据相关问题，倒不如加快提供真实接口数据。  
     
     
    ###### 方案3：本地 node 服务器 
    代表：json-server[5]原理：使用lowdb，操作本地小型的数据库（遵循 REST API）。特点： 
     
      可以独立使用，也可以作为node服务的中间件 server.use(db)  
      db可以是json文件(更直观)，也可以使js文件(灵活性更高)  
      可以设置跨域、开启gzip、设置延时、日志、指定路由等。json-server [options]  
      可命令行启动或

1	json-server.json

配置后直接启动可以自定义路由映射（key为真实路由、value为mock路由）

    轻而易举的实现后台功能 
     
    服务管理 
    增删改查参考 postman 示例。（注意body-raw要选择json模式） 
    优点： 
     
      配置简单，json-server 甚至可以 0 代码 30 秒启动一个 REST API Server  
      自定义程度高，一切尽在掌控中  
      增删改查真实模拟  
     
    缺点： 
     
      与接口管理工具相比，无法随着后端 API 的修改而自动修改  
     
     
     
    ###### 方案4：请求拦截[MOCKJS] 
    代表：Mock.js[6] 
    特点： 
     
      通过拦截特定的AJAX请求，并生成给定的数据类型的随机数，以此来模拟后端同学提供的接口。  
      使用数据模板定义，随机生成定义数据的自由度大。使用MockJS的Random工具类的方法定义，这种方式自由度小，只能随机出MockJS提供的数据类型。  
      一般配合其它库使用或单独在项目中使用或者通过反向代理来实现。  
     
     
    使用格式说明： 
     
    简单示例展示： 
    随机生成颜色 
     
    随机生成邮箱 
     
    随机生成ip 
     
    随机生成区域地址 
     
    还能随机生成图片（并可传参配置图片大小、颜色等） 
     
      
        
     
    随机生成日期时间 
     
    按规则生成字符串 
     
    生成指定范围内的数字 
     
    生成随机的对象数量 
     
    生成指定数量的数组 
     
    生成对象数组 
     
    更多示例可查看官方链接: http://mockjs.com/examples.html 
    优缺点（MOCKJS） 
    优点： 
     
      与前端代码分离  
      可生成随机数据  
     
    缺点： 
     
      数据都是动态生成的假数据，无法真实模拟增删改查的情况  
      只支持 ajax，不支持 fetch  
     
     
    ###### 方案5：抓包工具 
    利用 Charles 、Fiddler等代理工具， 
    常见的处理方式有 
     
      将 URL 映射到本地文件；(调试APP混合开发等)  
      debugger某个url，修改响应数据。  
      拦截后返回本地的数据，如Charles，直接采用Map locale 或者 Map Remote的方式。  
      右击url, copy response  
      在本地新建mock json数据，然后将response粘贴修改  
      再次访问url，观察api的变化。  
     
    优缺点： 
    优点：mock便于混合开发的问题排查、线上问题排查等。缺点：调试相对繁琐。 
     
    ###### 方案6：组合模式 
     
    REST API 
    URI 代表 资源/对象，METHOD 代表行为 www.ruanyifeng.com/blog/2014/0…[15] 
     
     
    ##### 其它方案参考

apifox

    API 文档、调试、Mock、自动化测试一体化协助平台[17] 看评论推荐的人还真不少😆，感兴趣的小伙伴可以尝试一下。支持 HTTP、TCP、RPC,(2020-12-28首版发布) 
    常用解决方案： 
     
      使用 Swagger 管理 API 文档  
      使用 Postman 调试 API  
      使用 RAP 等工具 Mock API 数据  
      使用 JMeter 做 API 自动化测试

1	jsonplaceholder

    很方便，直接fetch远程的数据即可，高效易用jsonplaceholder官方文档 
     
      
        
     
     
    ##### 最后 
    Mock不只是mock数据，还可以mock功能的。我们通过使用Mock尽可能的完善功能，才能在联调时事半功倍。 
    如果觉得有帮助，不妨点赞、关注支持一下。如文章有不足之处、疑问或建议，希望能在下方👇🏻 留言，非常感谢。

本文标题：推荐六款实用 Mock 神器

本文作者： OSChina

发布时间： 2022年02月19日 11:55

最后更新： 2025年04月03日 11:07

原始链接： https://haoxiang.eu.org/8b616959/

赏