mock.js的真實資料類比

標籤：小例子   類比   col   最好   com   mil   img   正則匹配   沒有   

哈哈,怎麼說,這應該是我的第一個隨筆了,畢竟前端之路上一直在學習並且各位大神們的經驗,雖然也有不少的坑,但是總是收穫比較多,所以我也想把一些收穫記錄下來,有需要的可以參考參考.

網上看了不少大神很多例子很好,但是介紹模糊,看了不知道具體做法,所以我會介紹的詳細一點.

今天是主要分享一下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的格式

轉到控制台看一下結果

 

 嘿嘿,我的分享到此結束,希望大神們多多指導

 

mock.js的真實資料類比