Mock.js 数据生成与接口拦截

属性名|规则: 值

const data = Mock.mock({
  // 生成 3~8 条记录
  'list|3-8': [
    {
      // id 自增，起始值 1
      'id|+1': 1,
      // 中文标题，5~12 字
      'title': '@ctitle(5, 12)',
      // 作者名
      'author': '@cname',
      // 阅读量 0~10000
      'views|0-10000': 1,
      // 是否置顶，概率 30%
      'isTop|1-3': true,
      // 标签，从数组中随机取 1~3 个
      'tags|1-3': ['JavaScript', 'Vue', 'React', 'Node.js'],
      // 创建时间
      'createdAt': '@datetime("yyyy-MM-dd HH:mm:ss")'
    }
  ],
  // 分页信息
  'total|10-100': 1,
  'page': 1,
  'pageSize': 10
})

import Mock from 'mockjs'

// 拦截 GET /api/users 请求
Mock.mock('/api/users', 'get', {
  'code': 0,
  'message': 'success',
  'data|5-10': [
    {
      'id|+1': 1,
      'name': '@cname',
      'email': '@email'
    }
  ]
})

// 拦截带参数的 POST 请求
Mock.mock('/api/login', 'post', (options) => {
  const { username, password } = JSON.parse(options.body)
  if (username === 'admin' && password === '123456') {
    return { code: 0, data: { token: '@guid' } }
  }
  return { code: 401, message: '用户名或密码错误' }
})

// 正则匹配 URL
Mock.mock(/\/api\/users\/\d+/, 'get', {
  'code': 0,
  'data': {
    'id': '@id',
    'name': '@cname',
    'bio': '@paragraph(2, 4)'
  }
})

// 设置全局延迟：200~600ms 随机
Mock.setup({ timeout: '200-600' })

// 针对单个规则设置延迟
Mock.mock('/api/slow', 'get', {
  'code': 0,
  'data': '@ctitle'
})

src/
├── mock/
│   ├── index.js          # 统一入口
│   ├── modules/
│   │   ├── user.js       # 用户模块
│   │   ├── course.js     # 课程模块
│   │   └── order.js      # 订单模块

// src/mock/index.js
import Mock from 'mockjs'

// 自动导入 modules 目录下所有文件
const modules = import.meta.glob('./modules/*.js', { eager: true })

Object.values(modules).forEach((module) => {
  const mocks = module.default || module
  if (Array.isArray(mocks)) {
    mocks.forEach(({ url, method, response }) => {
      Mock.mock(url, method, response)
    })
  }
})

// 全局延迟
Mock.setup({ timeout: '200-500' })

export default Mock

// src/mock/modules/user.js
export default [
  {
    url: '/api/users',
    method: 'get',
    response: {
      'code': 0,
      'data|10-20': [
        { 'id|+1': 1, 'name': '@cname', 'role|1': ['admin', 'user'] }
      ]
    }
  },
  {
    url: '/api/users/login',
    method: 'post',
    response: (options) => {
      const { username } = JSON.parse(options.body)
      return { code: 0, data: { username, token: '@guid' } }
    }
  }
]

// src/main.js
async function bootstrap() {
  if (import.meta.env.DEV && import.meta.env.VITE_USE_MOCK === 'true') {
    await import('./mock')
    console.log('[Mock] Mock 数据已启用')
  }

  // 正常启动应用
  createApp(App).mount('#app')
}

bootstrap()

# .env.development
VITE_USE_MOCK=true

# .env.production
VITE_USE_MOCK=false

// src/mock/index.js
const WHITE_LIST = [
  '/api/config',      // 已联调，走真实接口
  '/api/upload',      // 文件上传，走真实接口
]

// 重写 Mock.mock，增加白名单过滤
const originalMock = Mock.mock.bind(Mock)
Mock.mock = (url, method, response) => {
  if (WHITE_LIST.some((path) => url.includes(path))) {
    return // 白名单内不注册 Mock 规则
  }
  originalMock(url, method, response)
}

// Faker.js 示例
import { faker } from '@faker-js/faker/locale/zh_CN'

const users = Array.from({ length: 10 }, () => ({
  id: faker.string.uuid(),
  name: faker.person.fullName(),
  email: faker.internet.email(),
  avatar: faker.image.avatar(),
  createdAt: faker.date.past()
}))