mock.js的真实数据模拟

哈哈,怎么说,这应该是个人第一个随笔了,毕竟前端之路上一直在学习而且各位大神们的经验,虽然也有很多的坑,可是老是收获比较多,因此我也想把一些收获记录下来,有须要的能够参考参考.

网上看了很多大神不少例子很好,可是介绍模糊,看了不知道具体作法,因此我会介绍的详细一点.

今天是主要分享一下mock.js 的插件,我以为很不哦错,实用性很强,它能够在后端数据没写好的状况下,模拟真实数据,拦截ajax请求并做出迅速的反馈

mock.js官网上有下载,不过注意下载完之后只须要提取一个有用的js文件就行

 而后在html的页面导入就好

使用前最好看看官网,官网提供了两种模拟数据用法:DTD和DPD,各有优点,我的感受DPD容易理解些,固然DTD的用法也须要了解,有的地方用会更方便

接下来是我作的小例子

 1 var data = Mock.mock({  2  message: {  3  name: '@cname',  4  sex: '@string("男女",1)',  5  birthday: '@datetime',  6  hometown: '@county(true)',  7  age:'@natural(1,100)',  8  usepassword: '@string(6,10)',  9  email: '@email', 10  boker: '@url', 11  'phone|1': /^1[0-9]{10}$/ 12  } 13  }); 14              console.log(data);

以上是一些咱们常常要用到的属性,我主要用了DPD的方法,手机号方面貌似没有提供占位符的直接用法,因此用DTD的正则匹配会方便一点

这是在chrome的控制台输出的结果:

 接下来就是如何拦截ajax请求而且返回相应的数据,其实很简单不难,在原来的基础上加入请求url

<script type="text/javascript"> $(function(){ Mock.mock('http://localhost/manager/Fans.php',{ message: { name: '@cname', sex: '@string("男女",1)', birthday: '@datetime', hometown: '@county(true)', age:'@natural(1,100)', usepassword: '@string(6,10)', email: '@email', boker: '@url', 'phone|1': /^1[0-9]{10}$/ } }); $.ajax({ type:"post", url:"http://localhost/manager/Fans.php", async:true, success:function(data){ // console.log(data);
                    var idata=$.parseJSON(data); console.log(idata); } }); }) </script>

其中注意一点,就是回调函数里拿到的数据是字符串,根据咱们调用的方便要转成json的格式

转到控制台看一下结果

 

 嘿嘿,个人分享到此结束,但愿大神们多多指导