mock.js使用方法

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/dkh_321/article/details/83537833

简介

生成随机数据,拦截 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中的导入代码
展开阅读全文

没有更多推荐了,返回首页