Mock.js 模拟数据生成工具

简介

一般项目开发中，我们前后端开发基本上是同时进行的，但往往会存在后端接口没开发完，而导致前端开发无法继续进行的情况。

为了避免这种情况，我们可以使用Mock.js，生成随机数据，拦截 Ajax 请求，来模拟服务器响应。

优点是使用简单方便，无侵入性。

Mock.js官网：
http://mockjs.com/

Mock特点

前后端分离

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

增加单元测试的真实性

通过随机数据，模拟各种场景。

开发无侵入

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

用法简单

符合直觉的接口。

数据类型丰富

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

方便扩展

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

Mock.js安装

npm安装：
npm install mockjs

直接引用：
<script src="http://mockjs.com/dist/mock.js"></script>;

使用mock创建模拟数据

Mock.mock( url, type, template)

第一个参数 url 为请求路径，与所需拦截接口相同；
第二个参数 type 为请求类型如：get、post、delete、put等；
第三个参数是生成的数据，作为响应数据返回。可以为对象，也可以为函数，函数需要return；

示例：

// 引用 Mock
const Mock = require('mockjs')
 
export const userData = Mock.mock("/data/list", "get", {
  // 属性 list 的值是一个数组，随机生成 1 到 10 个元素
  "list|1-10": [
    {
      "id|+1": 1,
    },
  ],
  code: 200,
  message: 'ok',
});

数据模板定义

数据模板格式：
'name|rule': value

String
'name|min-max': string
'name|count': string

Number
'name|+1': number
'name|min-max': number
'name|min-max.dmin-dmax': number

Boolean
'name|1': boolean
'name|count': object
'name|min-max': object

Object
'name|count': object
'name|min-max': object

Array
'name|1': array
'name|min-max': array

Function
'name': function

RegExp
'name': regexp

Path
Absolute Path
Relative Path

数据占位符定义

Mock.Random 是一个工具类，用于生成各种随机数据。

Basic
Random.boolean( min?, max?, current? )    // 返回一个随机的布尔值
Random.natural( min?, max? )    // 返回一个随机的自然数
Random.integer( min?, max? )    // 返回一个随机的整数
Random.float( min?, max?, dmin?, dmax? )    // 返回一个随机的浮点数
Random.character( pool? )    // 返回一个随机字符
Random.string( pool?, min?, max? )    // 返回一个随机字符串
Random.range(start?, stop, step?)    // 返回一个整型数组

Date
Random.date( format? )    // 返回一个随机的日期字符串
Random.time( format? )    // 返回一个随机的时间字符串
Random.datetime( format? )    // 返回一个随机的日期时间字符串
Random.now( unit?, format? )    // 返回当前时间的日期时间字符串

Image
Random.image( size?, background?, foreground?, format?, text? )    // 生成一个随机的图片地址
Random.dataImage( size?, text? )    // 生成一段随机的Base64图片编码

Color
Random.color()    // 随机生成一个16进制颜色
Random.hex()    // 随机生成一个16进制颜色
Random.rgb()    // 随机生成一个rgb格式的颜色
Random.rgba()    // 随机生成一个rgba格式的颜色
Random.hsl()    // 随机生成一个hsl格式的颜色

Text
Random.paragraph( min?, max? )    // 随机生成一段文本
Random.sentence( min?, max? )    // 随机生成一个句子
Random.word( min?, max? )    // 随机生成一个单词
Random.title( min?, max? )    // 随机生成一个标题
Random.cparagraph( min?, max? )    // 随机生成一段中文文本
Random.csentence( min?, max? )    // 随机生成一句中文文本
Random.cword( pool?, min?, max? )    // 随机生成一个汉字
Random.ctitle( min?, max? )    // 随机生成一句中文标题

Name
Random.first()    // 随机生成英文名
Random.last()    // 随机生成英文姓
Random.name( middle? )    // 随机生成一个英文姓名
Random.cfirst()    // 随机生成一个中文名
Random.clast()    // 随机生成一个中文姓
Random.cname()    // 随机生成一个中文姓名

Web
Random.url()    // 随机生成一个URL协议
Random.domain()    // 随机生成一个域名
Random.protocol()    // 随机生成一个协议
Random.tld()    // 随机生成一个顶级域名
Random.email()    // 随机生成一个邮箱
Random.ip()    // 随机生成一个IP

Address
Random.region()    // 随机生成一个（中国）大区
Random.province()    // 随机生成一个（中国）省
Random.city( prefix? )    // 随机生成一个（中国）市
Random.county( prefix? )    // 随机生成一个（中国）县
Random.zip()    // 随机生成一个邮政编码

Helper
Random.capitalize( word )    // 把字符串的首字母转换为大写
Random.upper( str )    // 把字符串转大写
Random.lower( str )    // 把字符串转小写
Random.pick( arr )    // 从数组中随机选取一个元素，并返回
Random.shuffle( arr )    // 打乱数组中元素的顺序，并返回

Miscellaneous
Random.guid()    // 随机生成一个GUID
Random.id()    // 随机生成一个18位身份证号
Random.increment( step? )    // 生成一个全局自增整数

参考示例：
http://mockjs.com/examples.html

（完）

简介