基本介紹：
在我們前端開發中經常遇到這樣的事情，接口沒有寫好，只能寫靜態頁面，如何才能用很簡單的方法模擬后端數據呢？mockjs就干了這件事，而且干的還挺好。
下面是我作為初學者的一些總結經驗，期望和小伙伴們一起交流進步。
實現的功能有：1、基於數據模板 生成模擬數據 2、基於html模板 生成數據 3、攔截並模擬ajax請求
安裝：
一、安裝(需要安裝nodejs)
node：
npm install mockjs
bower:
npm install -g bower
bower install --save mockjs
二、mockjs體驗
<script>
//模擬自定義對象 var data = Mock.mock({ "list|2-3":23, "name|1":"@name", "age|1-88":100 }) console.info(JSON.stringify(data,null,4)) //模擬ajax請求 var data1 = Mock.mock("http://rich.cn",{ "name":"@name", "isTrue|1":true, "color":"@color" }) $.ajax({ url:'http://rich.cn', success:function(e){ console.info(e) } }) console.info(JSON.stringify(data1,null,4)) </script>
三、語法總結（基本的幾種格式，下面我們就跟着例子走一遍，就學會了）
數據模板定義（DTD）
基本結構：屬性名 | 生成規則 ：值
1、‘name|min-max':value
2、 'name|count':value
3、‘name|min-max.dmin-dmax':value
4、 'name|min-max.dcount':value
5、‘name|count.dmin-dmax':value
6、 'name|count.dcount':value
7、 'name|+count':value
數據占位符定義（DPD）
基本結構：屬性名:占位符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="node_modules/mockjs/dist/mock.js"></script> <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script> </head> <body> <script> //值為string時 var data1 = Mock.mock({ "name1|2-3":"nihao",//重復生成nihao，重復次數大於等於2，小於等於3 "name2|3":"*",//重復生成*，重復次數等於3 }) console.info("string",JSON.stringify(data1,null,4)) //值為boolean時 var data2 = Mock.mock({ 'name3|1':true, //"1"為數字，沒有意義，必須存在，隨機顯示true或false 'name4|1-9':true//出現true的概率為1/（1+9），false的概率為9/（1+9） }) console.info("boolean",JSON.stringify(data2,null,4)) //值為number時 var data3 = Mock.mock({ 'name5|+1':2,//不會自動加1？？顯示2， 'name6|12':3,//顯示規則所顯示的數字 'name7|1-100':3,//隨機生成一個大於等於1小於等於100的數字，3為確定類型，大小隨意 'name8|1-100.2-3':2,//隨機生成一個大於1小於等於100的數字，小數點保留2位或3位。2為確定類型，大小隨意 'name9|123.2':2//生成一個123，小數點后保留兩位的數字 }) console.info("number",JSON.stringify(data3,null,4)) //值為array時 var data4 = Mock.mock({ 'name10|1':[1,2,3],//隨機生成數組中的每一項 'name11|3':[5,6,7],//重復數組內的元素3次輸出 'name12|1-3':[12,13,15,16],//重復數組內的元素1-3次輸出 'name13|2-3':[ { 'name4|1-9':true, 'name7|1-100':3, 'name9|123.2':2, },{ "name1|2-3":"nihao", "name2|3":"*", },{ "name1|2-3":"nihao", "name2|3":"*", },{ 'name5|+1':2, 'name6|12':3, 'name7|1-100':3, } ] }) console.info("array",JSON.stringify(data4,null,4)) //當屬性名是object時 var data5 = Mock.mock({ 'name14|1':{ id:"23", class:"襯衫", price:"1234" }, 'name15|2-3':{ id:"34", class:"襪子", price:"156", size:"xxl" } }) console.info("object",JSON.stringify(data5,null,4)) //當屬性值是function時 var data6 = Mock.mock({ 'fun':function(){ console.info("123") } }) console.info("function",JSON.stringify(data6,null,4)) //當屬性值為RegExp時 var data7 = Mock.mock({ 'regexp1':/[a-z][A-Z]/, 'regexp2':/\d{2,8}/, 'regexp3':/\w[0-9]/ })//生成自定義字符串 console.info("RegExp",JSON.stringify(data7,null,4)) //模擬ajax數據 //模板：Mock.mock( rurl?, rtype?, template|function(options) ) var data8 = Mock.mock("http://rich.cn","get",{ "name":"@name", "isTrue|1":true, "color":"@color" }) $.ajax({ url:'http://rich.cn', method:"get", success:function(e){ console.info(e) } }) //占位符地定義格式 //屬性名:占位符 var data9 = Mock.mock({ first:'@FIRST', email:'@email', sent:'@sentence', color:'@color', name:"@name" }) console.info(JSON.stringify(data9,null,4)) </script> </body> </html>
mockjs官網：
http://mockjs.com/，官網是最好的學習資料。