学习 | mockjs入门
最近工作有用到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学习的过程，希望能帮助到大家。
