MockM - 前后端并行开发神器 🚀

<p align="center"> <strong>一站式 API 模拟与调试平台，让前后端开发零障碍并行</strong> </p> <p align="center"> <a href="https://github.com/wll8/mockm/blob/dev/README.md">中文</a> | <a href="https://github.com/wll8/mockm/blob/dev/README.en.md">English</a> | <a href="https://wll8.github.io/mockm/">📚 文档</a> </p> <p align="center"> <a href="https://www.npmjs.com/package/mockm"><img src="https://img.shields.io/npm/dt/mockm?style=flat-square&color=blue" alt="Downloads"></a> <a href="https://www.npmjs.com/package/mockm"><img src="https://img.shields.io/npm/v/mockm?style=flat-square&color=green" alt="Version"></a> <a href="https://www.npmjs.com/package/mockm"><img src="https://img.shields.io/npm/l/mockm?style=flat-square&color=orange" alt="License"></a> <a href="https://github.com/wll8/mockm/stargazers"><img src="https://img.shields.io/github/stars/wll8/mockm?style=flat-square&color=yellow" alt="Stars"></a> </p> <p align="center"> <img src="./doc/image/mockm_api_list_2020-09-21_100140.png" alt="MockM 界面预览" width="800"> </p>

✨ 核心特性

🎯 零配置启动 - 2 行命令搞定一切，秒变 API 服务器
🔄 智能代理 - 无侵入式跨域解决方案，告别 CORS 烦恼
📊 数据生成 - 内置 MockJS，逼真数据一键生成
🎭 Restful API - 自动生成增删改查接口，开发效率翻倍
🕸️ WebSocket 支持 - 完整的实时通信解决方案
📱 可视化管理 - 直观的 Web UI，拖拽式 API 管理
🔄 请求重放 - 历史请求一键重现，调试无忧
🌐 远程调试 - 内置内网穿透，随时随地协作
⚡ 热更新 - 配置修改实时生效，开发体验丝滑

</p>

🚀 快速开始

一分钟上手

# 全局安装
npm i -g mockm

# 启动示例项目
mm --config

🎉 就这么简单！ 你已经拥有了：

• ✅ 跨域代理服务器 (http://127.0.0.1:9000)
• ✅ 可视化管理界面 (http://127.0.0.1:9005)
• ✅ 完整的 API 生态系统
• ✅ 请求记录与重放功能

立即体验

• 🌐 访问 http://127.0.0.1:9000/api/1 查看 API 效果
• 📊 访问 http://127.0.0.1:9005/#/get/api/1 查看请求详情
• 🔧 查看生成的配置文件了解更多功能

💡 提示: --config 参数会创建一个示例配置，包含常用功能演示

💡 核心功能展示

🌍 跨域代理 - 一行代码解决所有跨域问题

问题：前端开发时总是被 CORS 错误困扰？
解决：MockM 让你彻底告别跨域烦恼！

# 最简单的跨域代理
mm proxy=http://your-backend:8080

或者使用配置文件：

module.exports = {
  proxy: 'http://your-backend:8080'
}

效果：原本的 http://your-backend:8080/api/users 现在通过 http://127.0.0.1:9000/api/users 访问，自动处理跨域！

🎭 秒建 API - 3 行代码创建完整接口

module.exports = {
  api: {
    '/my/awesome/api': {
      message: '我的第一个 API',
      data: { success: true }
    }
  }
}

立即可用：http://127.0.0.1:9000/my/awesome/api

🔄 Restful API 生成器 - 一个配置搞定 CRUD

想要一个完整的博客系统？只需要：

module.exports = {
  db: {
    posts: [
      { id: 1, title: '我的第一篇博客', content: '使用 MockM 真的太简单了！' }
    ]
  }
}

瞬间获得：

• GET /posts - 获取所有文章
• GET /posts/1 - 获取指定文章
• POST /posts - 创建新文章
• PUT /posts/1 - 更新文章
• DELETE /posts/1 - 删除文章
• GET /posts?q=关键词 - 搜索文章

📊 智能数据生成 - MockJS 深度集成

module.exports = util => ({
  db: {
    users: util.libObj.mockjs.mock({
      'data|20-50': [{
        'id|+1': 1,
        name: '@cname',           // 随机中文姓名
        email: '@email',          // 随机邮箱
        avatar: '@image("200x200")', // 随机头像
        'age|18-65': 1,          // 18-65岁随机年龄
        address: '@county(true)'  // 随机地址
      }]
    }).data
  }
})

🛠️ 响应拦截与修改 - 无需后端配合

需要修改后端返回的数据？轻松搞定：

module.exports = {
  proxy: {
    '/': 'http://your-backend:8080',
    '/api/user': ['data.name', '张三'], // 将用户名改为张三
    '/api/status': ['success'] // 直接返回 "success"
  }
}

⏱️ 接口延时模拟 - 测试网络慢的情况

module.exports = {
  proxy: {
    '/api/slow': {
      mid(req, res, next) {
        setTimeout(next, 3000) // 延时 3 秒
      }
    }
  }
}

🔌 WebSocket 支持 - 实时通信轻松实现

module.exports = {
  api: {
    'ws /chat'(ws, req) {
      ws.send('欢迎进入聊天室！')
      ws.on('message', msg => {
        ws.send(`回音: ${msg}`)
      })
    }
  }
}

📱 可视化管理 - 拖拽式 API 管理

通过 Web UI 轻松管理 API：

• 📋 查看所有接口列表
• 🔍 搜索和过滤接口
• ✏️ 在线编辑接口逻辑
• 📊 查看请求历史和统计
• 🔄 一键重放历史请求

🌐 远程协作 - 内网穿透一键开启

module.exports = {
  remote: true // 开启远程访问
}

自动生成公网地址，支持：

• 🌍 远程团队协作
• 📱 微信公众号开发
• 🔗 第三方服务对接

🏆 使用场景

👨‍💻 前端开发者

• 快速搭建 Mock 服务，无需等待后端
• 跨域问题 一行代码解决
• 数据驱动 使用真实数据进行开发

👩‍💻 后端开发者

• API 文档 自动生成，前端对接更顺畅
• 请求参数 一键分享，告别截图传参
• 调试工具 完整的请求历史记录

🎯 测试工程师

• 接口测试 内置 Postman 式工具
• 数据模拟 各种边界情况轻松测试
• 性能测试 延时、错误模拟

👥 团队协作

• 远程调试 一键生成公网地址
• 版本管理 配置文件化，Git 友好
• 环境隔离 多环境配置，灵活切换

📸 界面预览

<details> <summary>🖱️ 点击查看更多界面截图</summary>

请求记录详情

API 请求历史

可视化 API 编辑

</details>

🆚 竞品对比

📊 完整功能对比表

| 功能特性 | MockM | MockJS | JSON-Server | YApi/Rap2 | Postman Mock | Wiremock | MSW | Faker.js | Apifox | |---------|-------|--------|-------------|-----------|--------------|----------|-----|----------|--------| | 🚀 零配置启动 | ✅ | ❌ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | | 🌐 跨域处理 | ✅ 自动 | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | ❌ | ❌ | | 📊 数据生成 | ✅ 内置 MockJS | ✅ | ❌ | ✅ | 🔶 基础 | 🔶 基础 | ✅ | ✅ | ✅ | | 🔄 Restful API | ✅ 自动生成 | ❌ | ✅ | ❌ | ❌ | ✅ | ❌ | ❌ | ❌ | | 🕸️ WebSocket | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | | 📱 可视化管理 | ✅ | ❌ | ❌ | ✅ | ✅ | 🔶 第三方 | ❌ | ❌ | ✅ | | 🔄 请求重放 | ✅ | ❌ | ❌ | ❌ | ✅ | ✅ | ❌ | ❌ | ✅ | | 🌍 远程调试 | ✅ 内置穿透 | ❌ | ❌ | ✅ | ✅ 云端 | ❌ | ❌ | ❌ | ✅ 云端 | | ⚡ 热更新 | ✅ | ❌ | ✅ | ❌ | ❌ | ✅ | ✅ | ❌ | ❌ | | 🛠️ 响应拦截 | ✅ | ✅ 仅前端 | ❌ | ❌ | ✅ | ✅ | ✅ | ❌ | ✅ | | 💻 运行环境 | Node.js | Browser | Node.js | Java/Docker | Cloud | Java | Browser/Node | Node.js | Desktop/Cloud | | 💰 费用 | 免费 | 免费 | 免费 | 免费/付费 | 免费/付费 | 免费 | 免费 | 免费 | 免费/付费 |

🎯 工具定位说明

数据生成类工具

• MockJS: 纯前端数据模拟，无法在 Network 中看到真实请求
• Faker.js: 仅数据生成库，需要自行构建服务器
• MockM: 内置 MockJS + 完整服务器，开箱即用

API 服务器类工具

• JSON-Server: 简单 REST API 生成，无数据生成和跨域功能
• WireMock: Java 生态的强大 Mock 服务器，配置复杂
• MockM: Express 生态，配置简单，功能全面

测试工具类

• Postman Mock: 云端 Mock 服务，需要联网，功能相对基础
• MSW: 专注于测试环境的请求拦截，学习成本较高
• MockM: 开发+测试双用途，本地优先，可扩展云端

平台化工具

• YApi/Rap2: 企业级 API 管理平台，安装部署复杂
• Apifox: 商业化一体化 API 工具，功能强大但收费
• MockM: 轻量级本地工具，专注开发效率

💡 选择建议

| 使用场景 | 推荐工具 | 原因 | |---------|---------|------| | 🚀 快速原型开发 | MockM | 零配置，即开即用 | | 🧪 前端单元测试 | MSW + Faker.js | 专业测试工具链 | | 🏢 企业级 API 管理 | YApi + MockM | 文档管理 + 开发调试 | | ☁️ 团队协作开发 | Apifox / MockM远程模式 | 云端协作 | | 🎯 Java 后端测试 | WireMock | Java 生态集成 | | 📊 纯数据生成 | MockJS / Faker.js | 轻量级方案 |

❓ 常见误区澄清

🤔 "MockM 和 MockJS 有什么区别？"

• MockJS: 仅在浏览器中拦截 XHR 请求，无真实网络请求
• MockM: 运行真实服务器，可在 Network 面板看到请求，支持跨域

🤔 "MockM 和 JSON-Server 不是一样的吗？"

• JSON-Server: 只能生成简单的 REST API，无数据生成能力
• MockM: REST API + 数据生成 + 代理 + 可视化管理 + 远程调试

🤔 "为什么不直接用 Postman Mock？"

• Postman Mock: 云端服务，需要网络，功能相对基础，配置复杂
• MockM: 本地优先，功能全面，零配置启动，可选云端模式

🤔 "MSW 看起来也很强大？"

• MSW: 专注测试环境，主要用于单元测试和集成测试
• MockM: 专注开发环境，提供完整的开发服务器解决方案

🤔 "企业已经有 YApi/Apifox 了，还需要 MockM 吗？"

• YApi/Apifox: 重文档管理和团队协作，开发时仍需本地工具
• MockM: 完美补充，专注开发效率，可与文档平台配合使用

🤝 社区与支持

📚 文档与教程

• 📖 完整文档
• 🎯 快速入门
• 💡 最佳实践
• 🔧 配置参考

🌟 友情项目

| 项目 | 简介 | |------|------| | 🎨 Taroify | 移动端组件库 Vant 的 Taro 版本，助力小程序开发 | | 🎯 wot-design-uni | 基于 Vue3+TS 的 uni-app 组件库，70+ 高质量组件 |

如果你有项目需要在此页面上展示，请告诉我。

💬 交流与反馈

• 🐛 Bug 反馈
• 💡 功能建议
• ❓ 使用问题

📄 开源协议

本项目基于 MIT 协议开源

Copyright (c) 2017-present, xw

---

<p align="center"> <strong>⭐ 如果这个项目对你有帮助，请给我们一个 Star！</strong> </p> <p align="center"> <a href="https://github.com/wll8/mockm"> <img src="https://img.shields.io/github/stars/wll8/mockm?style=social" alt="GitHub stars"> </a> </p>