Vue3——使用Mock.js

1、Mock 介绍

Mock 英文解释：模拟的，也就是模拟的数据。

作为一名前端人员我们通常会遇到这 2 种情况：

1. 工作中等着和后端人员调试接口，但是后端接口写的太 TMD 慢了，实在等不及了。
2. 只会写前端，不会写后端。需要后端接口提供测试数据。

那有了 Mock 之后，前端人员就有了测试数据，然后就可以愉快地进行开发和测试了。所以，说白了 Mock 就是一个像后端一样可以提供模拟数据的工具。在没有 Mock 之前，大多数人一般都是这样获取模拟数据的：提供一个 json 文件，里面都是死数据

[
    {"id": 1001, "name": "Tom", "age": 18},
    {"id": 1002, "name": "李白", "age": 21},
    {"id": 1003, "name": "杜甫", "age": 22}
]

然后请求本地 json 文件：

<script setup>
import {ref, onMounted} from 'vue'
onMounted(() => {
  getUserList()
})
const userList = ref([])
const getUserList = async () => {
  //直接请求本地JSON文件
  const response = await fetch('/src/mock/json/user.json', {
    headers: {
      'Cache-Control': 'no-cache'
    }
  })
  userList.value = await response.json()
}
</script>

<template>
  <div class="main-container">
    <h1>用户列表</h1>
    <el-table border :data="userList" style="width: 400px">
      <el-table-column prop="id" label="id"/>
      <el-table-column prop="name" label="姓名"/>
      <el-table-column prop="age" label="年龄"/>
    </el-table>
  </div>
</template>

这种情况虽然也能模拟后端接口数据，但数据不是动态的。比如无法模拟分页数据等动态接口行为。

所以我们需要在项目中安装 Mock 工具，帮助我们模拟动态接口行为。

2、Vue 项目中使用 Mock

2.1、安装使用 Mock

安装依赖：

npm install mockjs --save-dev

在项目中新建 mock 文件夹，然后新建 /api/index.js 文件，创建 Mock 服务：

import Mock from 'mockjs'
//模拟用户列表的接口
Mock.mock('/api/users', 'get', {
    'list|10': [
        {
            'id|+1': 1,
            'name': '@cname',
            'age|18-60': 1
        }
    ]
})

在 main.js 中导入 mock

import './mock/api/index.js'

在组件中使用 Mock 数据：

<script setup>
import {ref, onMounted} from 'vue'
import axios from 'axios'

onMounted(() => {
  getUserList()
})
const userList = ref([])
const getUserList = async () => {
  const res = await axios.get('/api/users')
  userList.value = res.data.list 
}
</script>

<template>
  <div class="main-container">
    <h1>用户列表</h1>
    <el-table border :data="userList" style="width: 400px">
      <el-table-column prop="id" label="id"/>
      <el-table-column prop="name" label="姓名"/>
      <el-table-column prop="age" label="年龄"/>
    </el-table>
  </div>
</template>

2.2、Mock基础用法

Mock.js 使用特定的语法规则来定义模拟数据的结构，语法格式为：

'name|rule': value

• name：属性名
• rule：生成规则（可选）
• value：属性值

1. 字符串

// 生成 1-5 个随机中文字符
'name|1-5': '@cword'

// 生成 5 个随机英文字符
'code|5': '@word'

2. 数字

// 生成 30-100 之间的整数
'age|30-100': 1

// 生成带小数的浮点数（整数部分30-100，小数部分1-2位）
'score|30-100.1-2': 1

// id 自增（每次+1）
'id|+1': 100

3. 布尔值

// 50% 概率为 true
'isActive|1': true

// 1/3 概率为 true，2/3 概率为 false
'isAdmin|1-2': true

4. 对象

// 从对象中随机选取 2 个属性
'info|2': {
  name: '@cname',
  age: '@integer(30,100)',
  gender: '@pick(["男","女"])'
}

// 从对象中随机选取 1-3 个属性
'contact|1-3': {
  email: '@email',
  phone: /1[3-9]\d{9}/,
  wechat: '@word(4,16)'
}

5. 数组

// 从数组中随机选取 1 个元素
'fruit|1': ['🍎', '🍌', '🍇', '🍊']

// 重复数组元素 3-5 次生成新数组
'tags|3-5': ['前端', 'JavaScript', 'Vue', 'React']

// 生成包含 10 个对象的数组
'users|10': [
  {
    'id|+1': 100,
    'name': '@cname',
    'age': '@integer(18,60)'
  }
]

2.3、常用占位符

Mock.js 提供了丰富的占位符来生成特定格式的数据：

3、Mock案例

3.1、用户登录

//模拟登录接口
Mock.mock('/api/login', 'post', (options) => {
    const {username, password} = JSON.parse(options.body)
    if (username === 'root' && password === '123456') {
        return {
            status: 200,
            message: '登录成功',
            token: '@www.123'
        }
    } else {
        return  {
            status: 401,
            message: '用户名或者密码错误'
        }
    }
})

//登录
const login = async ()=>{
  const res = await axios.post('/api/login', {
    username: 'root',
    password: '123456'
  })
  console.log(res.data)
}

3.2、新增用户

// 拦截 POST 请求
Mock.mock('/api/user/create', 'post', (options) => {
  const body = JSON.parse(options.body)
  return {
    'code': 200,
    'message': 'success',
    'data': {
      'id': '@id',
      'name': body.name,
      'createTime': '@now'
    }
  }
})

3.3、分页数据

Mock.mock('/api/items', 'get', (options)=> {
    const pageSize = Number(options.query.pageSize) || 10; // 每页大小，默认为10
    const page = Number(options.query.page) || 1; 
    return Mock.mock({
    'code': 200,
    'message': 'success',
    'data': {
      'total': 100,
      [`list|${pageSize}`]: [{
        'id|+1': (page - 1) * pageSize + 1,
        'name': '@cname',
        'age|18-60': 1,
        'gender|1': ['男', '女'],
        'email': '@email',
        'address': '@county(true)',
        'status|1': ['正常', '禁用'],
        'createTime': '@datetime'
      }]
    }
  })
});

4、注意事项

4.1、按功能模块维护 Mock 数据

为了方便管理和维护，我们可以将不同功能模块的 Mock 数据分别放在不同的文件中。

4.2、区分开发环境和生产环境

我们只在开发环境中使用 Mock 数据，所以可以通过环境变量来控制是否引入 Mock 文件。例如：

if (process.env.NODE_ENV === 'development') {
    import('./mock');
}