使用mock.js来模拟数据

目的：mockjs基本使用

mockjs可以模拟可更快的得到较为真实的数据，且可以拦截axios的接口调用，让我们的代码实现了调用接口的逻辑且得到模拟的数据，保存业务完整度。当然模拟数据有一定的规则请参考： http://mockjs.com/

目标：模拟 /my/test 接口，随机返回点数据。

基本使用步骤：

1.安装：

npm i mockjs

2.配置 src/mock/index.js 

import Mock from 'mockjs'

// mock的配置
Mock.setup({
  // 随机延时500-1000毫秒
  timeout: '500-1000'
})

3.使用 src/main.js 

// mockjs
import '@/mock'

4.生成随机数据 

Mock.mock(/\/my\/test/, 'get', () => {
  // 随机数据逻辑 目标：5条数据 [{id:'',name:''},...]
  const arr = []
  for (let i = 0; i < 5; i++) {
    arr.push(Mock.mock({
      id: '@id',
      name: '@cname',
      image: '@image(200x100)'
    }))
  }
  return {
    message: '请求成功',
    result: arr
  }
})

5.在页面中发请求 

// 调用模拟的接口
axios('/my/test', 'get').then(data => {
  console.log(data)
})

然后我们可以打开浏览器查看返回的数据

具体规则：http://mockjs.com/examples.html