VITE-PLUGIN-FREE-MOCK

快速的 模拟 API 数据

在线示例 | 问题建议

简体中文

⛲ 特性

• 🌴 完全正则化的 URL,借助regexparam轻松定制各类 URL 需求

• 🌱 自定义 URL 前缀/后缀、请求类型、延时模拟、状态码

• 🍊 自定义虚拟数据库,搭载 mockjs 轻松模拟数据库数据

• 🍖 支持 query、params、body、headers 等参数自动解析,自动化响应参数

• 🌊 日志、全局参数、模块参数多级别优先配置

• ✨ 内置 mockjs 全部功能

• 🍜 内置多级别请求/响应拦截器

• 🥤 内置多种不同 content-type 类型 send 方法

• 🌿 完全控制的 req/res 随意组装个性化需求响应

• ♨️ TypeScript 支持~~

🏋️ 安装

pnpm 用户(推荐)

1pnpm i vite-plugin-free-mock -D

yarn 用户

1pnpm add vite-plugin-free-mock -D

💎 插件配置

1# vite.config.js
2import { defineConfig } from 'vite';
3# 导入插件
4import vitePluginApiMock from 'vite-plugin-free-mock';
5# 导入插件配置(根据你的配置)
6import pluginConfig from './mock/createFreeMock'
7export default defineConfig({
8    plugins:[
9        # 配置到插件列表中(顺序无关)
10        vitePluginApiMock(pluginConfig),
11        # ...otherPlugins,
12    ],
13    # ...otherViteConfig
14})

⛷️ 参数定义

• 插件顶层选项---vitePluginFreeMockOptions

1{
2  # 接口模块配置数组
3  apis?: array,
4  # 虚拟数据库生成配置
5  db?: object,
6  # 全局级别默认参数
7  global?: object,
8  # 开发环境是否开启插件功能
9  devMock?: boolean,
10  # 生产环境是否开启插件功能
11  prodMock?: boolean,
12  # 显示请求|响应日志
13  logger?: boolean,
14}

• 接口模块选项---apis/item

1{
2  # 前缀,位于全局前缀后面 -> global.prefix + module.prefix
3  prefix?: string,
4  # 后缀,若存在全局suffix不生效
5  suffix?: string,
6  # 接口类型,若存在全局method不生效
7  method?: get|post|put|patch|delete|options|head|trace,
8  # 延时毫秒,若存在全局timeout不生效
9  timeout?: number,
10  # 状态码,若存在全局statusCode不生效
11  statusCode?: number,
12  # 严格模式,若存在全局strict不生效
13  strict?: boolean,
14  # 自定义参数对象,与全局meta会进行merge
15  meta?: object,
16  # 返回数据格式,若存在全局responseType不生效
17  responseType?: html|text|xml|jpeg|gif|png|formData|xhtml|dataXml|atomXml|json|pdf|word|stream|form,
18  # 模块级别请求拦截,全局请求拦截后触发,api = 当前触发接口
19  handlerRequest?:  (ctx, api, _options) => any,
20  # 模块级别响应拦截,全局响应拦截前触发,api = 当前触发接口
21  handlerResponse?:  (ctx, api, _options) => any,
22  # 模块接口配置
23  apis?:array,
24}
25

• 接口选项---apis/item

1{
2  # 接口URL,使用regexparam解析,自动生成pattern
3  url?: string,
4  # 接口URL正则,显式设置则url无效
5  pattern?: RegExp,
6  # 接口路径参数params的字段名称集,根据url自动生成,设置pattern也可不配置
7  keys?: string[],
8  # 接口类型,优先级最高
9  method?: get|post|put|patch|delete|options|head|trace,
10  # 延时毫秒,优先级最高
11  timeout?: number,
12  # 状态码,优先级最高
13  statusCode?: number,
14  # 严格模式,优先级最高
15  strict?: boolean,
16  # 返回数据格式,优先级最高
17  responseType?: html|text|xml|jpeg|gif|png|formData|xhtml|dataXml|atomXml|json|pdf|word|stream|form,
18  # 接口response返回函数,ctx = 内部方法,包含req,res等,db = 虚拟数据数据,_options = 最终的插件配置
19  render?: (ctx, db, _options) => void,
20}
21

• 虚拟数据库选项---db

1{
2  # 第一种：直接设置值
3  keyName:object|any[],
4  # 第二种：通过函数返回值
5  keyName:({mockjs})=>any[]|object
6  # tips
7  # 返回的数据值都会被mockjs.mock()进行处理一次
8}
9

• 全局默认参数选项--global

1{
2  # 全局前缀,默认''
3  prefix?: string,
4  # 全局后缀,默认'',
5  suffix?: string,
6  # 全局请求类型,默认get
7  method?: get|post|put|patch|delete|options|head|trace,
8  # 全局延时毫秒,默认1024*1
9  timeout?: number,
10  # 全局状态码,默认200
11  statusCode?: number,
12  # 严格模式,默认false
13  strict?: boolean,
14  # 全局自定义参数对象,默认null
15  meta?: object,
16  # 全局返回数据类型,默认json
17  responseType?: html|text|xml|jpeg|gif|png|formData|xhtml|dataXml|atomXml|json|pdf|word|stream|form,
18  # 全局请求拦截,最先触发,api = 当前触发接口
19  handlerRequest?:  (ctx, api, _options) => any,
20  # 全局响应拦截,最后触发触发,api = 当前触发接口
21  handlerResponse?:  (ctx, api, _options) => any,
22}
23

👀 使用

🗜️ 案例

react-demo

📅 计划

• 根据虚拟数据库自动生成规范的 API(可定制规范???)
• 生产环境支持???
• 支持API级别的拦截???
• 补全单测~~~~~