mock.js正确使用方式 #10

导言：学习任何东西，首先想到的应该是从mock.js官网找到文档，然后根据文档进行广度学习，从实践中找答案，这里给出mock.js的简易教程

什么是mock.js

Mock.js是一个模拟数据生成器，帮助前端开发和原型与后端进度分离，减少一些单调，特别是在编写自动化测试时。

mock.js的功能

1. 根据 数据模板 生成模拟数据
2. 基于 HTML模板 生成模拟数据
3. 拦截并模拟 Ajax 请求，生成并返回模拟数据

什么时候用mock.js

1. 开发时，后端还没完成数据输出，前端也能根据模拟的数据开发。
2. 想要尽可能还原真实的数据。
3. 图片,url格式数据难以模拟。

怎么用mock.js

1. 通过Bower安装使用

npm install -g bower
bower install --save mockjs

安装完成后通过script标签引用即可

<script src="./bower_components/mockjs/dist/mock.js"></script>

2. 通过npm安装使用

npm install mockjs --save

在express使用方法如下

//打开routes/index.js ,添加一个路由
 router.get('/mockjs', function (req, res, next) {
    var Mock = require('mockjs')
    var data = Mock.mock({
        // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
        'list|1-10': [{
            // 属性 id 是一个自增数，起始值为 1，每次增 1
            'id|+1': 1
        }]
    })
    var net = JSON.stringify(data, null, 4)
    res.render('index', {title: net});
});

返回值是类似这样的json对象

{
"list": [
    {
        "id": 1
    },
    {
        "id": 2
    },
    {
        "id": 3
    }
    ]
}

3. Angular.js中的使用范例

<!-- 引用 -->
<script src="http://mockjs.com/dist/mock-min.js"></script>
<script src="http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js"></script>

<!-- 兼容angular (mock.js默认不兼容angular，需额外引用兼容包)-->
<script src="./src/mock.angular.js"></script>
<!-- 模拟数据 -->
<script src="./mockData.js"></script>
<!-- 使用 -->
<script>
(function() {
    (function() {
        var app;
        app = angular.module('app', []);
        //使用mockjax方法覆盖Ajax请求
        Mock.mockjax(app);
        return app.controller('appCtrl', function($scope, $http) {
            var box;
            box = $scope.box = [];
            $scope.get = function() {
                $http({
                    url: 'http://www.baidu.com',
                    method: 'POST',
                    params: {a: 1},
                    data  : {b:1}
                }).success(function(data) {
                return box.push(data);
            });

            $http({
                url: 'http://baidu.com'
                }).success(function(data) {
                console.log(data);
                });
            };
        return $scope.get();
        });
    })();

}).call(this);
</script>

mock数据mockData.js

Mock.mock('http://www.baidu.com', {
    'name': '@name()',
    'age|1-100': 100,
    'color': '@color'
});

mock.js语法

Mock.js 的语法规范包括两部分：

1. 数据模板定义（Data Temaplte Definition，DTD）
2. 数据占位符定义（Data Placeholder Definition，DPD）

• 数据模板定义
  数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

'name|rule': value// 属性名  name   生成规则 rule   属性值   value

注意：
属性名 和 生成规则 之间用 | 分隔。生成规则 是可选的。生成规则 有 7 种格式：

'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value

生成规则 的 含义 需要依赖 属性值 才能确定。属性值 中可以含有 @占位符。属性值 还指定了最终值的初始值和类型。

生成规则和示例：

1. 属性值是字符串 String

'name|min-max': 'value' 通过重复 'value' 生成一个字符串，重复次数大于等于 min，小于等于 max。

2. 属性值是数字 Number

'name|+1': 100 属性值自动加 1，初始值为 100
'name|1-100': 100 生成一个大于等于 1、小于等于 100 的整数，属性值 100 只用来确定类型。
'name|1-100.1-10': 100 生成一个浮点数，整数部分大于等于 1、小于等于 100，小数部分保留 1 到 10 位。

3. 属性值是布尔型 Boolean

'name|1': value 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率是 1/2。
'name|min-max': value 随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。

4. 属性值是对象 Object

'name|min-max': {} 从属性值 {} 中随机选取 min 到 max 个属性。
'name|count': {} 从属性值 {} 中随机选取 count 个属性。

'name|count': object
'name|min-max': object
//原理同字符串

5. 属性值是数组 Array

'name|1': [{}, {} ...] 从属性值 [{}, {} ...] 中随机选取 1 个元素，作为最终值。
'name|min-max': [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组，重复次数大于等于 min，小于等于 max。
'name|count': [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组，重复次数为 count。

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

6. 属性值是数组 Function

'name': function(){} 执行函数 function(){}，取其返回值作为最终的属性值，上下文为 'name' 所在的对象。

• 数据占位符定义 DPD

占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。占位符 的格式为：

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

注意：
用 @ 来标识其后的字符串是 占位符。
占位符 引用的是 Mock.Random 中的方法。
通过 Mock.Random.extend() 来扩展自定义占位符。
占位符 也可以引用 数据模板 中的属性。
占位符 会优先引用 数据模板 中的属性。
👇下面是举例

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

拦截/模拟ajax请求

Mock.mock( rurl, template )

记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

Mock.mock( rurl, rtype, template )

记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src='./node_modules/mockjs/dist/mock.js'></script>
<script type="text/javascript">
    //调用mock方法模拟数据
    Mock.mock(/\.json/, {
        'list|1-10': [{
            'id|+1': 1,
            'email': '@EMAIL'
        }]//所有ajax地址以.json结尾的都被拦截，并且返回数据
    })
    $.ajax({
        url: 'hello.json',
        dataType: 'json'
    }).done(function(data, status, jqXHR){
        $('<pre>').text(JSON.stringify(data, null, 4))
            .appendTo('body')
    })
</script>

参考链接：
mock.js官方wiki
Mock.mock()
使用Mock.js进行独立于后端的前端开发
mock.js那点事