学习 | 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学习的过程,希望能帮助到大家。