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好的数据
#只在开发环境引入