阅读数:77 评论数:0

一、概述 

在开发项目的时候，如果后端接口没有出来，前端开发可以使用mock.js来模拟接口数据。

二、使用

1、安装mockjs

如果你尚未安装mockjs

npm install mockjs --save-dev

2、创建mock数据文件 

在项目中创建一个文件（例如 mocks/index.js），然后定义你的模拟数据规则。

// mocks/index.js
import Mock from 'mockjs';

// 模拟一个 GET 请求
Mock.mock('/api/data', 'get', {
  success: true,
  data: {
    name: 'Mockjs'
  }
});

// 更多模拟的 API ...

3、配置vite以使用mock数据

在 Vite 项目中，你可以在 vite.config.js 中配置开发服务器来拦截请求，并返回 Mock 数据。

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { viteMockServe } from 'vite-plugin-mock';

export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({
      // 启用并配置插件
      mockPath: './mocks', // mock文件所在目录
      localEnabled: true, // 开发打包开关
    }),
  ],
  // 其他配置...
});

注意，上面的配置使用了 vite-plugin-mock，这是一个专门为 Vite 设计的插件，用于提供 Mock 功能。如果你还没有安装它，请先安装：

npm install vite-plugin-mock --save-dev
# 或者
yarn add vite-plugin-mock --dev

按这种方式，我并没有成功，而是采用在main.js中引入的方式

import '@/mock/index.js'

4、启动vite开发服务器

运行 Vite 开发服务器，Mock 数据将会生效。

npm run dev
# 或者
yarn dev

在上述步骤中，当你的应用尝试调用 /api/data 这个 API 时，请求将被 Mockjs 拦截，并返回你在 mocks/index.js 文件中定义的模拟数据。

请记住，这些 Mock 数据只应该在开发环境中使用，在生产环境构建时应确保它们不会被包含进去。通过配置 vite-plugin-mock 插件的 localEnabled 和 prodEnabled 选项，你可以控制 Mock 功能在不同环境下的开启状态。

三、mockjs常用语法

http://mockjs.com/examples.html

1、数据模板定义

在 Mock.js 中，你可以定义数据模板来生成随机数据：

Mock.mock({
  'list|1-10': [{ // 'list' 是属性名，'|1-10' 是生成规则
    'id|+1': 1, // 数字从1开始，后续依次加1
    'name|1-5': '★', // 'name' 是一个重复1到5次的字符串
    'bool|1-2': true, // 布尔值随机生成，true 的概率是 1/3
    'age|20-30': 25, // 生成一个20到30之间的整数
  }]
});

2、数据占位符

Mock.js 提供了一系列的占位符，用于生成特定格式的随机数据：

• @boolean：随机生成一个布尔值。
• @natural：随机生成一个自然数（大于等于0的整数）。
• @integer：随机生成一个整数。
• @float：随机生成一个浮点数。
• @string：随机生成一段字符串。
• @date：随机生成一个日期字符串（默认格式为 yyyy-MM-dd）。
• @time：随机生成一个时间字符串（默认格式为 HH:mm:ss）。
• @datetime：随机生成一个日期和时间字符串。
• @now：生成当前的日期和时间字符串。
• @image：随机生成一张图片的 URL。
• @color：随机生成一个颜色字符串。
• @cname：随机生成一个常见的中文姓名。
• @email：随机生成一个电子邮箱地址。
• @url：随机生成一个 URL。
• @province：随机生成一个省份名称。
• @city：随机生成一个城市名称。
• @county：随机生成一个区县名称。

例如

Mock.mock({
  'boolean': '@boolean', // 随机生成一个布尔值
  'integer': '@integer(10, 100)', // 生成一个10到100之间的整数
  'float': '@float(0, 10, 2, 2)', // 生成一个0到10之间保留两位小数的浮点数
  'string': '@string("lower", 5)', // 生成一个长度为5的随机小写字符串
  'date': '@date("yyyy-MM-dd")', // 生成一个随机日期
  'image': '@image("200x100", "#4A7BF7", "Hello")', // 生成一个200x100的蓝色图片，图片上的文字是Hello
  'name': '@cname', // 随机生成一个中文姓名
  'url': '@url', // 随机生成一个URL
  'address': '@county(true)' // 随机生成一个省市区
});