Mockjs,不再用追着後端小夥伴要接口了

時間 2019-11-07

標籤 mockjs 不再追着後端夥伴接口欄目應用數學简体版

原文原文鏈接

相信你們都存在這樣的一個困擾,在先後端分離的大環境下,
前端須要後端的接口去完成頁面的渲染,
可是大部分的狀況下,先後端須要同時進行開發,
這種狀況下,後端還沒完成數據輸出，前端只好寫靜態模擬數據。html

那麼問題就來了

數據太長了，將數據寫在js文件裏，完成後挨個改url。前端
某些邏輯複雜的代碼，加入或去除模擬數據時得當心翼翼。node
想要儘量還原真實的數據，要麼編寫更多代碼，要麼手動修改模
擬數據。jquery
特殊的格式，例如IP,隨機數，圖片，地址，須要去收集。webpack

前幾天看到mock.js的一些介紹,而後本身寫了個案列跑起來了,發現仍是比較實用的,因此這邊整理出文章,推薦給你們

mock案例-github地址git

1.mock是什麼？

mock官網github

mock官網介紹截圖

2.mock能夠模擬哪些數據?

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

mock示例文檔web

直接附上代碼ajax

// 使用 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');複製代碼