mock.js那点事(上)

耐心看完，我保证十五分钟就能学会mock.js

什么是Mock.js

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

Mock.js能做什么

提供了以下模拟功能：

1. 根据数据模板生成模拟数据
2. 模拟 Ajax 请求，生成并返回模拟数据

为什么我们要用Mock.js

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

首先我们配置一下我们的环境

Bower

npm install -g bower
bower install --save mockjs

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

node

 npm install express-generator -g
 express myapp
 cd myapp 
 npm install
 npm start
 然后在浏览器中打开 http://localhost:3000/ 网址就可以看到这个应用了。i
 express项目中 npm install mockjs --save

 //打开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});
});

语法

最基本的环境搞好了之后，我们来学习下语法，语法主要分成两类数据模板定义和数据占位符定义

数据模板定义

String

• String

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

        Mock.mock({                  =>  {
         "string|1-10": "★"              "string": "★★★★★★"
        })//随机出现1到10个字符"★"      }

    'name|count': 'value' 通过重复 'value' 生成一个字符串，重复次数等于 count

        Mock.mock({                =>   {
          "string|3": "★★★"              "string": "★★★★★★★★★"
        })                              }

• Number

  'name|min-max.dmin-dmax': number

  Mock.mock({                      =>{
  "number|1-100.1-10": 1              "number": 75.75862
  })                                  }    
  // num|1-5.1-3'
  //1到5范围.小数点一道三个 前面是范围，后面是个数，数字是多少没意义

• Boolean

  'name|1': boolean                       { 
    Mock.mock({                  =>       "boolean": false
      "boolean|1": true                   }     
    }) //true和false出现的几率是二分之一 
  
  'name|min-max': boolean         =>        { 
      Mock.mock({                          "boolean": true
      "boolean|1-2": true                 }
    }) // value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。

• Object

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

• Array

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

  最后我们来一波厉害点的例子, 先看题，再看答案

  {
    'title': 'Syntax Demo',
  
    'string1|1-10': '★',
    'string2|3': 'value',
    'number1|+1': 100,
    'number2|1-100': 100,
    'number3|1-100.1-10': 1,
    'number4|123.1-10': 1,
    'number5|123.3': 1,
    'number6|123.10': 1.123,
  
    'boolean1|1': true,
    'boolean2|1-2': true,
  
    'object1|2-4': {
        '110000': '北京市',
        '120000': '天津市',
        '130000': '河北省',
        '140000': '山西省'
    },
    'object2|2': {
        '310000': '上海市',
        '320000': '江苏省',
        '330000': '浙江省',
        '340000': '安徽省'
    },
  
    'array1|1': ['AMD', 'CMD', 'KMD', 'UMD'],
    'array2|1-10': ['Mock.js'],
    'array3|3': ['Mock.js'],
  
    'function': function() {
        return this.title
    }
  }
  =>
  {
    "title": "Syntax Demo",
    "string1": "★★★",
    "string2": "valuevaluevalue",
    "number1": 100,
    "number2": 21,
    "number3": 90.4741515,
    "number4": 123.2,
    "number5": 123.773,
    "number6": 123.1239086072,
    "boolean1": false,
    "boolean2": false,
    "object1": {
        "120000": "天津市",
        "130000": "河北省",
        "140000": "山西省"
    },
    "object2": {
        "320000": "江苏省",
        "330000": "浙江省"
    },
    "array1": "UMD",
    "array2": [
        "Mock.js",
        "Mock.js",
        "Mock.js",
        "Mock.js",
        "Mock.js",
        "Mock.js"
    ],
    "array3": [
        "Mock.js",
        "Mock.js",
        "Mock.js"
    ],
    "function": "Syntax Demo"
  }

  上面都是最常用的几种类型，当然还有一些不常用的没有列出，有兴趣移步官网

数据占位符定义

如果你掌握了上面的数据模板定义，那这个五分钟不用你就能掌握数据占位符定义,因为都是一样的

数据占位符定义也分为很多类型，比数据模板定义多很多，而且写法不一样，但是效果都是模拟数据

 {
    "自然数": "@natural",
    "浮点数": "@float",
    "日期": "@date",
    "时间": "@time",
    "标题": "@title",
    "中文名字": "@cname",
    "网址": "@url",
    "域名": "@domain",
    "邮箱": "@email",
    "段落": "@paragraph",
    "句子": "@sentence"
}
=>
{
    "自然数": 8077114183372796,
    "浮点数": -7509349163912364,
    "日期": "1970-03-14",
    "时间": "05:25:05",
    "标题": "Qgspmo Lcqiquof Kawo",
    "中文名字": "尤全信",
    "网址": "http://jcdtn.com/ppke",
    "域名": "chqykiyyq.co.uk",
    "邮箱": "c.lee@jackson.gov",
    "段落": "Ayooiokf llyhmsi owesieea yyishuzr rdnsl jexu vfrkrvuq icsb cclmce oofwykv qtcupiwv mgcclzb knltrto nhkg. Tcri rnxhtkj lzkoitbrg jss kxbtymnd ryyivbqn yjfv yydsldmw zuoy abfduhf chkbzzltdr tsfoh arkhtmbi. Hegjcqn vufnifrf opfxhbm nqkuoh chgclqvf irjpji uafmxjt fjhpjtby sybvjo xhstbpi tebcv pvfexmwgxx xfacci xnkqnij yysrepxvbr uermcpl cpoxyqzacm.",
    "句子": "Avtigmpj rgfocf iefnjw atuceo ild bledzp bwldvxihuh ledwbwpoo xrrdb kwewsm uoffu ymffqdwlk lidf qvdrpnc xmu txg mpheymd."
}

就是这么简单，不要怀疑自己的智商，不过还有一些模拟图片之类的我没有举例出来，因为渲染不出来.

拦截/模拟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>

参考官方链接github.com/nuysoft/Moc…