現在開發已經是前后端分離了，前端和后端可以同時進行開發，互不影響，但是有些時候后端開發的接口慢於前端，導致前端需要等待后端的接口完成才能完成前后端對接，為了解決這個痛點，出現了模擬接口數據的方案，目前行業中主要有四種方案來模擬后端放回的數據：
- 暴力式，直接在前端代碼中寫入模擬數據，但是這種缺點很明顯，改變了代碼的原有邏輯，嵌入式太深，耦合性搞
- 攔截式，這就是本文主要推薦的方式，通過攔截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 }] })資源搜索網站大全 http://www.szhdn.com 廣州VI設計公司https://www.houdianzi.com
語法
主要可以分成以下兩個方面：
- 數據模板定義規范
- 據占位符定義規范
數據模板中的每個屬性由 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' })