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的格式

轉到控制檯看一下結果

 

 嘿嘿,個人分享到此結束,但願大神們多多指導