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 #加上这句即可
# ·······
推荐阅读：
