mockjs

介绍

如果后端接口还未开发完成，我们自己手动模拟后端接口返回随机数据完成交互功能

1. 采用json数据模拟，生成数据比较繁琐，也比较有局限性，没办法达到增删改查
2. 采用mockJs进行模拟数据，可以模拟各种场景（get、post）生成接口，并且随机生成所需数据，还可以对数据进行增删改查。

使用方式

• 在项目中安装mock

npm install mockjs

• 在项目中新建mock文件夹，在mock文件夹中创建index.js

//引入mock模块
import Mock from 'mockjs';

• 将mock文件夹的index.js文件在main.js中导入

import Vue from 'vue'
import App from './App.vue'
import './mock/index.js'
 
 
new Vue({
  render: h => h(App),
}).$mount('#app')

• 请求接口

Api.get('/mock/events/list')

注意❗

请求路径、参数、请求方法都需要一致，否则无法拦截。

通过环境变量动态开启mock

//api.ts
function transformRequestConfig(config: AxiosRequestConfig) {
  const { url, params, prefix = 'release', ...restConfig } = config
  const enableMock = import.meta.env.VITE_ENABLE_MOCK
  const isMock = url?.includes('mock')
  if(enableMock && isMock) {
    return {
      method: restConfig.method,
      url,
      baseURL: '/'
    }
  }
  return {
    params: { r: [prefix, url].join(''), ...params },
    ...restConfig,
  }
}

//.env.development
VITE_ENABLE_MOCK =  true

mock语法

生成字符串

• 生成指定次数字符串

const data = Mock.mock({
    "string|4": "yx！"
})
console.log(data)

• 生成指定范围长度字符串

const data = Mock.mock({
    "string|1-8": "yx"
})
console.log(data)

生成布尔值

Mock.mock({ "boolean|1": true })

生成文本

• 生成一个随机字符串

const data = Mock.mock({
    "string": "@cword"
})
console.log(data)

• 生成指定长度和范围

const data = Mock.mock({
    string: "@cword(1)",
    str: '@cword(10,15)'
})
console.log(data)

生成标题和句子

• 生成标题和句子

const data = Mock.mock({
    title: "@ctitle",
    sentence: '@csentence'
})
console.log(data)

• 生成指定长度的标题和句子

const data = Mock.mock({
    title: "@ctitle(8)",
    sentence: '@csentence(50)'
})

• 生成指定范围的

const data = Mock.mock({
    title: "@ctitle(5,8)",
    sentence: '@csentence(50,100)'
})
console.log(data)

生成段落

• 随机生成段落

const data = Mock.mock({
    content: '@cparagraph()' 
})
console.log(data)

生成数字

• 生成指定数字

const data = Mock.mock({
    "number|80": 1
})
console.log(data)

• 生成范围数字

const data = Mock.mock({
    "number|1-999": 1
})
console.log(data)

生成增量id

• 随机生成标识

const data = Mock.mock({
    id: '@increment()'
})
console.log(data)

生成姓名-地址-身份证号

• 随机生成姓名-地址-身份证号

const data = Mock.mock({
    name: '@cname()',
    idCard: '@id()',
    address: '@city(true)' // 如果@city(),只会生成市，如果@city(true)会生成省和市
})
console.log(data)

随机生成图片

• 参数1：图片可选大小

• 参数2：图片背景色

• 参数3：图片前景色

• 参数4：图片格式

• 参数5：图片文字

  const data = Mock.mock({
      image: "@image('300x300', '#50B347', '#FFF', 'Mock.js')"
  })
  console.log(data)

生成时间

• @Date

  • 生成指定格式时间：@date(yyyy-MM-dd hh:mm:ss)

const time = Mock.mock({
    time1: '@date()', // 只有年月日
    time2: '@date(yyyy-MM-dd hh:mm:ss)'
})
console.log(time) 

指定数组返回的条数

const data = Mock.mock({
    'list|50-99':[
        {
            name: '@cname()',
            address: '@city(true)',
            id: '@increment(1)' // 每次都增加1
        }
    ]
})

mock/index.js

下面为具体的代码。

//引用Mock
import Mock, {
    Random
} from 'mockjs'
 
Mock.mock("getUserInfo", "get", {
    result: 0,
    data: {
        "award|1-10": [{
            award: "@csentence(3, 6)",
            updateTime: "@datetime('yyyy-mm-dd hh:mm:ss')",
            type: "@csentence(3, 6)"
        }],
        uid: "@string('number', 5, 9)",
        isBack: "@integer(0, 1)",
        isAward: "@integer(0, 1)",
        "members|0-5": [{
            uid: "@string('number', 5, 9)",
            isBack: "@integer(0, 1)",
            flag: "@integer(0, 1)"
        }],
        myInfo: {
            flag: '1',
            teamId: "0",
        }
    },
});
 
Mock.mock("getNowTime", "get", {
    result: 0,
    'data|1714017395000-1725017395000': 0,
});
 
Mock.mock("identify", "get", {
    result: 0,
    data: {
        identify: "@integer(1, 4)",
        days: "@integer(1,4000)",
    },
});
 
Mock.mock("createTeam", "get", {
    result: 0,
    data: Random.string('upper', 13)
});
 
Mock.mock("joinTeam", "get", {
    result: 0,
    data: "申请成功",
});
 
Mock.mock("getMyTeam", "get", {
    result: 0,
    data: {
        "members|0-5": [{
            uid: "@string('number', 5, 9)",
            isBack: "@integer(0, 1)",
            flag: "@integer(0, 1)"
        }],
        myInfo: {
            flag: '1',
            teamId: "@string('upper', 13)",
        }
    },
})
 
Mock.mock("getTeamApply", "get", {
    result: 0,
    "data|0-20": [{
        uid: "@string('number', 5, 9)",
        isBack: 0
    }],
});
 
Mock.mock("pass", "get", {
    result: 0,
    data: "操作成功",
});
 
Mock.mock("refuse", "get", {
    result: 0,
    data: "操作成功",
});
 
Mock.mock("getTeamPrize", "get", {
    result: 0,
    data: "领奖成功",
});
 
Mock.mock("getTeams", "get", {
    result: 0,
    data: {
        "teamList|3": [{
            teamId: "@string('upper', 13)",
            total: "@integer(1, 5)",
            standard: "@integer(1, 5)"
        }],
        "applyTeam|3": [{
            teamId: "@string('upper', 13)",
            total: "@integer(1, 5)",
            standard: "@integer(1, 5)"
        }]
    },
});
 
Mock.mock("searchTeam", "get", {
    result: 0,
    data: {
        team: [{
            teamId: "@string('upper', 13)",
            total: "@integer(1, 5)",
            standard: "@integer(1, 5)"
        }],
        state: "@integer(0, 1)"
    },
});

扩展阅读

• Mockjs使用
• 「前端该如何优雅地Mock数据🏃」每个前端都应该学会的技巧
• 利用装饰器实现mock和api的局部分离切换
• Mock.js：轻松模拟和生成数据的JavaScript库