mock.js使用方法

简介

生成随机数据，拦截 Ajax 请求

• 前后端分离 让前端攻城师独立于后端进行开发。

• 增加单元测试的真实性 通过随机数据，模拟各种场景。

• 开发无侵入 不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。

• 用法简单 符合直觉的接口。

• 数据类型丰富 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

• 方便扩展 支持支持扩展更多数据类型，支持自定义函数和正则。

安装

使用 npm:

npm install mock.js

目录

├─src
│ ├─mock
│ │ ├─index.js   
│ │ ├─main.js       
│ ├─main.js

新建mock文件夹及对应js文件并在src/main.js中引入。

import './mock'

基本用法

// mock/index.js
import Mock from 'mockjs'
import mainAPI from './main'
Mock.mock(/\/getSystemLog/, 'get', mainAPI.getSystemLog)
export default Mock

// mock/main.js
import Mock from 'mockjs'
const result = []
for (let i = 0; i < 10; i++) {
  result.push(Mock.mock({
    id: '@increment',
    name: '@first',
    num: '@integer(1, 1000)',
    time: '@datetime',
    title: '@title(2, 4)',
    'state|1': ['true', 'false'],
    image_uri,
    parentAlgoName: '@integer(1, 3)',
    childAlgoName: '@integer(1, 2)',
    userName: 'superadmin',
    createTime: '@datetime',
    'handle|1': ['登录', '修改结果', '添加轮播图']
  }))
}
export default {
  getSystemLog: () => ({
    data: {
      pageIndex: 1,
      total: result.length,
      result: result
    }
  })
}

tips

• mock.js常用场景为后台接口不存在或者需等待
• 当不需要mock.js时，需注释src/main.js中的导入代码