1.1.2 • Published 2 years ago

@andremao/mockjs-config v1.1.2

Weekly downloads
1
License
MIT
Repository
github
Last release
2 years ago

介绍

这是一个支持热加载配置文件结合 webpack devServer 来管理 mockjs 的中间件模块

安装

npm i -D @andremao/mockjs-config

使用

1 在项目的根目录下新建配置文件 mock.config.js,内容如下:

const Mock = require('mockjs');
const path = require('path');

module.exports = {
  // 多人开发时,分子文件,子文件内容格式参考下面补充
  subfiles: [
    path.join(__dirname, './some/path/to/subfile1.js'),
    path.join(__dirname, './some/path/to/subfile2.js'),
  ],
  // 要被 mockjs 拦截的请求集
  requests: [
    {
      type: 'GET', // 支持大小写
      // 注意:
      //   mockjs 只能拦截本地主机地址(如:http://localhost:8080/user/list)
      //   mockjs 不能拦截跨域的线上地址(如:http://api.itcast.cn/user/list)
      url: '/user/list',
      // 数据模板,请参照 mockjs
      tpl: {
        code: 200,
        message: '获取用户列表成功',
        'data|1-10': [{ id: '@ID()', name: '@CNAME()', email: '@EMAIL()' }],
      },
      // 自定义响应数据函数,优先级高于 tpl,需要自己手动调用 res 响应对象的 api 返回响应数据
      // handle(req, res) {
      //   console.log(req.query, '==== GET /user/list ====')
      //   const data = Mock.mock({
      //     code: 200,
      //     message: '获取用户列表成功',
      //     'data|1-10': [{ id: '@ID()', name: '@CNAME()', email: '@EMAIL()' }]
      //   })
      //   res.json(data)
      // }
    },
    {
      type: 'get',
      url: '/user/:id', // 支持动态路由参数
      tpl: {
        name: '@CNAME()',
        'age|18-60': 1,
      },
    },
    {
      type: 'GET',
      url: /^\/user\/\d+$/, // 支持正则表达式
      // 数据模板,请参照 mockjs
      // tpl: {
      //   code: 200,
      //   message: '获取用户信息成功',
      //   data: { id: '@ID()', name: '@CNAME()', email: '@EMAIL()' }
      // }
      // 自定义响应数据函数,优先级高于 tpl,需要自己手动调用 res 响应对象的 api 返回响应数据
      handle(req, res) {
        console.log(req.query, '==== GET /user/:id ====');
        console.log(req.path); // 若想要获取 地址中的 :id 参数,请自己手动解析
        const data = Mock.mock({
          code: 200,
          message: '获取用户信息成功',
          data: { id: '@ID()', name: '@CNAME()', email: '@EMAIL()' },
        });
        res.json(data);
      },
    },
  ],
  // 参考 Mock.setup 配置项,目前仅支持 timeout,默认值:'10-100'
  settings: { timeout: '10-100' },
};

补充:

  • mock.config.js 文件名必须一致,且必须在项目根目录下
  • tpl 请参照 mockjstemplate 格式
  • handle 的优先级高于 tpl,配置了 handle 就会忽略 tpl
  • ./some/path/to/subfile1.js./some/path/to/subfile2.js 子文件内容如下:

    module.exports = {
      requests: [
        {
          type: 'get',
          url: '/user/list',
          tpl: { ... }
        },
        ...
      ]
    }

2 在 vue 中使用,修改 vue.config.js 配置文件:

module.exports = {
  devServer: {
    before(app) {
      // 判断是否为开发环境
      if (process.env.NODE_ENV.toUpperCase() === 'DEVELOPMENT') {
        // 如果需要获取到 post 请求参数,把下面这行代码的注释解开
        // app.use(require('body-parser').json()) // 把 post 请求参数解析为 json 格式
        app.use(require('@andremao/mockjs-config')); // 挂上中间件
      }
    },
  },
};

3 重启项目即可,并支持热加载,后续改动 mock.config.js 文件无需重启

补充:

  • 配合 axios 的请求拦截器,可以实现 mock 环境 与 线上环境 混搭

    发请求:

    axios.post('/login?ismock=1', { uname: 'andremao', pwd: 'qwe123' });

    axios:

    // 创建 axios 请求实例
    const request = axios.create({
      baseURL: 'http://api.itcast.cn/',
    });
    
    // 请求拦截器
    request.interceptors.request.use((cfg) => {
      // 如果是 mock 则把请求 baseURL 改成 本地地址,不然 mockjs 拦截不到
      if (cfg.url.includes('ismock=1')) {
        cfg.baseURL = 'http://localhost:8080';
      }
      return cfg;
    });
1.1.1

2 years ago

1.1.2

2 years ago

1.0.13

2 years ago

1.0.12

3 years ago

1.0.11

3 years ago

1.0.10

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.0

3 years ago