当前位置: 首页 > Web前端 > HTML

Mock.js使用

时间:2023-04-03 01:15:33 HTML

Mock.js是前端开发中拦截Ajax请求并生成随机数据响应的工具。它可以用来模拟服务器响应。优点是非常简单方便,无侵入性,基本涵盖了常用的接口数据类型。大概记录下使用过程,详细使用参考Mock文档MockWiki安装使用npm安装:npminstallmockjs;或者直接;数据模板格式:'name|rule':value属性名|生成规则:属性值GET请求发起get请求:$.ajax({url:'http://test.com',type:'get',dataType:'json'}).done(function(data,status,xhr){console.log(JSON.stringify(data,null,4));});Mock.jsresponse:varobj={'aa':'11','bb':'22','cc':'33','dd':'44'};//模拟响应模板Mock.mock('http://test.com',{"user|1-3":[{//随机生成1到3个数组元素'name':'@cname',//中文名'id|+1':88,//属性值自动加1,初始值为88'age|18-28':0,//18-28之间的随机整数,0只用于判断类型'birthday':'@date("yyyy-MM-dd")',//日期'city':'@city(true)',//中国城市'color':'@color',//十六进制颜色'isMale|1':true,//布尔值'isFat|1-2':true,//true概率为1/3'fromObj|2':obj,//从obj对象中随机获取2个属性'fromObj2|1-3':obj,//从obj对象中随机获取1到3个属性'brother|1':['jack','jim'],//随机选择1个元素'sister|+1':['jack','jim','lily'],//依次选择数组中的元素作为结果'friends|2':['jack','jim']//将属性值重复两次,生成一个新数组},{'gf':'@cname'}]});可以看到结果:{"user":[{"name":"董静","id":88,"age":25,"birthday":"2015-04-01","city":"湖南省怀化市","color":"#c0f279","isMale":false,"isFat":false,"fromObj":{"dd":"44","aa":"11"},"fromObj2":{"bb":"22","cc":"33"},"brother":"jack","sister":"jack","friends":["jack","jim","jack","jim"]},{"gf":"天杰"}]}响应时也可以使用函数,如:Mock.mock('http://test.com','get',function(){returnMock.mock({"user|1-3":[{'name':'@cname','id':88}]});});结果:{"user":[{"name":"徐超","id":88}]}POST请求发起post请求:$.ajax({url:'http://test.com',type:'post',dataType:'json',data:{account:888,pwd:'abc123'}}).done(function(data,status,xhr){console.log(JSON.stringify(data,null,4));});Mock.js响应:Mock.mock('http://test.com',function(options){console.log(options);returnMock.mock({"user|1-3":[{'name':'@cname','id|+1':88}]});});可以看到结果:{url:"http://test.com",type:"POST",body:"account=888&pwd=abc123"}{"user":[{"name":"ZengMing","id":88}]}Customresponsetime可以自定义设置响应时间,可以是绝对值,也可以是间隔。//设置4秒后响应Mock.setup({timeout:4000});//设置1秒到4秒响应Mock.setup({timeout:'1000-4000'});DatasetMock.Random是一个工具类,用于生成各种格式的随机数据。有两种写法:第一种://生成一个email格式的字符串console.log(Mock.mock('@email'));//结果:s.uorjeqdou@crqfpdypt.gw第二种:varRandom=Mock.Random;console.log(Random.email());//结果:r.quyppn@yit.cv提供的类型有:TypeMethodBasicboolean,natural,integer,float,character,string,range,date,time,datetime,nowImageimage,dataImageColorcolorTextparagraph,sentence,word,title,cparagraph,csentence,cword,ctitleNamefirst,last,name,cfirst,clast,cnameWeburl,domain,email,ip,tldAddressarea,regionHelpercapitalize,upper,lower,pick,shuffleMiscellaneousguid,id如果上面没有你需要的类型,也可以自定义扩展名,如下:Random.extend({weekday:function(date){varweekdays=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];返回这个.pick(weekdays);},sex:function(date){varsexes=['Male','Female','Neutral','Unknown'];returnthis.pick(sexes);}});console.日志(随机。工作日());//结果:Saturdayconsole.log(Mock.模拟('@weekday'));//结果:112Tuesdayconsole.log(Random.sex());//结果:男性console.log(Mock.mock('@sex'));//result:unknownschoolVerifyMock.valid(template,data):用于验证真实数据data是否匹配数据模板模板vartempObj={"user|1-3":[{'name':'@cname','id|18-28':88}]};varrealData={"user":[{'name':'张三','id':90}]};console.log(Mock.valid(tempObj,realData));JSONSchemaMock.toJSONSchema(template):用于将Mock.js风格的数据模板模板转换为JSONSchemavartempObj={"user|1-3":[{'name':'@cname','id|18-28':88}]};console.log(Mock.toJSONSchema(tempObj));