进行独立于后台后端的前端开发——学习Mockjs

Posted 2020-09-17

Mockjs实现的功能

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

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

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

4.用法简单

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

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

语法

数据模版中，每个属性由3个部分组成：属性名，生成规则，属性值：‘name’|‘rule’：‘value’

注意：

1. 属性名与生成规则之间用 ‘|’
2. 生成规则是可选的
3. 生成规则有其中格式：
   1. ‘name|min-max‘: value
   2. ‘name|count‘: value
   3. ‘name|min-max.dmin-dmax‘: value
   4. ‘name|min-max.dcount‘: value
   5. ‘name|count.dmin-dmax‘: value
   6. ‘name|count.dcount‘: value
   7. ‘name|+step‘: value 
4. 生成规则的含义需要以来属性值才能确定
5. 属性值中可以含有占位符
6. 属性值还指定了最终值的初始值和类型

生成规则示例说明

1. ‘name|min-max‘: ‘value‘ 通过重复 ‘value‘ 生成一个字符串，重复次数大于等于 min，小于等于 max。
2. ‘name|count‘: ‘value‘ 通过重复 ‘value‘ 生成一个字符串，重复次数等于 count。
3. ‘name|+1‘: 100 属性值自动加 1，初始值为 100
4. ‘name|1-100‘: 100 生成一个大于等于 1、小于等于 100 的整数，属性值 100 只用来确定类型。
5. ‘name|1-100.1-10‘: 100 生成一个浮点数，整数部分大于等于 1、小于等于 100，小数部分保留 1 到 10 位。
6. ‘name|1‘: value 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率是 1/2。
7. ‘name|min-max‘: value 随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。
8. ‘name|min-max‘: {} 从属性值 {} 中随机选取 min 到 max 个属性。
9. ‘name|count‘: {} 从属性值 {} 中随机选取 count 个属性。
10. ‘name|1‘: [{}, {} ...] 从属性值 [{}, {} ...] 中随机选取 1 个元素，作为最终值。
11. ‘name|min-max‘: [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组，重复次数大于等于 min，小于等于 max。
12. ‘name|count‘: [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组，重复次数为 count。
13. ‘name‘: function(){} 执行函数 function(){}，取其返回值作为最终的属性值，上下文为 ‘name‘ 所在的对象。

数据的占位符定义

占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。占位符 的格式为：@占位符（参数 [,参数]）

注意：

1. 用 @ 来标识其后的字符串是 占位符。
2. 占位符 引用的是 Mock.Random 中的方法。
3. 通过 Mock.Random.extend() 来扩展自定义占位符。
4. 占位符 也可以引用 数据模板 中的属性。
5. 占位符 会优先引用 数据模板 中的属性

示例

{
 name: {
 first: ‘@FIRST‘,
 middle: ‘@FIRST‘,
 last: ‘@LAST‘,
 full: ‘@first @middle @last‘
    }
}
// =>
{
 "name": {
 "first": "Charles",
 "middle": "Brenda",
 "last": "Lopez",
 "full": "Charles Brenda Lopez"
    }
}

用法：

jquery：

<script src="http://mockjs.com/dist/mock.js"></script>

Mock.mock(‘http://g.cn‘, {
    ‘name‘     : ‘@name‘,
    ‘age|1-100‘: 100,
    ‘color‘    : ‘@color‘
});

$.ajax({
    url: ‘http://g.cn‘,
    dataType:‘json‘
    }).done(function(data, status, xhr){
    console.log(
    JSON.stringify(data, null, 4)
    )    
})；

nodejs:

// 安装
npm install mockjs

// 使用
var Mock = require(‘mockjs‘);
var data = Mock.mock({
    ‘list|1-10‘: [{
        ‘id|+1‘: 1
    }]
});

console.log(JSON.stringify(data, null, 4))

 

官方文档：http://mockjs.com