接口拦截及数据模拟方案:Mock.js
Mock.js
以下任何示例界面已部署，大家可點(diǎn)擊使用，地址如下：mock轉(zhuǎn)換演示地址
注意：mock.js在接收文件流時，會攔截轉(zhuǎn)換，導(dǎo)致請求返回的文件流數(shù)據(jù)異常，無法轉(zhuǎn)為正確的文件，需要關(guān)閉才可以
什么是Mock.js
在我們開發(fā)中，經(jīng)常能碰見這樣的問題：前端開發(fā)的進(jìn)度快于后端接口的開發(fā)，這種情況之下，前端通常只能等待后端接口開發(fā)完畢或者依據(jù)后端提供的接口文檔將數(shù)據(jù)在代碼中寫死，前者會浪費(fèi)前端大量人力，而第二種會很麻煩（少量數(shù)據(jù)還勉強(qiáng)能造出來，但是需要較多的數(shù)據(jù)測試的話，尤其是造一些非文本類數(shù)據(jù)會特別麻煩），因此 MockJs 就是為了優(yōu)化這一流程而出現(xiàn)的。
那 MockJs 到底是干什么的呢？
官網(wǎng)首頁已經(jīng)說的很清楚明了：生成隨機(jī)數(shù)據(jù)，攔截 Ajax 請求。也就是說，它類似于代理工具，當(dāng)前我們的代理工具有很多，基于瀏覽器插件的有 Proxy SwitchOmega，獨(dú)立以軟件存在的有 Fiddler 、Rythem 等，這些都能夠滿足上述的需求，那 MockJs 有什么優(yōu)點(diǎn)呢？我們將會通過構(gòu)建一個嵌入 MockJs 項(xiàng)目來一起了解這個工具。
規(guī)則了解
在實(shí)際操作之前，我們需要對 MockJs 數(shù)據(jù)生成規(guī)則做一些了解，整體來說，MockJs 整體生成數(shù)據(jù)的規(guī)則都是使用表達(dá)式模式，輸入指定表達(dá)式，通過 Mock.mock 方法就可以生成相對應(yīng)的數(shù)據(jù)。
表達(dá)式結(jié)構(gòu)分為數(shù)據(jù)key、數(shù)據(jù)規(guī)則及基礎(chǔ)數(shù)據(jù)三個模塊，數(shù)據(jù)key代表生成數(shù)據(jù)后的key值，數(shù)據(jù)規(guī)則代表數(shù)據(jù)生成的規(guī)則，基礎(chǔ)數(shù)據(jù)作用與生成規(guī)則有關(guān)，部分規(guī)則需要與基礎(chǔ)數(shù)據(jù)結(jié)合共同表達(dá)，例如："string|3": "★★★" 數(shù)據(jù)key為 string ，規(guī)則為生成 ★★★ 三次，最后生成結(jié)果為：{string: "★★★★★★★★★"} ，而如果規(guī)則不需要與基礎(chǔ)數(shù)據(jù)結(jié)合共同表達(dá)，則基礎(chǔ)數(shù)據(jù)的作用就剩下了表表明數(shù)據(jù)類型的作用，例如："number|1-100": 100 此時我們需要生成一個 1 - 100 的數(shù)字，100 告訴的 mock 這個數(shù)據(jù)類型是Number 類型的，具體的數(shù)據(jù)規(guī)則如下：
常見數(shù)據(jù)類型操作有三種：分別是范圍 1-10 、 遞增 +1 、常量重復(fù)或?qū)ο箅S機(jī)抽取 3
| 字符串隨機(jī)重復(fù) | key|數(shù)字范圍: 字符串 | “String|1-10”: "Mock " | { String: 'Mock Mock Mock Mock Mock Mock ’ } |
| 字符串重復(fù) | key|數(shù)字: 字符串 | “String|2”: "Mock " | { String: 'Mock Mock ’ } |
| 數(shù)字遞增 | key|+數(shù)字: 數(shù)字 | ‘rows|2’: [{‘id|+1’: 0,}] | [ {“id”: 0},{“id”: 1} ] |
| 隨機(jī)整數(shù) | key| 數(shù)字范圍: 數(shù)字 | “number|1-100”: 100 | { “number”: 64 } |
| 隨機(jī)非整數(shù) | key|數(shù)字范圍.精確度范圍: 數(shù)字 | “random|1-100.1-10”: 1 | { “random”: 14.24846 } |
| 隨機(jī)布爾值 | key|1: 布爾值 | “boolean|1”: true | { “boolean”: false } |
| 固定數(shù)量隨機(jī)枚舉 | key|數(shù)字: 對象列表 | “object|1”: { “310000”: “上海市”, “320000”: “江蘇省”, “330000”: “浙江省” } | “object”: { “310000”: “上海市” } |
| 隨機(jī)數(shù)量隨機(jī)枚舉 | key|數(shù)字范圍: 對象列表 | “object|1-3”: { “110000”: “北京市”, “120000”: “天津市”, “130000”: “河北省” } | “object”: { “120000”: “天津市”, “130000”: “河北省” } |
| 數(shù)組內(nèi)隨機(jī)取數(shù)據(jù) | key|數(shù)字: 數(shù)組 | “array|1”: [ “AMD”, “CMD”, “UMD” ] | { “array”: “AMD” } |
| 數(shù)組內(nèi)遞增取數(shù)據(jù) | key|+數(shù)字: 數(shù)組 | “array|+1”: [ “AMD”, “CMD”, “UMD” ] | { “array”: “UMD” } |
| 隨機(jī)長度數(shù)組 | key|數(shù)字范圍: 數(shù)組 | ‘a(chǎn)rray|2-5’: [‘a(chǎn)rray’] | { “array”: [‘a(chǎn)rray’, ‘a(chǎn)rray’, ‘a(chǎn)rray’] } |
| 隨機(jī)長度對象數(shù)組 | key|數(shù)字范圍: 對象數(shù)組 | ‘a(chǎn)rray|2-5’: [{‘obj’: 1}] | { “array”: [{obj: 1}, {obj: 1}] } |
| 函數(shù)處理 | {值定義, 處理函數(shù)定義} | { ‘foo’: ‘Syntax Demo’, ‘name’: function() { return this.foo + 111 } } | { “foo”: “Syntax Demo”, “name”: “Syntax Demo111” } |
| 正則生成數(shù)據(jù) | key: 正則 | ‘regexp’: /\w\W\s\S\d\D/ | { “regexp”: “w@\rs2|” } |
| 變量使用 | {變量聲明, @變量} | {“foo”: “Hello”, “nested”: { “a”: { “b”: { “c”: “Mock.js” } } }, “absolutePath”: “@/foo @/nested/a/b/c”} | { “foo”: “Hello”, “nested”: {“a”: {“b”: {“c”: “Mock.js” }}},“absolutePath”: “Hello Mock.js” } |
| 隨機(jī)整數(shù) | key: @integer( 最小, 最大 ) | random: ‘@integer(1, 9)’ | {random: 2} |
| 隨機(jī)字符 | key: @character(字符描述) | character: ‘@character(“upper”)’ | {character: ‘N’} |
| 隨機(jī)字符串 | key: @string(字符描述, 長度) | string: ‘@string(“l(fā)ower”, 5)’ | {string: ‘lvyki’} |
| 范圍內(nèi)數(shù)字?jǐn)?shù)組 | key: @range(開始值，結(jié)束值，跳躍值) | array: ‘@range(1, 10, 3)’ | { array: [1, 4, 7] } |
| 隨機(jī)日期 | key: @date(格式) | date: ‘@date(“yyyyMMdd”)’ | {date: ‘20030515’} |
以下方法主要生成常見或者有固定規(guī)則的數(shù)據(jù)
| 隨機(jī)id | @id | id: ‘@id’ | { id: “360000199504157347” } |
| 生成guid | @guid | guid: ‘@guid’ | { guid: “D2f1158d-B413-BF71-eFe9-52EBBbA7BAae” } |
| 全局自增長數(shù)字 | @increment(跨度) | increment: ‘@increment(100)’ | { increment: 103} |
| 圖片生成連接 | Random.image() | Random.image() | ‘http://dummyimage.com/240x400’ |
| 圖片base64 | Random.dataImage() | Random.dataImage() | |
| 隨機(jī)16進(jìn)制顏色 | @color | color: ‘@color’ | {color: ‘#f279a6’} |
| 大量英文文本 | @paragraph | paragraph: ‘’@paragraph’’ | |
| 大量中文文本 | @cparagraph | cparagraph: ‘’@cparagraph’’ | |
| 模擬域名 | @url | url: ‘’@url’ | { url: “http://ljjtwm.fi/bzxpdy” } |
| 模擬email | email: ‘@email’ | { email: “y.aikj@ped.mobi”} | |
| 模擬IP地址 | @ip | ip: ‘@ip’ | { ip: “211.214.230.62”} |
| 模擬地域 | @region | region: ‘@region’ | { region: “西北” } |
| 省份 | @province | province: ‘@province’ | { province: “廣西壯族自治區(qū)” } |
| 市級 | @city(是否前綴) | city: ‘@city(true)’ | { city: “上海 上海市” } |
| 縣級 | @county(是否前綴) | county: ‘@county(true)’ | { county: “廣西壯族自治區(qū) 南寧市 良慶區(qū)” } |
以下方法主要適合其他需求的工具
| 首字母大寫 | @capitalize(英文) | hello: ‘@capitalize(“hello”)’ | { hello: “Hello” } |
| 全部大寫 | @upper(英文) | upper: ‘@upper(“hello”)’ | { upper: “HELLO” } |
| 全部小寫 | @lower(英文) | hello: ‘@lower(“HELLO”)’ | { hello: “hello” } |
| 數(shù)組洗牌 | @shuffle(數(shù)組) | array: ‘@shuffle([“a”, “e”, “i”, “o”, “u”])’ | { array: [“e”,“i”,“a”,“u”,“o”] } |
MockJs使用
首先，我們需要準(zhǔn)備一套前端框架，在這里我使用腳手架生成一個 vue 框架，具體生成流程請參照 Vue2.0 搭建Vue腳手架（vue-cli）
項(xiàng)目使用 element 組件，需要提前配置，在此不做描述
下面給出的例子都將上傳至 git上，地址將在文章最后給出，大家如果需要源碼可自取
安裝 mockjs ：
npm install mockjs后面涉及到代碼編輯及 ajax 請求，所以安裝一個代碼編輯組件及 axios ：
npm install codemirror npm install axios初級使用：通過方法生成數(shù)據(jù)
首先我們要介紹的是 mockjs 的最基礎(chǔ)用法：使用 Mock.mock 方式生成單條模擬數(shù)據(jù)，在接口文檔確定的情況下，我們可以使用 mockjs 去模擬生成與文檔預(yù)期相同的對象，這種使用方法適合表格類或信息展示類界面，能夠快速輕便的生成符合預(yù)期的界面填充數(shù)據(jù)。
為了展示這個功能，我們搭建一個界面：首先，我們搭建一個界面，界面結(jié)構(gòu)分為三塊：頭部展示描述信息、左側(cè)放置可編輯 mock 范式的編輯器、右側(cè)放置生成的數(shù)據(jù)。
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-TzdDd8kl-1638797452721)(.\img\page1.bmp)]
架構(gòu)代碼如下：
<template><div class="container"><el-page-header @back="goBack" content="初級使用"></el-page-header><div class="title">mock初級使用方式為Mock函數(shù)的使用，我們通過調(diào)用Mock.mock方法及自帶屬性，生成想要的數(shù)據(jù)</div><div class="title bold">key值請用引號包裹</div><div class="title bold">最后一個對象及數(shù)組后面請勿添加,否則會報錯</div><el-divider></el-divider><div class="box-container"><div class="code"><textarea ref="textarea"></textarea><el-button class="format" @click="format">格式化</el-button></div><el-button class="button" @click="transfer">生成</el-button><div class="reslut"><textarea ref="showText"></textarea></div></div></div> </template><style scoped lang="less"> .container {.title {text-align: center;}.bold {font-weight: 800;color: red;}span {margin: 0 auto;}.box-container {display: flex;align-items: center;div {height: 300px;display: inline-block;}.button {height: 40px;margin: 0 5px;}.code {flex: 1;width: 40%;}.operation {width: 15%;}.reslut {flex: 1;width: 40%;border: 1px solid #DCDFE6;overflow: auto;}} } </style>引入 codemirror 代碼展示器、 mockjs 、axios ：
import _CodeMirror from 'codemirror' // 核心樣式 import 'codemirror/lib/codemirror.css' // 引入主題后還需要在 options 中指定主題才會生效 import 'codemirror/theme/cobalt.css' import 'codemirror/mode/javascript/javascript.js' import Mock from 'mockjs' // 嘗試獲取全局實(shí)例 const CodeMirror = window.CodeMirror || _CodeMirrormounted 構(gòu)建時初始化兩個編輯器
// 初始化編輯器實(shí)例，傳入需要被實(shí)例化的文本域?qū)ο蠛湍J(rèn)配置 this.coder = CodeMirror.fromTextArea(this.$refs.textarea, this.options) // 編輯器賦值 this.coder.setValue(this.code) // 支持雙向綁定 this.coder.on('change', (coder) => {this.code = coder.getValue() })// 初始化編輯器實(shí)例，傳入需要被實(shí)例化的文本域?qū)ο蠛湍J(rèn)配置 this.coderShow = CodeMirror.fromTextArea(this.$refs.showText, {...this.options, readOnly: 'nocursor'})此時界面如圖所示：
左邊編輯器為范式輸入內(nèi)容，點(diǎn)擊生成可在右側(cè)生成相應(yīng)結(jié)果
生成功能就用到了我們的 MockJs 了，代碼如下：
transfer () {// 將所有單引號變?yōu)殡p引號，去除文本中的換行let codeDouble = this.code.replace(/'/g, '"')codeDouble = codeDouble.replace(/\/ +/g, '')codeDouble = codeDouble.replace(/[\r\n]/g, '')try {// 將文本轉(zhuǎn)化為對象并使用Mock.mock生成結(jié)果let code = JSON.parse(codeDouble)this.resultCode = Mock.mock(code)// 將結(jié)果做多次轉(zhuǎn)換之后放入展示編輯器內(nèi)let resStr = JSON.stringify(this.resultCode)this.coderShow.setValue(JSON.stringify(JSON.parse(resStr), null, 4))} catch (error) {// 當(dāng)解析失敗時，彈出彈窗提示this.$message({message: '解析失敗，請檢查代碼是否符合規(guī)范',type: 'warning'})} },在我們點(diǎn)擊生成事件之后，去除左側(cè)編輯器內(nèi)內(nèi)容并將其轉(zhuǎn)化為較規(guī)范的字符串，再將其轉(zhuǎn)化為可用于生成數(shù)據(jù)的對象，最后放入右側(cè)的展示編輯器中（注：放入編輯器之前為什么要將數(shù)據(jù)在對象與字符串來回的轉(zhuǎn)化，因?yàn)?MockJs 生成的數(shù)據(jù)是沒有換行和縮進(jìn)格式的數(shù)據(jù)，如果直接賦值，會導(dǎo)致生成的數(shù)據(jù)擠到一起，很不美觀，所以我們通過這種方式將其展示標(biāo)準(zhǔn)化）
最后我們實(shí)現(xiàn)的效果如圖所示：
進(jìn)階使用：攔截請求模擬數(shù)據(jù)
上面有講到我們?nèi)绾卧陂_發(fā)時使用 MockJs 去生成需要的模擬數(shù)據(jù)，但是比較麻煩的事，這樣生成代碼模擬不出來請求返回的效果（因?yàn)檎埱笫钱惒降?#xff0c;有可能會引起一些錯誤的交互邏輯），那有什么辦法將數(shù)據(jù)模擬成請求的方式呢？
那么就得提到 Mock.mock 另一個使用方式了，那就是請求攔截，使用方式大致為：
Mock.mock(接口或正則, 請求類型, Mock范式)為了表現(xiàn)其功能，我們通過例子的方法去展示其特性：
界面風(fēng)格與上一個類似，我們左邊設(shè)置需要攔截的請求，包括請求的 url 、請求方法以及模擬數(shù)據(jù)格式，右側(cè)可以輸入相應(yīng)的請求，點(diǎn)擊發(fā)送即可看到攔截返回的數(shù)據(jù)，話不多說，先上界面結(jié)構(gòu)的代碼：
<template><div class="container"><el-page-header @back="goBack" content="進(jìn)階應(yīng)用"></el-page-header><div class="title">mock中進(jìn)階應(yīng)用方式為：通過MockJs的方法攔截請求，并返回構(gòu)建的假數(shù)據(jù)</div><div class="title bold">key值請用引號包裹</div><div class="title bold">最后一個對象及數(shù)組后面請勿添加,否則會報錯</div><el-divider></el-divider><div class="container-body"><div class="box-container"><div class="title">攔截請求</div><div class="show-box"><el-input class="url" placeholder="請輸入攔截請求" v-model="interceptUrl" @change="interceptChange"><template slot="prepend">Http://</template></el-input><el-select class="method" v-model="interceptMethod" @change="interceptChange" placeholder="請選擇"><el-optionv-for="item in methodList":key="item":label="item":value="item"></el-option></el-select><div class="body-title">攔截范式：</div><textarea ref="interceptInput"></textarea></div></div><div class="box-container"><div class="title">發(fā)送請求</div><div class="show-box"><el-input class="url send-url" placeholder="請輸入請求" v-model="sendUrl"><template slot="prepend">Http://</template></el-input><el-select class="method" v-model="sendMethod" placeholder="請選擇"><el-optionv-for="item in methodList":key="item":label="item":value="item"></el-option></el-select><el-button type="primary" @click="send">發(fā)送</el-button><div class="body-title">返回結(jié)果：</div><textarea ref="resultInput"></textarea></div></div></div></div> </template> <style scoped lang="less"> .container {.title {text-align: center;}.bold {font-weight: 800;color: red;}.container-body {margin: 0 auto;.box-container {width: 47%;display: inline-block;padding: 1%;.show-box {padding-top: 10px;.url {width: 89%;}.method {width: 10%;}.body-title {margin: 10px 0px;}.send-url {width: 79%;}.send-button {width: 10%;}}}} } </style>界面初始化流程就不多說了：
import _CodeMirror from 'codemirror' // 核心樣式 import 'codemirror/lib/codemirror.css' // 引入主題后還需要在 options 中指定主題才會生效 import 'codemirror/theme/cobalt.css' import 'codemirror/mode/javascript/javascript.js' import Mock from 'mockjs' import axios from 'axios'// 嘗試獲取全局實(shí)例 const CodeMirror = window.CodeMirror || _CodeMirror初始化編輯器：
// 初始化編輯器實(shí)例，傳入需要被實(shí)例化的文本域?qū)ο蠛湍J(rèn)配置 this.interceptCoder = CodeMirror.fromTextArea(this.$refs.interceptInput, this.options) // 編輯器賦值 this.interceptCoder.setValue(this.interceptCode) // 支持雙向綁定 this.interceptCoder.on('change', (coder) => {this.interceptCode = coder.getValue()// 每一次改變重新配置攔截this.interceptChange() })// 初始化編輯器實(shí)例，傳入需要被實(shí)例化的文本域?qū)ο蠛湍J(rèn)配置 this.coderShow = CodeMirror.fromTextArea(this.$refs.resultInput, {...this.options, readOnly: 'nocursor'})接下來是重點(diǎn)部分，設(shè)置攔截及請求發(fā)送
// 設(shè)置攔截 interceptChange () {// 將所有單引號變?yōu)殡p引號，去除文本中的換行let codeDouble = this.interceptCode.replace(/'/g, '"')codeDouble = codeDouble.replace(/\/ +/g, '')codeDouble = codeDouble.replace(/[\r\n]/g, '')try {// 將文本轉(zhuǎn)化為對象并使用Mock.mock攔截請求let code = JSON.parse(codeDouble)Mock.mock(this.interceptUrl, this.interceptMethod, code)this.isTrue = true} catch (error) {this.isTrue = false} }, // 發(fā)送請求 send () {if (!this.isTrue) {this.$message({message: '范式解析失敗，請檢查范式是否符合規(guī)范',type: 'warning'})} else {axios[this.sendMethod](this.sendUrl, {}).then(res => {// 請求成功時，展示返回結(jié)果this.coderShow.setValue(JSON.stringify(res.data, null, 4))}).catch(error => {// 請求失敗時，展示錯誤this.coderShow.setValue(JSON.stringify(error.message, null, 4))})} }最終結(jié)果如下：
當(dāng)然，為了保障模擬更真實(shí)，我們可以設(shè)置延遲時間：
Mock.setup({timeout: '200-600', });高階使用：將攔截變?yōu)榭膳渲庙?xiàng)
通過上面的例子，我們可以使用 MockJs 去攔截并生成模擬數(shù)據(jù)，但是這種方法有幾個缺點(diǎn)：
- 一個界面會有很多請求，界面中要寫很多模擬相關(guān)的代碼，導(dǎo)致前期代碼過于臃腫
- 需要調(diào)試的時候，我們又要刪除這些模擬數(shù)據(jù)代碼，下次需要使用還得造
- 如果不小心把模擬數(shù)據(jù)代碼殘留下來，一旦發(fā)布出去界面功能將會失效
那么我們高階使用要做的有以下幾點(diǎn)：
- 模擬代碼單獨(dú)隔離
- 代碼可重復(fù)使用
- 模擬功能可開關(guān)
- 模擬代碼只在開發(fā)階段生效
我們的設(shè)計如下：我們將攔截信息設(shè)置為可配置的對象，將接口信息（請求方式|接口名稱）作為 key 值，mock 范式作為 value 值，結(jié)構(gòu)如下：
'post|/demo': {'name': '@cname' }在項(xiàng)目初始化的時候我們獲取所有的配置項(xiàng)，并通過 Mock.mock 方法添加攔截，這樣的話我們就做到了第一和第二兩個特點(diǎn)：在開發(fā)界面沒有多余代碼，代碼可重復(fù)使用，其實(shí)現(xiàn)方式如下：
// 代碼結(jié)構(gòu)： // - mockjs // - demo // - demo.js // - index.js // 使用Webpack的require.context()遍歷所有mock文件 const files = require.context('.', true, /\.js$/) files.keys().forEach((key) => {// 剔除配置文件if (key === './index.js') {return}// 將所有配置文件的對象放入數(shù)組中configArray = configArray.concat(files(key).default) })// 注冊所有的mock服務(wù) configArray.forEach((item) => {for (const [path, target] of Object.entries(item)) {// 將key拆解為請求方式及攔截路徑，并添加攔截const protocol = path.split('|')Mock.mock(new RegExp('^' + config.rootPath + protocol[1]), protocol[0], target)} })第三個特點(diǎn)的實(shí)現(xiàn)也比較簡單，我們添加一個配置文件 mock.config.js 其中添加開關(guān)配置項(xiàng) enableMock ，在上述代碼中添加一個判斷語句，根據(jù)是否打開開關(guān)決定是否解析并攔截請求。
那怎么做到只在生產(chǎn)環(huán)境生效呢？我們項(xiàng)目初始化后為了區(qū)分生產(chǎn)環(huán)境與開發(fā)環(huán)境，在config 文件夾下放置了兩個區(qū)分文件，分別是 dev.env.js 與 prod.env.js ，在文件中定義了不同的 NODE_ENV 參數(shù)，當(dāng)我們使用 npm run dev 命令時，系統(tǒng)讀取 dev.env.js 代碼，此時系統(tǒng)變量 process.env.NODE_ENV === ‘development’ 如果我們使用 npm run build 時 process.env.NODE_ENV === ‘production’ ，我們通過這個變量判斷當(dāng)前環(huán)境是否處于開發(fā)環(huán)境，然后在程序入口 main.js 中添加啟動 mockjs 解析語句：
if (process.env.NODE_ENV === 'development') {require('./mockjs/index') }這樣一來我們即使在打包時忘了關(guān)閉 mock 的開關(guān)，也不會影響到生產(chǎn)環(huán)境的接口調(diào)用，在這里我門也做了一個例子，具體代碼就不展示了，大家想看的話可以去我的 git 下拉取代碼，最后界面如下：
總結(jié)
對于 mockjs 的使用，是針對著一些常見的開發(fā)現(xiàn)象的，在開發(fā)時，我們經(jīng)常會遇到這種情況：前端早早的開發(fā)完畢，但是后端由于業(yè)務(wù)復(fù)雜，暫時提供不了數(shù)據(jù)，導(dǎo)致前端無法做一些操作代碼正確性驗(yàn)證，但是通過 mockjs 我們就不必再拘泥于后端數(shù)據(jù)，我們根據(jù)后端提供的接口文檔，就可以配置模擬出想要的數(shù)據(jù)，這樣我們在假的環(huán)境里能夠完整的調(diào)試我們的界面邏輯，能夠非常大的減少聯(lián)調(diào)周期。其次我們有時對于現(xiàn)場的特殊數(shù)據(jù)導(dǎo)致的前端問題，而后端構(gòu)建數(shù)據(jù)困難時，我們也可以使用 mockjs 去模擬這些數(shù)據(jù)，達(dá)到模擬現(xiàn)場環(huán)境的效果。
git地址：https://github.com/shiyingjieGra/mockJsWeb
句：
if (process.env.NODE_ENV === 'development') {require('./mockjs/index') }這樣一來我們即使在打包時忘了關(guān)閉 mock 的開關(guān)，也不會影響到生產(chǎn)環(huán)境的接口調(diào)用，在這里我門也做了一個例子，具體代碼就不展示了，大家想看的話可以去我的 git 下拉取代碼，最后界面如下：
總結(jié)
對于 mockjs 的使用，是針對著一些常見的開發(fā)現(xiàn)象的，在開發(fā)時，我們經(jīng)常會遇到這種情況：前端早早的開發(fā)完畢，但是后端由于業(yè)務(wù)復(fù)雜，暫時提供不了數(shù)據(jù)，導(dǎo)致前端無法做一些操作代碼正確性驗(yàn)證，但是通過 mockjs 我們就不必再拘泥于后端數(shù)據(jù)，我們根據(jù)后端提供的接口文檔，就可以配置模擬出想要的數(shù)據(jù)，這樣我們在假的環(huán)境里能夠完整的調(diào)試我們的界面邏輯，能夠非常大的減少聯(lián)調(diào)周期。其次我們有時對于現(xiàn)場的特殊數(shù)據(jù)導(dǎo)致的前端問題，而后端構(gòu)建數(shù)據(jù)困難時，我們也可以使用 mockjs 去模擬這些數(shù)據(jù)，達(dá)到模擬現(xiàn)場環(huán)境的效果。
git地址：https://github.com/shiyingjieGra/mockJsWeb
總結(jié)
以上是生活随笔為你收集整理的接口拦截及数据模拟方案:Mock.js的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 实用高效，27款腾讯热门开源项目推荐
- 下一篇： 腾讯出品的抓包工具Rythem