前端工具mock的使用 - 造數據模擬網絡請求

　　先後端同步開發過程當中，有時候前端頁面完成了，須要等待後端接口完成部署後才能聯調。

這個時候若是不想等待，想本身造數據模擬網絡請求，這種狀況就能用到mock工具了。

　　mock工具能夠用在web網站，也能用在小程序中。先介紹下操做步驟(以windows環境爲例)：

一、cmd打開終端，安裝mock插件，全局生效：

npm i @shymean/mock-server -g

二、插件安裝完成後，而後在磁盤中隨便一個地方新建一個文件夾，命名爲mock;

　　在mock文件裏面新建一個_mock.js空文件；

　　在終端進入mock文件夾，輸入命令mock, 啓動本地mock服務器，默認端口爲7654，操做步驟如圖：

　　

　　

三、在_mock.js中寫測試列子，開始測試。　

//用戶信息
Mock.mock(/userInfo/, {
  status: 200,
  data:{
    userName: "王大錘",
    userSign: "石破天錘，地動山搖;"
  }
})

//版本信息
Mock.mock(/storeInfo/, { "code": "000000", "data": { "orgXcxType": 3, "topOrgId": 89043, "orgName": "專業版小程序測試89043", "postType": 1, "orgLevel": 1, "orgFullName": "手邊加盟店", "userName": "8904300001", "userId": 683, "orgId": 89043, "orgType": 3, "mobilePhone": null, "staffName": "簡歷", "userType": 2, "staffId": 683 }, "currentTimes": 1532436470527, "msg": "操做成功" })

//測試屬性值爲字符串/數值/布爾類型
Mock.mock(/testOne/, {
  'list|10':[{     //10表示list數組長度爲10，即這個數組有10個元素
    'id|+1': 3,   //初始值爲3，每次加1 
    'score|1-99.0-2': 0, //產生浮點數，整數部分在1-99之間；小數位數最多保留2位，最少不保留位數
    'exp|0-10.1': 0, //產生一個浮點數，浮點數小數保留1位
    'age|18-60': 0,   //產生一個整數，數的值在18-60之間
    'info|0-5': '大錘,',   //重複"大錘「，重複的次數爲0-5次之間
    'isOK|1': false  //隨機生成一個布爾值，值爲true和false的機率都是1/2
  }]
});
//測試屬性值是對象 Object
Mock.mock(/testTwo/, {
  'list|10': [{ 
    'id|+1': 3,
    'obj|3':{ height: 180, weight: 75, age: 18, sex: '男', grade: 3 }
  }]
});
//測試屬性值爲數組 Array
Mock.mock(/testThree/, { 
  'list|3': [{ 
    'team|1': [{name:'小明', age:22}, { name: '小紅', age: 18}, {name: '小龍', age: 21}],
    'org|+1': [{ name: '小明', age: 22 }, { name: '小紅', age: 18 }, { name: '小龍', age: 21 }],
    'fac|0-5': [{ name: '小明', age: 22 }, { name: '小紅', age: 18 }],
    'state|2': [{ name: '小明', age: 22 }, { name: '小紅', age: 18 }],
  }]
});
//測試屬性值爲function和正則RegExp
Mock.mock(/testFour/, {
  'list|3': [{
    'name': function(){
      return parseInt(Math.random()*100)%2 == 0 ? '王大錘' : '羅小虎'
    },
    'regOne': /[a-z][A-Z]\d\s\w\W\d{1,5}/,
    'regTwo': /\d{3}\w{3}\d{2}\?{1,3}/
  }]
});

 

四、先在小程序中進行測試模擬網絡請求：

//測試mock
  testMock: function(){

      var host = 'http://127.0.0.1:7654/'
      //testOne : 測試數據模板屬性值爲字符串和數值
      wx.request({
        url: host + 'testOne',
        success: function(data){
          console.log("..testOne...")
          console.log(data)
        }
      })

    //testTwo: 測試數據模板屬性值爲對象
    wx.request({
      url: host + 'testTwo',
      success: function (data) {
        console.log("..testTwo...")
        console.log(data)
      }
    })

    //testThree : 測試數據模板屬性值爲數組
    wx.request({
      url: host + 'testThree',
      success: function (data) {
        console.log("..testTwo...")
        console.log(data)
      }
    })

    //testFour ： 測試模板數據屬性值爲function和正則Reg
    wx.request({
      url: host + 'testFour',
      success: function (data) {
        console.log("..testFour...")
        console.log(data)
      }
    })

    wx.request({
      url: host + 'userInfo',
      success: function (data) {
        console.log("...success...")
        console.log(data)

      },
      fail: function (err) {
        console.log(".....fail...")
        console.log(err)
      },
      complete: function (data) {
        console.log("....complte...")
        console.log(data);
      }
    })

    //第二個請求
    wx.request({
      url: host + 'storeInfo',
      success: function (data) {
        console.log("....success....")
        console.log(data)
      },
      fail: function (err) {
        console.log(".....fail...")
        console.log(err)
      }
    })

  },

五、測試結果如圖：

 

六、同理在web網頁中進行網絡請求http://127.0.0.1:7654/+接口名，

　　請求也會被mock服務器攔截，從而去_mock.js中查找對應的數據。

//測試mock
    testMock(){
        var host = 'http://127.0.0.1:7654/'
        
        $.ajax(host + 'testOne', {
            success: function(res){
                console.log(res)
            }
        })

        $.ajax(host + 'testTwo', {
            success: function(res){
                console.log(res)
            }
        })

        $.ajax(host + 'testThree', {
            success: function(res){
                console.log(res)
            }
        })

        $.ajax(host + 'testFour', {
            success: function(res){
                console.log(res)
            }
        })
    }

View Code

經過瀏覽器控制咱們也能看到請求成功

 

若是想更深刻的瞭解學習mock, 見github官方文檔：https://github.com/nuysoft/Mock/wiki

/**
 數據模板定義規範 DTD
// 屬性名   name
// 生成規則 rule
// 屬性值   value
'name|rule': value

屬性名 和 生成規則 之間用豎線 | 分隔。
生成規則 是可選的。
生成規則 有 7 種格式：
'name|min-max': value //經過重複value生成一個字符串，重複次數>=min, <max ;value用來肯定類型，字符串表示生成字符串，數值只能表示這個是 數字類型
'name|count': value  //重複value生成一個字符串，重複次數count
'name|min-max.dmin-dmax': value  //生成一個浮點數，整數部分>=min，<max；小數部分保留dmin到dmax位
'name|min-max.dcount': value  //整數部分>=min,<max； 小數部分保留dcount位小數
'name|count.dmin-dmax': value  //多少個數，小數部分最少保留dmin位數，最多保留dmax位數
'name|count.dcount': value    //多少個數，保留dcount位小數
'name|+step': value   //屬性值自動加step, 初始值爲value

生成規則 的 含義 須要依賴 屬性值的類型 才能肯定。
屬性值 中能夠含有 @佔位符。
屬性值 還指定了最終值的初始值和類型。


1. 屬性值是字符串 String
  1.一、'name|min-max': string
    經過重複 string 生成一個字符串，重複次數大於等於 min，小於等於 max。
  1.二、'name|count': string
    經過重複 string 生成一個字符串，重複次數等於 count。

2. 屬性值是數字 Number
  2.一、'name|+1': number
    屬性值自動加 1，初始值爲 number。
  2.二、'name|min-max': number
    生成一個大於等於 min、小於等於 max 的整數，屬性值 number 只是用來肯定類型。
  2.三、'name|min-max.dmin-dmax': number
    生成一個浮點數，整數部分大於等於 min、小於等於 max，小數部分保留 dmin 到 dmax 位。

3. 屬性值是布爾型 Boolean
  3.一、'name|1': boolean
    隨機生成一個布爾值，值爲 true 的機率是 1/2，值爲 false 的機率一樣是 1/2。
  3.二、'name|min-max': value
    隨機生成一個布爾值，值爲 value 的機率是 min / (min + max)，值爲 !value 的機率是max / (min + max)。

4. 屬性值是對象 Object
  4.一、'name|count': object
    從屬性值 object 中隨機選取 count 個屬性。
  4.二、'name|min-max': object
    從屬性值 object 中隨機選取 min 到 max 個屬性。

5. 屬性值是數組 Array
  5.一、'name|1': array
    從屬性值 array 中隨機選取 1 個元素，做爲最終值。
  5.二、'name|+1': array
    從屬性值 array 中順序選取 1 個元素，做爲最終值。
  5.三、'name|min-max': array
    經過重複屬性值 array 生成一個新數組，重複次數大於等於 min，小於等於 max。
  5.四、'name|count': array
    經過重複屬性值 array 生成一個新數組，重複次數爲 count。

6. 屬性值是函數 Function
  6.一、'name': function
    執行函數 function，取其返回值做爲最終的屬性值，函數的上下文爲屬性 'name' 所在的對象。

7. 屬性值是正則表達式 RegExp
  7.一、'name': regexp
    根據正則表達式 regexp 反向生成能夠匹配它的字符串。用於生成自定義格式的字符串。

 */