mockjs在项目中的使用方法详解

Mockjs是一个模拟数据生成器，用于帮助前端开发，使其独立于后端进程，并减少一些单调性，特别是在编写自动化测试时。

一、项目实战

1. 安装mockjs

npm install mockjs --save-dev

2. 引入mockjs，模拟数据

// 新建一个mock.js文件
import Mock from 'mockjs';
const { Random } = Mock;
const ApiPrefix = '/api/v1'; // 自定义的访问路径常量
const arr = [1,2,3];

Mock.mock(`${ApiPrefix}/test2`, 'post', Mock.mock({
  'items|1-5': [
    {'id|+1': 1, title: Random.string(),'array|+1': arr}
  ]
}))

3. 引入mock.js, 定义ajax请求

// service.js
import { axios } from 'axios';
import 'mock.js';

export function getTestList () {
  return axios.post('/api/v1/test2')
}

4. 页面调用ajax方法

// react page
import { getTestList } from 'services.js'
componentDidMount () {
    getTestList().then(res => {
      console.log(res.data)
    })
  }

---

以下内容从官方文档整理而来mockjs官方文档

二、语法规范

1. 数据模板
2. 数据占位符

1. 数据模板

‘name|rule’:value

• name: 属性值
• rule: 属性规则
• value: 属性值

rule规则如下：

注意：生成规则需要根据属性值才能确定，属性值可以包含@占位符，可以指定最终值的初始值和类型

1. ‘name|min-max’: value

2. ‘name|count’: value

3. ‘name|mix-max.dmix-dmax’: value

4. ‘name|min-max.dcount’: value

5. ‘name|count.dmin-dmax’: value

6. ‘name|count.dcount’: value

   扫描二维码关注公众号，回复： 9548435 查看本文章

7. ‘name|+step’: value

规则详细介绍：
属性值是string

'name|1-3': 'a' // 生成1-3个a
'name2|2': 'b' // 生成bb

属性值是number

'name|+1': 4 // 生成次，每次+1
'name2|1-7': 2 // 生成一个1到7的数字
'name3|1-4.5-8': 1 // 生成一个小数，整数1-4，小数部分保留5-8位
Mock.mock({
    'number1|1-100.1-10': 1, // 整数1-100之间，小数随机生成1-10位
    'number2|123.1-10': 1, // 整数123，小数随机生成1-10位
    'number3|123.3': 1, // 整数123，小数随机生成三位
    'number4|123.10': 1.123 // 整数123， 小数随机生成10位
})
// =>
{
    "number1": 12.92,
    "number2": 123.51,
    "number3": 123.777,
    "number4": 123.1231091814
}

属性值是Boolean

'name|1': true // 生成一个布尔值，true和false各一半
'name2|1-7': true // 值位true的概率是1/（1+7）， 7/8是false

属性值是Object

var obj = {
    a: 1,
    b: 2,
    c: 3,
    d: 4
}
'name|1-3': obj // obj里随机找到1-3个属性显示
'name2|1': obj // 随机选择1个属性显示

属性值是Array

var arr = [1,2,3,4]
'name|count': arr // count是1时，从数组里随机取一个值，大于1表示数组里的内容重复count次生成的一个新数组
'name|+1': arr // 从数组中顺序选取一个值
'name2|1-3': arr // 数组重复1-3遍

属性值是Function

var fun = function (x) {
    return x + 10
}
'name|fun(10)': fun // 执行函数取其返回值作为最终值，函数上下文位属性name所在的对象

属性值是RegExp

'name': /\d{1,3}/ // 生成一个满足正则的表达式

2. 数据占位符

占位符格式如下两种：

@占位符
@占位符(参数，[参数])

注意

1. 跟在@后的字符串就是占位符
2. 占位符引用的是从Mock.Random中的方法
3. 通过Mock.Random.extend()来扩展自定义占位符
4. 占位符可以引用数据模板中的属性
5. 占位符优先引用数据模板中的属性
6. 占位符支持相对路径和绝对路径

demo:

Mock.mock({
    name: {
        first: '@FIRST', // 通过Random方法生成一个值
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
    }
})
// =>
{
    "name": {
        "first": "Charles",
        "middle": "Brenda",
        "last": "Lopez",
        "full": "Charles Brenda Lopez"
    }
}
// 扩展
Random.extend({
    constellation: function(date) {
        var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
        return this.pick(constellations)
    }
})
Random.constellation()
// => "水瓶座"
Mock.mock('@CONSTELLATION')
// => "天蝎座"

---

三、常用方法

Mock.mock()

生成模拟数据 Mock.mock(rurl?,rtype?,template|function(options){return object})

rurl可以是正则或者字符串

Mock.mock( template ) // 根据数据模板生成模拟数据
Mock.mock( rurl, template ) // 拦截到rurl时根据模板生成模拟数据
Mock.mock( rurl, function( options ) ) // 拦截到rurl时，执行方法，用方法的返回值作为模拟数据
Mock.mock( rurl, rtype, template )
Mock.mock( rurl, rtype, function( options ) ) // options是本次请求ajax的选项集，含有url, type, body三个属性

Mock.setup(setting)

配置拦截请求的行为，支持的配置项有timeout，指定响应时间默认值是‘10-100’,可以是整数或者一个范围

Mock.toJSONShema(template)

template风格的模板转成JSON Schema

Mock.Random()

一个工具类，用于生成各种类型的数据

它的方法在数据模板中叫做‘占位符’， 格式是@占位符(参数[,参数])

var Random = Mock.Random
Random.email() // 单独使用可以返回一个邮箱字符串
// => "[email protected]"
Mock.mock('@email') // 作为占位符使用
// => "[email protected]"
Mock.mock( { email: '@email' } )
// => { email: "[email protected]" }

类型type	方法名method，方法名可直接作为占位符
basic	boolean,natural,integer,float,character,string,range,date,time,datetime,now
Image	image, dateImage
Color	color
Text	paragraph,sentence,word,title,cparagraph,scentence,cword,ctitle(c开头表示中文)
Name	first,last,name,cfirst,clast,cname(name时可传一个布尔值，表示是否生成中间名字)
Web	url,domain,email,ip,tId
Address	area,region
Helper	capitalize,upper,lower,pick,shuffle方法，需要传入一个参数
Miscellaneous	guid,id

demo：

var Random = Mock.Random
////////////
Random.boolean() // true false 各一半
Random.boolean(1,2, false) // 1/3false, 2/3true
Random.natural() // 生成一个自然数
Random.natural(4,9) // 4-9的自然数，如果只有一个参数，则为最小值
Random.integer() // 整数，可以是负数，使用同natural
Random.float() //浮点数， 四个参数分别是： 整数的最小最大值，小数的最小最大值
Random.character(pool?) // 字符串， 参数如果是upper, lower, number, sympol(!@#$%^&*()[])，则从指定的内置字符池选取，否则以提供的字符串作为字符池。未提供则从所有内置字符池选取
Random.string(pool?,min?,max?) // 字符串，pool字符池，同上；不传参随机生成任意长度字符串；一个数字表示长度，两个数字表示长度范围；一个字符串一个数字表示字符池和长度，三个都传表示字符池和长度范围
Random.range(start?, stop, step?) // 不包含stop的整型数组stop| start，stop|start，stop，step

///////////////////////
Random.date(format?) //日期 默认值为 yyyy-MM-dd
Random.time(format?) // 时间 默认值为 HH:mm:ss
Random.datetime(format?) // 默认值为 yyyy-MM-dd HH:mm:ss
Random.now()
////////////////

Random.image(size?,background?, foreground?, format?, text?)// 宽*高， 背景色， 文字前景色， 格式， 默认文字  Random.image('200x100', '#ffcc33', '#FFF', 'png', '!')
Random.dataImage(size?, text?) // base64编码的
/////////////
Random.color() // 还有hex(), rgb(), rgab(), hsl()
///////////////
Random.paragraph(min?, max?, len?) //一段文字, 
Random.sentence(min?, max?, len?) //句子
Random.word(min?, max?, len?) // len | min,max
Random.cword(pool?,min?,max?) // 生成中文，pool字符池
Random.title(min?,max?,len?) // 英文标题，首字母大写
/////////////
Random.url(protocol?, host?) //url
Random.protocol()
Random.tId() // 顶级域名
Random.email(domain？) // domain指定域名的邮箱
Random.ip()
//////////
Random.region() // 大区 华北华中
Random.province()
Random.city(prefix?是否显示所在省) // prefix是布尔值
Random.country(prefix?)
Random.zip() // 邮政编码
///////////
Random.capitlize(word) //首字母转成大写
Random.lower(str) // 转成小写
Random.upper(str) // 转成大写
Random.pick(arr) // 从数组中随机选取一个数
Random.shuffle(arr) // 打乱数组顺序
///////////
Random.guid() //随机生成一个GUID
Random.id() // 随机生成一个18位身份证ID
Random.increment(step?) // 生成全局的自增整数