mock.js那點事(上)

乘風gg發表於2017-04-21
MockJS

耐心看完，我保證十五分鐘就能學會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…

相關文章