Mock.js的正確使用以及丟失cookie的問題
背景
最近在一個vue項目中需要使用mockjs模擬數據,研究了下用法。網上看到的資料沒有找到開發環境下動態配置Mock數據的，不適合真正去運用到項目中，我是通動態配置的引入,感覺是一種比較便捷的使用方式。簡單做個記錄和分享，不喜勿噴。
Mock.js是幹嘛用的
Mock.js 是一款模擬數據生成器，旨在幫助前端攻城師獨立於後端進行開發，幫助編寫單元測試。提供了以下模擬功能
1.根據數據模板生成模擬數據2.模擬 Ajax 請求，生成並返回模擬數據3.基於 HTML 模板生成模擬數據上面這是官網的說法，事實上它主要是用來攔截ajax請求的。原理是在發送請求之前，把XHR對象給改了，改為mock自己封裝的XHR對象方法，只要匹配到對應請求地址，就走自己封裝的方法，從而就會去找本地相對路徑下對應url的數據。
vue中開發環境動態配置Mockjs
安裝
npm install mockjs
引入
const Mock = require(mockjs)
建立本地mock數據
根目錄新建一個mock.js(這個名字隨便起)，你也可以在建在別的目錄，只要能引就行。
mock.js主要代碼
const Mock = require(mockjs)
const Random = Mock.Random
const baseURL=process.env.BASE_URL #process.env是node環境變數,development環境下本地開發環境下自己配的BASE_URL地址,即:開發環境的介面域名
Mock.setup({
timeout: 20 # 模擬介面延時
})
# 然後我要把模擬的數據寫出來
const userList = function () {
let Users = []
let type = [遊客, 會員, 管理員]
for (let i = 0; i < 10; i++) {
let obj = Mock.mock({
userId: i + 1,
userName: Random.cname(),
userEmail: Random.email(),
userType|+1: type
})
Users.push(obj)
}
return Users
}
const articleDetail = function () {
let obj = {}
obj.author_name = Random.cname()
obj.title = Random.csentence(5, 30)
obj.publish_date = Random.date()
obj.content = Random.paragraph(100)
obj.view = Random.integer(0, 10000)
obj.source = 今日頭條
return {
data: obj
}
}
let mockList= [{
url: "/api/userList",#要模擬的介面url
data: userList,#這個直接寫方法就行，mock內部自己會判斷來調用
isMock:true,#這個參數很關鍵，區分這個介面是否還需要mock模擬,後期可能有的介面後段已經給出了，不需要模擬了，也不需要把這個方法刪掉，只需要isMock改為false即可，以後介面萬一需要更改，留下來隨時可以模擬，不需要重新建數據。
type:post
},
{
url: "/api/articleDetail",
data: articleDetail ,
isMock:false
}
]
# 關鍵一步
# 通過Mock.mock()纔可以匹配對應url
#將mockList中所有需要mock的數據進行mock
mockList.forEach(item=>{
# 把需要進行mock的請求進行mock
item.isMock && Mock.mock(RegExp(item.url + .*), item.type || post, item.data) #正則可以匹配帶參數的url
})
main.js中引入mock.js裏mock好的數據
#只在開發環境引入
process.env.NODE_ENV === development && require(./mock.js)
測試一下
在userlist.vue中
axios.post(/api/userList, {}).then((res)=>{
console.log(res)
})
#沒問題，拿到本地mock的數據。介面沒有請求
完事
關於Mock.js語法規則的使用，參考官方語法規範
關於cookie丟失的問題
由於mock默認拷貝了一份原生XHR,默認值withCredentials為false。對於跨域請求，是不攜帶cookie的，如果需要攜帶cookie,你應該設置了withCredentials:true，但是引入mock之後，你的設置被mock默認的那份給覆蓋，需要對應的修改mock自己複製了的那一份原生XHR中的withCredentials:true
mock本身setup只能設置timeout,我給作者提過這個issues,希望setup也可以設置withCredentials，但遺憾的是一直沒有得到回復。我們只能自己主動去改，
其實也很簡單，直接改他封裝好的Mock.XHR,就一句話就可以const Mock = require(mockjs)
Mock.XHR.prototype.withCredentials = true #加上這句即可
# ·······
推薦閱讀：
