現在開發已經是前後端分離了，前端和後端可以同時進行開發，互不影響，但是有些時候後端開發的接口慢於前端，導致前端需要等待後端的接口完成才能完成前後端對接，爲了解決這個痛點，出現了模擬接口數據的方案，目前行業中主要有四種方案來模擬後端放回的數據：
- 暴力式，直接在前端代碼中寫入模擬數據，但是這種缺點很明顯，改變了代碼的原有邏輯，嵌入式太深，耦合性搞
- 攔截式，這就是本文主要推薦的方式，通過攔截ajax請求，然後重定向到項目中的某個js文件，從js文件中獲取各種僞造的數據
- Mock Server，就是搭建一個Mock服務器來模擬數據，根據這個服務器來生產需要的接口數據，很顯然這種成本有點高，不適合任何人，特別是大型的團隊，文檔的編寫，接口的變更，通知到每一個人，代價就比較大了
- Mock 平臺，比如市面上RAP，但是需要後端使用他，未必所有的後端都願意使用他
Mock.js：生成隨機數據，攔截 Ajax 請求，Mock.js 通過覆蓋和模擬原生 XMLHttpRequest 的行爲來攔截 Ajax 請求，“轉發”到本地文件，所謂轉發，其實就是讀取本地 mock文件，並以json或者script等格式返回給瀏覽器。 
Mock.js具有以下幾個特點：
- 讓前端攻城師獨立於後端進行開發,前後端可以同時進行。
- 不需要修改既有代碼，就可以攔截 Ajax 請求，返回模擬的響應數據。
- 支持生成隨機的文本、數字、布爾值、日期、郵箱、鏈接、圖片、顏色等。
- 通過隨機數據，模擬各種場景。
安裝
# 推薦通過npm安裝
npm install mockjs使用示例
// 首先在js文件中引進
var Mock = require('mockjs')
var data = Mock.mock({
// 屬性 list 的值是一個數組，其中含有 1 到 10 個元素
'list|1-10': [{
// 屬性 id 是一個自增數，起始值爲 1，每次增 1
'id|+1': 1
}]
})語法
主要可以分成以下兩個方面：
- 數據模板定義規範
- 據佔位符定義規範
數據模板中的每個屬性由 3 部分構成：屬性名、生成規則、屬性值：'name|rule': value
- 'name|min-max': string=>通過重複 string 生成一個字符串，重複次數大於等於 min，小於等於 max)
- 'name|count': string=>通過重複 string 生成一個字符串，重複次數等於 count
- 'name|+1': number=>屬性值自動加 1，初始值爲 number
- 'name|min-max': number=>生成一個大於等於 min、小於等於 max 的整數，屬性值 number 只是用來確定類型
- 'name|count': object=>定對象中隨機選擇兩條數據，
Mock.mock({
"object|2": {
"310000": "上海市",
"320000": "江蘇省",
"330000": "浙江省",
"340000": "安徽省"
}
})輸出爲：
{
"object": {
"320000": "江蘇省",
"330000": "浙江省"
}
}
數據佔位符定義規範 DPD
佔位符 只是在屬性值字符串中佔個位置，並不出現在最終的屬性值中。
- 來標識其後的字符串是 佔位符。
- 符 引用的是 Mock.Random 中的方法。
- Mock.Random.extend() 來擴展自定義佔位符。
- 符 也可以引用 數據模板 中的屬性。
- 符 會優先引用 數據模板 中的屬性。
- 符 支持 相對路徑 和 絕對路徑。
可以通過Mock.setup( settings )，配置攔截 Ajax 請求時的行爲。支持的配置項有：timeout
指定被攔截的 Ajax 請求的響應時間，單位是毫秒。值可以是正整數，例如 400，表示 400 毫秒 後纔會返回響應內容；也可以是橫槓 '-' 風格的字符串，例如 '200-600'，表示響應時間介於 200 和 600 毫秒之間。默認值是'10-100'。
Mock.setup({
timeout: 400
})
Mock.setup({
timeout: '200-600'
})