最近工作有用到mockjs模擬數據，實現前后端分離，今天系統的把mockjs的API都過了一遍，算是入門吧。
什么是mockjs
mockjs就是一個模擬數據，生成隨機數據，攔截ajax請求。
為什么使用mockjs
1、后端給不了數據
2、數據太長，將數據放在js文件里面，完成后挨個改url
3、還原真實數據
4、特殊格式 ip 隨機數 圖片 地址
5、分頁顯示
mockjs基本語法（require.js）
參考index.html
語法規則
1、數據模板定義規范
"name|rule":value
'name|min-max': value
通過重復 string 生成一個字符串，重復次數大於等於 min，小於等於 max。
'name|count': value
通過重復 string 生成一個字符串，重復次數等於 count。
'name|min-max.dmin-dmax': value
生成一個浮點數，整數部分大於等於 min、小於等於 max，小數部分保留 dmin 到 dmax 位。
'name|min-max.dcount': value
生成一個浮點數，整數部分大於等於 min、小於等於 max，小數部分保留 dcount 位。
'name|count.dmin-dmax': value
生成一個浮點數，整數部分等於count，小數部分保留 dmin 到 dmax 位。
'name|count.dcount': value
生成一個浮點數，整數部分等於count，小數部分保留 dcount 位。
'name|+1': value
屬性值自動加 1，初始值為 value
'name|1': boolean
屬性值自動加 1，初始值為 value
1、Mock.mock(template)
根據數據模板生成模擬數據
2、Mock.mock(rurl,template)
當攔截到匹配 rurl 的 Ajax 請求時，將根據數據模板 template 生成模擬數據，並作為響應數據返回。
3、Mock.mock( rurl, function( options ) )
當攔截到匹配 rurl 的 Ajax 請求時，函數 function(options) 將被執行，並把執行結果作為響應數據返回。
4、Mock.mock( rurl, rtype, template )
當攔截到匹配 rurl 和 rtype 的 Ajax 請求時，將根據數據模板 template 生成模擬數據，並作為響應數據返回。
5、Mock.mock( rurl, rtype, function( options ) )
當攔截到匹配 rurl 和 rtype 的 Ajax 請求時，函數 function(options) 將被執行，並把執行結果作為響應數據返回。
6、Mock.setup( settings )
配置攔截 Ajax 請求時的行為。支持的配置項有：timeout。
7、占位符 Mock.Random
Mock.Random 是一個工具類，用於生成各種隨機數據
8、自定義占位符 Mock.Random.extend({func});
用於自定義占位符
9、Mock.valid()
校驗真實數據 data 是否與數據模板 template 匹配。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="./require.js"></script>
<script>
require.config({
paths:{
zepto:"./zepto",
mock:"http://mockjs.com/dist/mock"
}
});
require(["mock"],function(M){
var data = M.mock({
'list|1-10':[{
'id|+1':1
}]
})
console.log(data);
})
</script>
<body>
</body>
</html>
index2.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <script src="./require.js"></script> <script> require.config({ paths:{ zepto:"./zepto", mock:"http://mockjs.com/dist/mock" } }); require(["mock"],function(M){ var data = M.mock({ 'list1|1':/[a-z][A-Z][0-9]/, 'list2|1':/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/, 'list3|1':/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/, 'list4|1':/((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/, }) console.log(data); }) </script> <body> </body> </html>
index3.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <script src="./require.js"></script> <script> require.config({ paths:{ zepto:"./zepto", mock:"http://mockjs.com/dist/mock" } }); require(["zepto","mock"],function($,M){ var temp = { "title":"hejian", "star|1-5":"*", "count|5-9.2":1, "like1|1-2":false, "like2|1":true, "obj1|2-4":{ "1":"北京", "2":"上海", "3":"杭州", "4":"西安", }, "obj2|2":{ "1":"安康", "2":"寶雞", "3":"咸陽", "4":"戶縣" }, "array|1":["1","2","3","5"], 'function':function(){ return this.title; } } var data = M.mock(temp); var temp2 = { "list|1-10":[{ "id|+1":1, 'email':'@EMAIL' }] } M.mock(/\.json/,temp2); $.ajax({ url:"hello.json", dataType:"json", success:function(data){ console.log(data); } }) var func = function(options){ return options; } M.mock(/\.json/,func); $.ajax({ url:"hello.json", dataType:"json", success:function(data){ console.log(data); } }) $.ajax({ url:"hello.json", dataType:"json", data:{ id:1, name:"2" }, success:function(data){ console.log(data); } }) $.ajax({ url:"hello.json", type:"post", success:function(data){ console.log(data); } }) M.mock(/\.json/,'get',{ type:"get" }); $.ajax({ url:"hello.json", type:"post", success:function(data){ console.log(data); } }) M.mock(/\.json/,'get',function(options){ return options.type; }) $.ajax({ url:"hello.json", type:"get", success:function(data){ console.log(data); } }) // M.setup({ // timeout:400, // }) // $.ajax({ // url:"hello.json", // timeout:400, // success:function(data){ // console.log(data); // } // }) var Random = M.Random; console.log(Random.email()); var data3 = M.mock('@email'); console.log(data3); var data4 = M.mock({"email":"@email"}); console.log(data4); console.log(M.mock({boolean:'@boolean'})); console.log(M.mock({natural:'@natural'})) console.log(M.mock({integer:'@integer'})) console.log(M.mock({float:'@float'})) console.log(M.mock({character:'@character'})) console.log(M.mock({string:'@string'})) console.log(M.mock({range:'@range'})) console.log(M.mock({date:'@date'})) console.log(M.mock({time:'@time'})) console.log(M.mock({datetime:'@datetime'})) console.log(M.mock({now:'@now'})) console.log(M.mock({image:'@image'})) console.log(M.mock({dataImage:'@dataImage'})) console.log(M.mock({color:'@color'})) console.log(M.mock({paragraph:'@paragraph'})) console.log(M.mock({word:'@word'})) console.log(M.mock({title:'@title'})) console.log(M.mock({cparagraph:'@cparagraph'})) console.log(M.mock({cword:'@cword'})) console.log(M.mock({ctitle:'@ctitle'})) console.log(M.mock({first:'@first'})) console.log(M.mock({last:'@last'})) console.log(M.mock({name:'@name'})) console.log(M.mock({cfirst:'@cfirst'})) console.log(M.mock({domain:'@domain'})) console.log(M.mock({area:'@area'})) console.log(M.mock({guid:'@guid'})) console.log(M.mock({capitalize:'@capitalize'})) console.log(M.mock({upper:'@upper'})) console.log(M.mock({shuffle:'@shuffle'})) M.Random.extend({ test:function(date){ var city = ["西安","杭州","北京","上海","深圳"]; return this.pick(city); } }) console.log(M.mock("@test")); var temp3 = { name:"value1" } var data = { name :"value2" } console.log(M.valid(temp3,data)); var temp4 = { "key|1-4":"*" } console.log(M.toJSONSchema(temp4)); }) </script> <body> </body> </html>
這三個文件就是自己自學mockjs學習的過程，希望能幫助到大家。