Mockjs快速使用

在开发前端的时候，后端可能还没有出接口，我们可以根据后端的响应mock假数据除此之外，mock还能做到前端后端并行开发前端独立运行 npm i mockjs npm i -D @typ

在开发前端的时候，后端可能还没有出接口，我们可以根据后端的响应mock假数据

除此之外，mock还能做到

前端后端并行开发
前端独立运行

npm i mockjs
npm i -D @types/mockjs

快速尝鲜

import * as mockjs from "mockjs";

let data = mockjs.mock({
    "data": "@cname()",
    "age": "@integer(1,100)",
    "addr": "@city(true)",
    "email": "@email(qq.com)",
})
console.log(data)

运行就能看到假数据了

数据模板定义规范

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值

一般长这样

"属性名|生成规则": 属性值

生成规则有七种

'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value

值是字符串

let data = mockjs.mock({
    "name|2-3": "a",  // 重复后面的字符串2或者3次
    "name1|3": "b"  // 重复后面这个字符串3次
})
console.log(data)

值是数字

let data = mockjs.mock({
    "list|5": [
        {
            "age1|+1": 1,
            "age2|+5": 1,// 每次+5
            "age3|11-20": 1, // 范围随机
            "age4|2.2": 1, // 整数部分等于2，小数部分保留2位
            "age5|4-5.2-3": 1, // 整数部分 4或者5，小数部分保留2或者3位
        }
    ]
})
console.log(data)

值是布尔

"b|1": true, // 值为true的概率是2分之1

值是对象

import * as mockjs from "mockjs";

let data = mockjs.mock({
    "list|5": [
        {
            "o1|1": {
                name: "张三",
                age: 21
            }, // 从这个对象里面随机取一个
        }
    ]
})
console.log(JSON.stringify(data))

值是数组

import * as mockjs from "mockjs";

let data = mockjs.mock({
    "list|5": [
        {
            "a1|1": [1,2,3,8], // 从数组里面随机选一个
            "a2|2": [1,2], // 重复数组里面的数据2次
        }
    ]
})

console.log(JSON.stringify(data))

这个要特殊一点，为1是随机选1个，除了1其他都是重复多少次

值是函数

import * as mockjs from "mockjs";

let data = mockjs.mock({
    "list|5": [
        {
            "f1": function ():string{
                return "张三"
            },
        }
    ]
})

console.log(JSON.stringify(data))

值是正则表达式

import * as mockjs from "mockjs";

let data = mockjs.mock({
    "list|5": [
        {
            '邮箱': /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
            '汉字': /[\u4E00-\u9FA5]{3}/,
            '手机号': /^1[345789]\d{9}$/,
            'IP地址': /((25[0-5]|2[0-4]\d|[01]\d?)\.){3}(25[0-5]|2[0-4]\d|[01]\d?)/
        }
    ]
})

console.log(JSON.stringify(data))

数据占位符

占位符只是在属性值字符串中占个位置，并不出现在最终的属性值中。
占位符的格式为：

@占位符
@占位符(参数)

占位符引用的是Mock.Random 中的方法。

这些是支持的方法

MockjsRandomBasic,
MockjsRandomDate,
MockjsRandomImage,
MockjsRandomColor,
MockjsRandomAddress,
MockjsRandomHelper,
MockjsRandomMiscellaneous,
MockjsRandomName,
MockjsRandomText,
MockjsRandomWeb,

对着index.d.ts一个一个走就完事，把自己喜欢的单独记一下

下面这两种写法是等价的！

import * as mockjs from "mockjs";

import {Random} from "mockjs";


let data = mockjs.mock({
    "list|5": [
        {
            '随机布尔1': "@boolean",
            '随机布尔2': Random.boolean(),
        }
    ]
})

图片

https://dummyimage.com/

Random.image("200X100", "Adobe", "fff", "png", "123")
// 大小  背景色  前景色   后缀  文本

常用的

import * as mockjs from "mockjs";

import {Random} from "mockjs";


let data = mockjs.mock({
    "list|2": [
        {
            '数字': "@integer(2, 5)",
            '小数': "@float(2, 5, 1, 1)", // 从2-5，1位小数
            '数组': "@range(1, 10, 3)", // 从1开始，到10，步长是3
        },
        {
            "日期": "@date",
            "现在的时间": "@now",
            "日期时间": "@datetime",
        },
        {
            "图片1": Random.image("200X100", "Adobe", "fff", "png", "123"),
        },
        {
            "颜色": "@color"
        },
        {
            "中文文本": "@cparagraph(10,20)",
            "中文句子": "@csentence(10,20)",
            "中文标题": "@ctitle(3,5)",
        },
        {
            "中文名字": "@cname"
        },
        {
            "url": "@url('http')",
            "域名": "@domain('com')",
            "ip": "@ip",
            "邮箱": "@email('qq.com')",
        },
        {
            "地址": "@city(true)", // 完整的省市
            "城市": "@city", // 市
        },
        {
            "uuid": "@guid",
            "id": "@id"
        }
    ]
})

console.log(JSON.stringify(data))

扩展占位符

import * as mockjs from "mockjs";

import {Random} from "mockjs";

Random.extend({
    "tt": function (){
        return "tt112"
    }
})

let data = mockjs.mock({
    "list|5": [
        {
            'z': "@tt",
        }
    ]
})

console.log(JSON.stringify(data))

拦截axios请求

这个算是mockjs最好用的功能了

可以给每个请求写一个mock的规则，然后不需要后端接口也能跑前端

主要注意的是，需要在发请求之前把mock的拦截写上

<template>

</template>

<script setup lang="ts">
import axios from "axios";
import {mock} from "mockjs";

mock("http://localhost:3000/users", {
  code: 0,
  data: {
    "id|+1": 1,
    name: "@cname",
    "age|16-23": 1,
  },
  msg: "成功"
})

async function getData() {
  let res = await axios.get("http://localhost:3000/users")
  console.log(res.data)
}

getData()
</script>

运行你会发现，实际的响应数据是mock里面的数据

mock拦截请求的原理简单点说就是把原生的XHR给重写了，变成自己的

所以说，在开启mock之后，被拦截的请求是没有发送的，在网络请求中是看不到的

拦截的几种写法

完整匹配

import axios from "axios";
import {mock} from "mockjs";

mock("http://localhost:3000/users", {
  code: 0,
  data: {
    "id|+1": 1,
    name: "@cname",
    "age|16-23": 1,
  },
  msg: "成功"
})

async function getData() {
  let res = await axios.get("http://localhost:3000/users")
  console.log(res.data)
}

getData()

method

import {mock} from "mockjs";
mock("http://localhost:3000/users", "get", {
  code: 0,
  data: {
    "id|+1": 1,
    name: "@cname",
    "age|16-23": 1,
  },
  msg: "成功"
})

正则

import {mock} from "mockjs";
mock(/.*?\/users/, {
  code: 0,
  data: {
    "id|+1": 1,
    name: "@cname",
    "age|16-23": 1,
  },
  msg: "成功"
})

函数模式

import {mock} from "mockjs";
import type {MockjsRequestOptions} from "mockjs";

mock(/.*?\/users/, function (options: MockjsRequestOptions) {
  // {url: 'http://localhost:3000/users', type: 'GET', body: null}
  console.log(options) 
  return {
    code: 0,
    data: {
      "id|+1": 1,
      name: "@cname",
      "age|16-23": 1,
    },
    msg: "成功"
  }
})