一、應用場景
在我們自己做一個項目時，會遇到后端還沒完成數據輸出或者接口沒寫好的情況。你沒有辦法想后台獲取數據，這時候需要前端只好自己寫靜態模擬數據（假數據）。mockjs就是用來創造假數據的，他的用法和從后端取數據是基本一樣的，基本的語法看下文，移步官方文檔。
如果數據太長了，將數據寫在js文件里，完成后挨個改url。某些邏輯復雜的代碼，加入或去除模擬數據時得小心翼翼。想要盡可能還原真實的數據，要么編寫更多代碼，要么手動修改模擬數據。特殊的格式，例如IP,隨機數，圖片，地址，需要去收集整理。
二、mock優點
1、前后端分離：讓前端工程師獨立於后端進行開發。
2、增加單元測試的真實性：通過隨機數據，模擬各種場景。
3、開發無侵入：不需要修改既有代碼，就可以攔截Ajax請求，返回模擬的響應數據。
4、用法簡單：符合直覺的接口。
5、數據類型豐富：支持生成隨機的文本、數字、布爾值、日期、郵箱、鏈接、圖片、顏色等。
6、方便擴展：支持支持擴展更多數據類型，支持自定義函數和正則。
7、在已有接口文檔的情況下，我們可以直接按照接口文檔來開發，將相應的字段寫好，在接口完成 之后，只需要改變url地址即可。
三、mock的基本使用
需要引用mock.js，引入方法其實和JQ這樣的類庫一樣。可以直接引入
//直接引入
<script src="http://mockjs.com/dist/mock.js"></script>
//在js簡單造數據
Mock.mock('http://g.cn',{
'name':'@NAME',
'color':'@COLOR',
'email':'@EMAIL'
})
//和JQ一起使用
$.ajax({
url:'http://g.cn'
}).done(function(data,status,xhr){
console.log(data)
})
//打印出來如下
{
"name": "Donna Williams",
"color": "#f2797c",
"email": "p.oilvqf@eqonsg.ke"
}
也可使用npm下載后，模塊化引入，具體操作如下：
1、安裝mockJS
cnpm install mockjs -S
2、使用mockJS（mock/index.js）
import Mock from "mock";
3、官方文檔
https://github.com/nuysoft/Mock/wiki/Syntax-Specification
4、Mock.mock
Mock.mock([rurl],[rtype],[template|function(options)])
這里的參數都是可選：
rurl(可選)。
表示需要攔截的 URL，可以是 URL 字符串或 URL 正則。例如 /shoopList
rtype(可選)。
表示需要攔截的 Ajax 請求類型。例如 GET、POST、PUT、DELETE 等。
template(可選)。
表示數據模板，可以是對象或字符串。例如 { ‘data|1-10’:[{}] }
function(options)(可選)。
表示用於生成響應數據的函數。
options：指向本次請求的 Ajax 選項集
5、模擬接口返回數據
//定義數據
const data = Mock.mock({
"data|20": [{
"goodsId|+1": 1,
"goodsName": "@ctitle(10)",
"goodsTel": /^1(5|3|7|8)[0-9]{9}$/,
"goodsAddress": "@county(true)",
"goodsLogo": "@Image('200x100', 'EasyMock')",
}]
})
//模擬數據接口
Mock.mock(/\/shoopList/,"post",function(options){
console.log(options);
return data
})
/*
輸出的options的值為
url:"請求的地址"
type:"請求的類型"
body:post提交的數據
*/