mock之初體驗

 

剛接觸vue的時候，看到github上有人的開源項目介紹使用mock能夠模擬接口調用，可使用模擬數據避免跟後端交互也能夠實現前端功能的完美展示，當時以爲臥槽，mock這個東西這麼神奇的嗎？那必定要學習一下，可是當時工做忙（說實話就是懶。。。），一來二去就給放下了（捂臉。。。）。

近來感謝領導（路人：有拍馬屁嫌疑），工做少量輕鬆了一些，又碰巧平臺組的同事，給出組件例子的時候用到了mock，我就認爲我學習mock的機會到了，既然天意如此，我就不客氣了，mock出招吧！

首先，安裝。

找到官網，按步驟來就行了。

其次，開始寫接口了，工做使用vue，vue組件跟調接口文件是分開的，結構是這個樣子滴，

vue文件，就簡單使用ElementUI庫，弄了一個table，而後開始就調用一下，

接口調用文件，最簡單的接口調用，

裏面的api文件，用的axios，

使用mock模擬的接口響應，

而後，頁面刷新，返回結果，臥槽，牛*，然而，溼溼的真相是下面這樣的。。。

 

事實是，找到文檔，火燒眉毛，立刻control+C，而後Control+V，一頓操做猛如虎，而後「腚眼」一瞧。。。

啪啪啪。。。，表格數據沒出來，咋地了嘛，看看返回數據

這我要的是一個數組啊，個人天，怎樣才能生成一波數組呢？而後開啓百度，一通搜索，功夫不負有心人，終於找到了，

這個時候返回的就是一個數組了，

而後，繼續翻文檔，發現@date('yyyy-mm-dd')能夠傳參數，表示日期的格式化模板，@county(true) 也能夠傳參數，表示縣區，以前是否帶出本身所屬的省市。

吶吶吶，你覺得到這裏就結束了嗎？不不不，新問題又來了，都說好奇害死貓，我可能就是還沒被害死的那隻貓，文檔說，mock還能夠是一個生成隨機數的工具，好比它的Random，裏面能夠有好多東東，好比名字，你能夠用@cname，也能夠用Random.cname()，日期，你能夠用@date，也能夠用Random.date()，那就果斷替換一波吧，而後，畫面變成了這個樣子

這它喵的是怎麼回事？WTF?，而後看文檔裏也沒說啊，開啓百度大法吧，半個多小時過去了，依然杳無音信，而後翻github上該項目對應的issues，而後讓我找到了，哈哈哈哈，好像就是一個bug吧，做者並無迴應，可是廣大網友仍是給出瞭解決辦法，那就是使用函數走一波，將Random的東東，所有都用函數return一下就能夠了，好像是若是函數的東西，它會從新執行一下，而以前的那種寫法，一遍搞定了。

以上都是mock第二個參數是模板的狀況，那麼第二個參數是函數的狀況呢？

原覺得，直接將將裏面的模板，return不就完了嗎？像這樣

可是，我畢竟仍是太年輕了，返回的數據居然成了這樣。。。

模板什麼的都沒識別，進去什麼樣，出來仍是什麼樣，那要怎麼搞嘛？沒辦法，繼續查資料吧，最後發現return 的時候還能夠mock.mock,竟然還有這種操做？6666，細細一想，return的時候，隨便你，有人就本身造數組，而後for循環，一個一個的push,但這顯然不是我想要的，返回mock.mock的時候，裏面的東西就又是模板了，僅此而已。

值得一提的是，使用function的方式，其中的req.body還能夠獲取post帶過來的請求參數。