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好的数据

#只在开发环境引入