vite-plugin-mock && mockjs 的模拟数据使用

使用描述

在写自己练手的前端项目时，总是需要接口，但是如果再去自己配置一个后端是有点麻烦了，所以这个时候就会用到 mock 模拟数据，同时因为项目是用 vite 构建的，所以就可以使用到里面的插件 vite-plugin-mock 去简化连接的过程，并且使用 mockjs 去简化生成数据的过程

安装插件

npm i vite-plugin-mock -D
npm i mockjs -D

https://www.npmjs.com/package/mockjs

https://www.npmjs.com/package/vite-plugin-mock

配置步骤

vite.config.js

plugins: [
    vue(),
    viteMockServe({
      mockPath: 'mock', // 指定 mock 文件目录
      enable: true // 本地环境开启
    }),
]

viteMockServe 常用配置参数

1. mockPath

   • 默认值：'mock'

   • 用途：用来存放模拟文件的文件夹路径

2. enable

   • 默认值：true

   • 用途：决定是否启用模拟功能

其实可以通过 vite.config.js 中的 mode 参数去判断不同环境下是否启用模拟功能

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      vue(),
      viteMockServe({
        mockPath: 'mock', // 指定 mock 文件目录
        enable: mode === 'development' // 开发环境下开启
      }),
    ]
  }
})

mock 文件夹

在 项目的根目录 下新建一个 mock 文件夹，在文件夹中就可以新建出文件去配置自己所需要的模拟接口

export default [
  {
    url: '/api/user',
    method: 'get',
    response: ({ query }) => {
      return {
        code: 200,
        data: {
          name: 'John Doe',
          age: 30
        }
      }
    }
  }
]

MockMethod 常用参数配置

• url

  • 类型：string

  • 用途：指定请求的 URL 路径

• method

  • 类型：GET、POST、PUT、DELETE等

  • 用途：指定请求的方法类型，如果不指定，将匹配任何请求方法

• timeout

  • 类型：number

  • 用途：指定请求的响应时间（以毫秒为延迟）

• statusCode

  • 类型：number

  • 用途：指定相应的 HTTP 状态码

• response

  • 类型：Function | any

  • 用途：定义相应的数据，可以是一个函数返回响应数据，也可以直接是一个对象标识响应数据

  • 参数：opt 一个对象，包含请求的详细信息，如请求体（body）、查询参数（query）、请求头（headers）

  • 函数返回值：返回一个对象

简化生成模拟数据对象

例如要返回的数据太多，并且要随机，那自己创建未免太繁琐

那就可以使用到上面导入的 mockjs 去帮助我们生成数据

export default [
  {
    url: '/api/users',
    method: 'get',
    response: ({ query }) => {
      return Mock.mock({
        'code': 200,
        'message': 'success',
        'data|': {
          'users|1-100': [
            {
              'id|+1': 1, // 从 1 开始自增 Id
              'name': '@cname',
              'email': '@email',
              'age|18-60': 1
            }
          ]
        }
      });
    }
  }
]

mockjs 字段参数

内容较多，可以查看文档

Home · nuysoft/Mock Wiki (github.com)

// 属性 list 的值是一个数组，随机生成 1 到 10 个元素
  "list|1-10": [
    {
      // 随机生成1-10个★
      "string|1-10": "★",
      // 随机生成1-100之间的任意整数
      "number|1-100": 1,
      // 生成一个浮点数，整数部分大于等于 1、小于等于 100，小数部分保留 1 到 10 位。
      "floatNumber|1-100.1-10": 1,
      // 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
      "boolean|1": true,
      // 随机生成一个布尔值，值为 false 的概率是 2 / (2 + 5)，值为 true 的概率是 5 / (2 + 5)。
      'bool|2-5': false,
      // 从属性值 object 中随机选取 2-4 个属性
      "object|2-4": {
        "310000": "上海市",
        "320000": "江苏省",
        "330000": "浙江省",
        "340000": "安徽省"
      },
      // 通过重复属性值 array 生成一个新数组，重复次数为 2
      "array|2": [
        "AMD",
        "CMD",
        "UMD"
      ],
      // 执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 'name' 所在的对象。
      'foo': '哇哈哈哈哈',
      'name': function () {
        return this.foo
      },
      // 根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
      'regexp': /\d{5,10}/,
    },
  ],

文刊借鉴