哈哈,怎么說,這應該是我的第一個隨筆了,畢竟前端之路上一直在學習並且各位大神們的經驗,雖然也有不少的坑,但是總是收獲比較多,所以我也想把一些收獲記錄下來,有需要的可以參考參考.
網上看了不少大神很多例子很好,但是介紹模糊,看了不知道具體做法,所以我會介紹的詳細一點.
今天是主要分享一下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的格式
轉到控制台看一下結果
嘿嘿,我的分享到此結束,希望大神們多多指導