最近新入職一家公司,後端造接口速度很慢,想來想去還是搞一套模擬接口,來滿足開發需求,有人會問,我造一個死數據不就可以了嗎?或者說,後端數據結構都沒出來,字段我怎麽定?

問這個問題的人不奇怪,我之前也有這種疑問,mock造出來的數據是動態的.前端完全可以自己造數據結構,後端根據這個做一個模型就可以了,誰叫他們慢,字段嘛,實在要修改,他們確實不好改,前端改改就完事了;下面我將跟大家說說最近玩vue+mockjs的心得,

vue的項目搭建我就不多說了,有自己用vue-cli創建的,也有直接用webpack自己搭建,這都沒關系;關鍵是跑的起來,以下拿大眾化的來說(vue-cli創建的項目)

1,下載mockjs: npm i mockjs --save

2,直接在main.js裏面引用,如圖:(此處有坑,因為只在開發環境使用.if裏面不能用import方式導入,只能用require方式引入)

當項目啟動後,mock會攔截他規則內的http請求

3,新建mock.js文件,編輯mock.js文件,大概邏輯文件如下

好的,mock的基本配置已經完成,下面怎麽使用呢;

4,現在vue項目中http請求用的最多是axios了,下面就是最關鍵的位置

問1:為什麽我配置了感覺沒問題,但是只能get請求,不能post請求,後者說post沒有響應?

解:我猜想你是直接用axios.post(url,params)請求的,如圖

這裏還引發一個另外的問題,就是在mockjs裏面也必須寫http時候也必須加上http://localhost:8080/,如圖

問2:那麽我該如何配置axios呢?

解: 正確的方式是采用axios的請求攔截方式,如圖:

攔截之後設置頭,再去通過axios.post(url,params)後者axios.get(url,params)請求數據,

到了這裏,你就可以在mock.js裏面寫正則了,也就是前面看到的第三步圖片中的22行:

1   let data=Mock.mock(/^\/baidu*/,‘get‘,dataRes);

到了這裏你可以正常post請求數據,也可以get請求數據,新的問題又產生了,

問3:為什麽我在mock裏面post可以拿到傳參,但是get不能拿到呢?如圖:

解:這個就是axios的問題了,它有兩種三種傳參方式:第一種是data

用params方式,(用get請求拿到的參數拼接在url後面)

用data方式(用get請求時mock中可以拿到請求參數)

直接給對象的方式,(用get請求時mock中拿不到請求參數,什麽都沒有)

那麽post就比get傳參簡單了; 傳參直接給對象就行

以上是個人學習心得,大神有騷操作,希望指點一下

vue中用mock制造模擬接口(本文主要解決坑),一定要看完哦