@ztjy/http-mock-middleware

webpack-plugin生成mock数据

期望功能

1：支持多项目✔

2：多前缀配置✔（支持独立api、独立文件夹配置）

3：api做兜底✔

4：切换不同场景数据✔

5：支持本地合并生成的mock数据✔

设计原则

数据形式	说明	优先级	禁用方式
local	本地mock文件	1	{disableMock: true}
yapi	yapi生成的mock数据	2	{disableMock: true}
server	api的兜底	3	不传 proxy

考虑

1.mock数据生成方式

本地文件方式: {
  优点: 方便基于生成的mock修改
  缺点：1：本地文件需要维护
       2：第二次生成时会被覆盖
       3：本地合并生成的mock数据时还是需要生成一份express数据
}

express方式：{
  优点：不生成本地文件,
  缺点：不方便基于生成的mock修改(功能.5可优化)
}

综上所述：使用express方式

2.使用

module.exports = {
  devServer: {
    ...
   before(app){
      const httpMockMiddleware = require('@ztjy/http-mock-middleware');
      httpMockMiddleware(app, {
        local: path.resolve(__dirname, './mocker'), // 本地路径的mock文件目录
        yapi: {
          origin: 'http://api.ztjy.cn:5000/', // yapi对应的源地址
          response: {
            returncode: 10000,
            message: '请求成功',
          },
          projects: [
            {
              id: '633', // yapi的项目id
              token: '1f41d9e0f188ec7aaae786cd4663766f4d11fc8a65fbedf08af234234b3dbe90', // yapi的项目token
              prefix: '/dsp', // 请求前缀
            },
          ],
        },
      });
   }
  },
};

3.数据格式

参数	说明	类型	默认	必传
yapi	yapi配置	yapiType		否
local	本地已有mock文件入口	string		否
proxy	代理转发	{[key: string]: string}		否
delay	请求返回时长	number	100	否

yapiType类型

参数	说明	类型	必传
origin	yapi对应的源地址	string	是
response	用于覆盖所有yapi返回的数据	{[key: string]: any}	否
projects	yapi项目配置	projectsType	是

projectsType类型

参数	说明	类型	必传
origin	yapi对应的源地址	string	可选
id	yapi项目id	number	是
token	yapi项目token	string	是
prefix	api访问前缀	string	是
response	用于覆盖所有yapi返回的数据	{[key: string]: any}	否
proxy	兜底api-没有mock数据走proxy	string	否

4.本地Mock合并

// method   完整路径
  'POST /api/member/proxy/auth/registerr': {
    delay: 1200,
    disabled: true, // 是否禁用mock
    mergeable: true, // 是否合并yapi生成的mock数据
    response: { // 用于合并覆盖当前接口返回的数据
      message: '请求成功',
    },
    tesing: 'a', // 手动mock数据  使用scenes ‘a’里的数据
    tesing: 'res1',
    testcase: {
      res1: {
        body: {
          string: '多场景数据1',
          number: '多场景数据1',
        },
      },
      res2: {
        body: {
          string: '多场景数据2',
          number: '多场景数据2',
        },
      },
      res3: {
        body: {
          string: '多场景数据3',
          number: '多场景数据3',
        },
      },
    }
  }