Vue Mock模拟数据的使用

一、虚拟数据介绍

虚拟数据是指在前端开发时，为了方便开发者在没有后端数据时能够进行开发和测试使用的一种数据。Vue.js中的Mock.js是一种非常好的虚拟数据生成工具，Mock.js可以帮助我们模拟数据，提高开发效率。

二、安装Mock.js

安装Mock.js，可以通过npm命令进行安装：

npm install mockjs --save-dev

三、使用Mock.js

在Vue.js项目中使用Mock.js，可以选择在main.js中进行全局引用，或是在需要使用模拟数据的组件中引入Mock.js。

1、在main.js中全局引用Mock.js

在main.js中引用Mock.js，并在Vue实例化前开启Mock拦截器，这样在开发中就可以通过访问url获取Mock模拟数据了。

import Mock from 'mockjs'

// 开启Mock拦截，而非真实ajax请求，拦截请求并返回模拟数据
Mock.setup({
  timeout: '200-600' // 以200-600ms 为随机范围，模拟网络延迟
});

2、在需要使用模拟数据的组件中引入Mock.js

在需要使用模拟数据的组件中，引入Mock.js，并利用Vue.js的$nextTick函数在Dom挂载完成后进行数据的渲染和更新。

import Mock from 'mockjs'

export default {
  name: 'Demo',

  created() {
    const that = this

    // 模拟获取后台数据
    Mock.mock('/api/data', {
      'status': 200,
      'data|10-20': [{
        'id|+1': 1,
        'name': '@cname',
        'age|18-40': 1,
        'sex|1': [0, 1],
        'email': '@EMAIL'
      }]
    })

    // 获取模拟数据
    axios.get('/api/data')
      .then((res) => {
        that.tableData = res.data.data
        // 使用Vue.js的$nextTick函数更新Dom
        that.$nextTick(() => {
          that.$refs.tableData.setCurrentRow(that.tableData[0])
        })
      })
  }
}

四、Mock.js对象的常用方法

1、Mock.mock()

Mock.mock()是Mock.js中最基础的方法，用于拦截请求并返回模拟数据。其中的url参数表示要拦截的请求 URL，method参数表示要拦截的 HTTP 方法，mockData参数表示返回的模拟数据。

Mock.mock(url, method, mockData)

示例如下：

Mock.mock('/api/data', {
  'status': 200,
  'data|10-20': [{
    'id|+1': 1,
    'name': '@cname',
    'age|18-40': 1,
    'sex|1': [0, 1],
    'email': '@EMAIL'
  }]
})

2、Mock.Random

Mock.Random是Mock.js中用于生成随机数据的对象，可以使用Mock.Random对象中的方法来生成具有随机性质的模拟数据。以下是常用的几个Mock.Random方法:

1) Mock.Random.boolean()

生成随机的布尔值。

Mock.Random.boolean()
// 输出示例：true

2) Mock.Random.natural()

生成大于等于 0 的整数值。

Mock.Random.natural(0)
// 输出示例：2

3) Mock.Random.integer()

生成随机的整数值。

Mock.Random.integer(1, 100)
// 输出示例：37

4) Mock.Random.float()

生成随机的浮点数值。

Mock.Random.float(1, 100, 2, 2)
// 输出示例：37.16

5) Mock.Random.date()

生成随机的日期值。

Mock.Random.date()
// 输出示例：Mon Aug 30 2021 15:54:40 GMT+0800 (中国标准时间)

五、总结

本文介绍了使用Vue.js和Mock.js进行虚拟数据模拟的方法，以及Mock.js对象中的一些常用方法。Mock.js能够帮助我们快速模拟数据，提高开发效率，非常值得我们在前端开发中使用。