mockjs基本使用

模拟接口返回数据

参考文档

• mockjs
• vite-plugin-mock

以 vue 使用为例

安装

npm i mockjs

使用

在src下创建一个mock文件夹，用于存放模拟的数据

1. 创建分类列表数据

设置接口为 /cate/list 返回的数据内容

// 路径：/src/mock/cateData.js

// 导入 Mock
import Mock from 'mockjs';

// 设置接口为 /cate/list 的返回数据内容
Mock.mock('/cate/list', 'get', {
  code: 200,
  // 生成5条数据，具体设置可查看官方文档
  'data|5': [
    {
      'id|+2': 100, // 自增 +1 +2
      'age|6-18': 1,
      coverUrl: '@image',
      publishEmail: '@email',
      "delFlag|1": Boolean,
      'color|2': {
        address: 'home',
        createDate: '@time',
        'creater|3-6': ''
      },
    }
  ]
});

存在返回值

template是基本数据类型。为函数时，则要return，没有return返回值为undefined;

// 存在返回值
const res = Mock.mock(template);
console.log(res);

2. 统一在mock/index.js引入

// 路径：/src/mock/index.js

import './cateData.js';

3. 在main.js中导入mock的数据（可根据环境引入）

// 路径：/src/main.js

// 直接使用
import './mock';

// 只在开发环境中使用
if (import.meta.env.MODE === 'development') {
  import('./mock');
}

4.发起请求

使用axios发起/cate/list的请求

配合 vite-plugin-mock 使用

安装

npm i vite-plugin-mock -D

开发环境下使用

在src下创建一个vmock文件夹，用于存放模拟的数据

1. 创建分类列表数据

设置接口为 /cate/list 返回的数据内容

// 路径：/src/vmock/cateData.js

// 设置接口为 /cate/list 的返回数据内容
export default [
  {
    url: '/cate/list',
    method: 'get',
    // response 可以是函数或值
    response: () => {
      return {
        code: 200,
        data: [
          {
            avaUrl: '@image'
          }
        ]
      }
    }
  },
  {
    url: 'xxx',
    method: 'get',
    response: {
      code: 200,
      data: [
        {
          avaUrl: '@image',
        }
      ]
    }
  },
]

2. 在vite.config.js配置

// 路径：/vite.config.js

// 引入
import { viteMockServe } from 'vite-plugin-mock'

plugins: [
  vue(),
  viteMockServe({
    mockPath: './src/vmock', // mock文件存放的路径
  })
],

3. 发起请求

生产环境下使用

备注：版本3.0.0后，不支持在vite.config.js中配置在生产环境中使用

import { createProdMockServer } from 'vite-plugin-mock/client'

import cateModule from '../vmock/cateData';
import userModule from '../vmock/userData';

export function setupProdMockServer() {
  createProdMockServer([...cateModule, ...userModule])
}

解决方法：

• 在v3.0.0版本，可在 main.js 文件中调用 setupProMockServer 函数
• 版本退回至v2.9.6
• 使用fakerjs代替