Mockjs,再也不用追著後端小夥伴要介面了

小錢錢阿聖發表於2017-08-22
MockJS後端

相信大家都存在這樣的一個困擾,在前後端分離的大環境下,
前端需要後端的介面去完成頁面的渲染,
但是大部分的情況下,前後端需要同時進行開發,
這種情況下,後端還沒完成資料輸出，前端只好寫靜態模擬資料。

那麼問題就來了

  • 資料太長了，將資料寫在js檔案裡，完成後挨個改url。

  • 某些邏輯複雜的程式碼，加入或去除模擬資料時得小心翼翼。

  • 想要儘可能還原真實的資料，要麼編寫更多程式碼，要麼手動修改模
    擬資料。

  • 特殊的格式，例如IP,隨機數，圖片，地址，需要去收集。

前幾天看到mock.js的一些介紹,然後自己寫了個案列跑起來了,發現還是比較實用的,所以這邊整理出文章,推薦給大家

mock案例-github地址

1.mock是什麼？

mock官網

mock官網介紹截圖
mock官網介紹截圖

2.mock可以模擬哪些資料?

  • string
  • number
  • bool
  • array
  • object
  • guid
  • id
  • title
  • paragraph
  • image
  • address
  • date
  • time
  • url
  • email
  • ip
  • regexp

mock示例文件

直接附上程式碼

// 使用 Mock
let Mock = require('mockjs');
Mock.mock('http://1.json','get',{
    // 屬性 list 的值是一個陣列，其中含有 1 到 3 個元素
    'list|1-3': [{
        // 屬性 sid 是一個自增數，起始值為 1，每次增 1
        'sid|+1': 1,
        // 屬性 userId 是一個5位的隨機碼
        'userId|5': '',
        // 屬性 sex 是一個bool值
        "sex|1-2": true,
        // 屬性 city物件 是物件值中2-4個的值
        "city|2-4": {
            "110000": "北京市",
            "120000": "天津市",
            "130000": "河北省",
            "140000": "山西省"
        },
        //屬性 grade 是陣列當中的一個值
        "grade|1": [
            "1年級",
            "2年級",
            "3年級"
        ],
        //屬性 guid 是唯一機器碼
        'guid': '@guid',
        //屬性 id 是隨機id
        'id': '@id',
        //屬性 title 是一個隨機長度的標題
        'title': '@title()',
        //屬性 paragraph 是一個隨機長度的段落
        'paragraph': '@cparagraph',
        //屬性 image 是一個隨機圖片 引數分別為size, background, text
        'image': "@image('200x100', '#4A7BF7', 'Hello')",
        //屬性 address 是一個隨機地址
        'address': '@county(true)',
        //屬性 date 是一個yyyy-MM-dd 的隨機日期
        'date': '@date("yyyy-MM-dd")',
        //屬性 time 是一個 size, background, text 的隨機時間
        'time': '@time("HH:mm:ss")',
        //屬性 url 是一個隨機的url
        'url': '@url',
        //屬性 email 是一個隨機email
        'email': '@email',
        //屬性 ip 是一個隨機ip
        'ip': '@ip',
        //屬性 regexp 是一個正規表示式匹配到的值 如aA1
        'regexp': /[a-z][A-Z][0-9]/,
    }]
})複製程式碼

3.如何攔截ajax請求

mock文件

Mock.mock( rurl, rtype, template )

如 Mock.mock('1.json','get',{
   'sid|+1': 1,
} )
記錄資料模板。當攔截到匹配 rurl 和 rtype 的 Ajax 請求時，
將根據資料模板 template 生成模擬資料，並作為響應資料返回。複製程式碼

注:從 1.0 開始，Mock.js 通過覆蓋和模擬原生 XMLHttpRequest 的行為來攔截 Ajax 請求，不再依賴於第三方 Ajax 工具庫（例如 jQuery、Zepto 等）。

4.案例程式碼

mock案例-github地址

用webpack 搭建了一個環境,mock檔案裡面放入跟後端定義好的介面模型和配置入口檔案 引入需要的mock.js 檔案 

process.env.NODE_ENV=='mock' && require('./mock/1.js');
process.env.NODE_ENV=='mock' && require('./mock/2.js');
var $ = require('jquery');
$(function () {
    /**
     * 請求1 get 請求
     */
    $.ajax({
        url: 'http://1.json',
        type: 'get'
    }).done(function(data,status){
        console.log('我是請求1'+data)
    })

    /**
     * 請求2 post 請求
     */
    $.ajax({
        url: 'http://2.json',
        type: 'post'
    }).done(function(data,status){
        console.log('我是請求2'+data)
    })
})複製程式碼

專案截圖
專案截圖

5. 如何在後端介面完成的時候,取消mock資料

new webpack.DefinePlugin({
       'process.env': {
            NODE_ENV: '"mock"'
       }
}),
process.env.NODE_ENV=='mock' && require('./mock/1.js');
process.env.NODE_ENV=='mock' && require('./mock/2.js');複製程式碼

根據webpack環境,在需要mock的時候,配置環境為mock,
在不需要mock的時候,只需要修改node_env 環境就可以了
無需註釋程式碼,就可以完美解決後端介面還沒完成的情況。

相關文章