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…