Skip to content

This is anFrontend development service middleware that can be used with webpack and vite. Its main function is to visualize the configuration, manage http(s)-proxy, and mock data.

License

Notifications You must be signed in to change notification settings

shunseven/mocxykit

Repository files navigation

mocxykit (旧名为 express-proxy-mock)

描述

前端开发服务的中间件,主要用于代理请求和 MOCK 数据,可用于所有 webpack,vite和其它所有前端开发服务启动服务的开发项目, 此中间件应仅用于开发

使用此中间件的一些好处包括:

  • 代理请求和 MOCK数据
  • 可视化的管理 MOCK 数据及代理功能
  • 代理支持全局代理和某一个 URL 的自定义代理
  • 可随时切换某一个URL进行代理转发或 MOCK 数据
  • 可通过不同的入参,返回不同的MOCK 数据
  • 可以快速把最近的请求返回的数据,存为 MOCK 数据
  • 支持 faker 随机MOCK数据生成
  • 支持多环境变量管理,随时切换环境变量
  • 支持 Ngrok 公网访问
  • 支持 MCP 协议,让 AI 编程时,自动获取 MOCK 数据或最近浏览器请求的数据

入门

首先,安装模块:

npm install mocxykit --save-dev

示例

用法

Webpack >= 5.0

修改 webpack.config.js

module.exports = {
  //...
  devServer: {
    ...
  },
  plugins: [
      // 在 wepback 中会在插件里获取 devServer 并注入代理,devServer 不需要再配制
      new WebpackProxyMockPlugin({
        apiRule: '/api/*',
        lang: 'zh'
      })
  ]
};

Webpack <= 4+

// vue.config.js 或者其它 webpack config 文件 
const { proxyMockMiddleware } = require('mocxykit')

module.exports = {
  //...
   devServer: {
     before(app) {
      app.use(proxyMockMiddleware({
        apiRule: '/api/*',
        lang: 'en'
      }))
    }
   }
};

vite

// vite.config.js
import { defineConfig } from 'vite'
import { viteProxyMockPlugin } from 'mocxykit'

export default defineConfig({
  plugins: [
    viteProxyMockPlugin({
      apiRule: '/api/*',
      lang: 'zh',
      buttonPosition: 'bottom', // 可选:'top'(顶部)、'middle'(中间)、'bottom'(底部) 或坐标格式如 '100,100'
    })
  ]
})

vue.config.js

const proxyMockPlugin = new WebpackProxyMockPlugin({
        apiRule: '/api/*',
        lang: 'zh'
      })
module.exports = {
  //...
  devServer: {
    setupMiddlewares: (middlewares, devServer) => {
      // 在vue中,因 vue-cli在webpack 编译完成后,才注入 devServer,插件中获取不到 devServer配制,需要手动注入代理中间件
      proxyMockPlugin.setupDevServer(devServer.app);
      return middlewares;
    }
  },
  plugins: [
      proxyMockPlugin
  ]
};

express

const { proxyMockMiddleware } = require("mocxykit");
const express = require("express");
const app = express();

app.use(
  proxyMockMiddleware({
    // express-proxy-mock options
  }),
);

app.listen(3000, () => console.log("Example app listening on port 3000!"));

浏览器打开 http://localhost:3000/config 就可以看到代理与 MOCK 数据的配制界面 vite 项目会在页面右下角显示一个按钮,点击按钮即可打开配置页面

请参阅下文以获取 vite, 与 webpack, 及 vueConfig 使用示例。

选项

名称 类型 默认值 描述
apiRule string /api/* 全局代理的匹配规则,默认为所有 api 开头的请求, 有多个规则用','隔开如'api/,/test/'
https boolean true 是否代理 https 请求
configPath string /config 打开配制页面的地址,默认为http://localhost:3000/config
cacheRequestHistoryMaxLen number 30 缓存请求数据的最大条数
lang string zh 语言
buttonPosition 'top' | 'middle' | 'bottom' | string bottom 配置按钮位置(仅在Vite中生效)。可选值:'top'(顶部)、'middle'(中间)、'bottom'(底部)或坐标格式如'100,100'

代理与MOCK 数据

代理请求和 MOCK 数据

  • 支持配置多个代理服务器,可同时处理多个后端服务
  • 支持 HTTP 和 HTTPS 协议的代理转发
  • 提供简单的界面进行代理配置和管理

可视化管理界面

  • 直观的 Web 界面,轻松管理所有代理和 MOCK 配置
  • 实时预览和编辑 MOCK 数据
  • 支持 JSON 格式的数据编辑和校验
  • 提供请求历史记录查看功能

灵活的代理配置

  • 支持全局代理:统一配置所有 API 请求的转发规则
  • 支持单个 URL 的自定义代理:针对特定接口配置不同的代理规则
  • 可以随时在全局代理和自定义代理间切换
  • 支持正则表达式匹配 URL 路径

动态切换代理和 MOCK

  • 每个 API 接口都可以独立控制使用代理或 MOCK 数据
  • 实时切换无需重启服务
  • 切换时自动保存当前配置 mock_proxy

同步ApiFox数据

mocxykit 支持与 ApiFox 平台集成,让您可以轻松同步 ApiFox 中的 API 数据到本地开发环境,包括MOCK数据及文档。

功能特点

  • 一键同步:一键将 ApiFox 中的 API 数据同步到本地开发环境
  • 选择性同步:可以选择特定的 API 分组进行同步
  • 自动补全 URL:可以自动为 API 路径添加前缀
  • 自动同步:支持每次打开页面时自动同步 ApiFox 数据

使用方法

  1. 在配置界面中点击"同步 ApiFox 数据"按钮
  2. 输入 ApiFox Access Token
  3. 选择要同步的项目
  4. 选择要同步的 API 分组
  5. 配置同步选项:
    • 自动补全 URL:开启后,将在同步数据时自动为 API 路径添加前缀
    • 自动同步:开启后,将在每次打开页面时自动同步 ApiFox 数据
    • API 规则:选择适用的 API 规则(如果配置了多个规则)

自动同步功能

启用自动同步功能后,mocxykit 将在每次页面加载时自动从 ApiFox 获取最新的 API 数据,确保您的本地开发环境始终使用最新的 API 定义。

API 文档查看

同步 ApiFox 数据后,您可以在 mocxykit 界面中查看详细的 API 文档,包括:

  • 请求参数文档
  • 响应参数文档
  • 参数类型和描述
  • 必填字段标识
  • 数组和对象结构展示

文档

MCP (Model Context Protocol)

功能介绍

MCP是一个基于SSE(Server-Sent Events)的实时数据通信协议实现,它提供了以下功能:

在 cursor 等,支持 MCP 的 AI 编辑器,通过MCP协议,实现了在 AI 编程的时候,只要告诉 AI 对应的接口路径,AI就可以自动获取到对应的 MOCK 数据或浏览最近请求过的数据,无需人工干预。具体是MOCK 数据或浏览最近请求过的数据,根据你的数据目标设定,如果设定 mock 就会从MOCK 数据中获取,如果是代理就会比浏览器最近请求的数据中获取。如果是没有配制的URL,但符合全局代理也会从浏览器最近请求的数据中获取。

配制方法

点击 mocxykit 配制界面的右上角的设置ICON,切换到 MCP设置,启用 MCP 服务勾选对于的编辑器就可以了,最后还需要在cursor的设置中,在 MCP的设置项中的右边是否显示 disabled(默认是不开启),如果是,则点一下开启这个服务。

使用方法

在AI 编程中要让 AI 主动请求数据,需要写关键词 mcpData

  1. 比如我想写一个 todoList:

在@todoList.tsx一个文件中实现一个 todoList 的功能,有展示列表及增加列表的功能,请求 mcpData api/todo-list获取列表数据结构,请求 mcpData api/todo-list/add 增加列表数据。

这样 AI 就会主动请求数据,然后根据数据结构生成代码。

  1. 比如我在浏览上测试的时候,发现某一个接口的业务逻辑返回的数据没有覆盖到,我可以在 AI 编程中写:

在 @todoList.tsx 文件中,请求 mcpData api/todo-list 获取数据,根据返回的错误数据,弹层显示错误信息。

这样 AI 就会主动获取到错误数据,分析结构然后弹层显示错误信息。

mcp mcp2

faker MOCK 数据

  • 支持静态 MOCK 数据和动态 MOCK 数据
  • 根据请求参数返回不同的 MOCK 数据
  • 支持faker随机数据生成
    • 自动识别数据类型(如邮箱、手机号、URL等)并生成对应格式的随机数据
    • 支持中英文混合数据的智能生成
    • 通过特殊语法控制数组长度:data.list<100> 生成100条随机数据
    • 支持多字段随机化:data.list,page.total
    • 自动保持字符串格式:数字字符串保持位数,字母数字混合保持格式
  • 配置方式:
    1. 在MOCK数据编辑页面勾选"返回随机数据"
    2. 在输入框中填写需要随机化的字段路径
    3. 支持的语法格式:
      • data - 随机化整个data对象
      • data.list - 只随机化list字段
      • data.list<100> - 生成100条随机数据
      • data,page.total - 多个字段随机化

环境变量

代理支持环境变量管理功能,您可以:

  • 创建多个环境配置
  • 将环境变量绑定到特定代理
  • 快速切换不同环境
  • 切换环境时自动清理浏览器缓存

开启环境变量功能

要启用环境变量功能,您需要:

  1. 使用带有 DefinePlugin 的 webpack
  2. 在 webpack 配置中添加 WebpackProxyMockPlugin
  3. 或者用的是 vite 插件,直接在 vite.config.js 中添加 viteProxyMockPlugin

如何使用环境变量

  1. 点击环境选择器旁边的"+"按钮创建新环境
  2. 在环境配制中添加键值对
  3. 可以在代理设置中将环境绑定到代理
  4. 切换环境时,系统会提示是否清理浏览器缓存

功能特点

  • 绑定功能:代理可以绑定到特定环境
  • 快速切换:轻松切换不同环境
  • 缓存管理:切换环境时可选择清理浏览器缓存
  • 可视化管理:环境变量的可视化管理界面

Ngrok 公网访问

本中间件支持使用 Ngrok 进行公网访问,让您的本地开发环境可以:

  • 与外部用户共享本地开发环境
  • 在不同设备上测试应用
  • 向客户演示开发进度

设置外网访问

  1. 打开配置页面 http://localhost:3000/config
  2. 点击右上角的设置图标
  3. https://dashboard.ngrok.com/signup 注册免费的 Ngrok 账号
  4. 从 Ngrok 控制台复制您的 authtoken
  5. 将 authtoken 粘贴到设置弹窗中
  6. 点击"开启外网访问"

功能特点

  • 自动创建隧道连接
  • 安全的 HTTPS 端点
  • 持久化存储 authtoken
  • 便捷的 URL 复制功能
  • 一键重置隧道连接

注意事项

  • Ngrok 免费版有一些使用限制
  • 每次创建新隧道时,公网 URL 会改变

public_net

联系我

QQ群:930832439

License

MIT