mock快速入手

爱泡脚的鸡腿
32 阅读1分钟

Mock.js

1.数据模板定义规范

1.1 npm i mockjs

image.png

1.2 npm i @types/mockjs:mock的js

image.png 运行mock文件命令如下：（当然也可以在控制台输出） npm install --save-dev typescript ts-node @types/node npx ts-node index.ts

1.3 控制台查看mock结果

image.png 多试几次，都是random值

image.png

1.4 不同数据类型的模板

通常遵循以下：

image.png 生成规则：

image.png

1.4.1 值为字符串

image.png

1.4.2 值为正则表达式

import Mock from 'mockjs'
let data = Mock.mock({
  // 重复5次列表
  "list|3":[
    {
  '邮箱': /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
  '用户名': /^[a-zA-Z][a-zA-Z0-9_]{3,19}$/,
  '手机号': /^1[3-9]\d{9}$/,
  '年龄': /^([1-9]\d?|1[01]\d|120)$/,
  '性别': /^[男女MF]|Male|Female$/,
  '状态': /^(active|inactive|deleted|pending)$/,
  'ID': /^\d{1,10}$/
}
  ]

})
console.log(data)

image.png

1.4.3 占位符

占位符 只在属性值字符串中占位置 并不出现在最终的属性值中 需要import方法

import { Random } from 'mockjs'

占位符格式如下：

image.png

image.png

1.4.3.1 图片占位符

图片占位符示例：

import Mock from 'mockjs'
const { Random } = Mock

let data = Mock.mock({
  // 重复5次列表
  "list|3":[
    {
 ("参数大小"，“背景色”，“文字颜色”，“图片类型后缀”，“你好”) "b":Random.image("200x100","#000","#fff","png","图片"，“你好”)
}
  ]

})
// console.log(JSON.stringify(data))
console.log(data)

image.png 效果：

image.png

1.4.3.1 中文占位符
import Mock from 'mockjs'
const { Random } = Mock

let data = Mock.mock({
  // 重复5次列表
  "list|3":[
    {
      "中文单词":"@cword(2,4)",
      "中文句子":"@csentence(8,15)",
      "中文段落":"@cparagraph(1,10)",
      "中文标题":"@ctitle(2,4)"
}
  ]

})
// console.log(JSON.stringify(data))
console.log(data)

image.png

1.4.3.2 常见占位符
import Mock from 'mockjs'
const { Random } = Mock

let data = Mock.mock({
  // 常见的测试字段
  "list|3":[
    {
      "url":"@url('http')",
      "ip":"@ip()",
      "email":"@email()",
      "city":"@city()",
      "id":"@id()",
      "name":"@cname()"
}
  ]

})
// console.log(JSON.stringify(data))
console.log(data)

image.png

1.4.3.3 拓展占位符

使用自定义一个方法进行自定义占位符

import Mock from 'mockjs'
const { Random } = Mock

Random.extend({
  'tt':function(){
    return this.pick(['a','b','c','d','e','f'])
  }
})
let data = Mock.mock({
  // 常见的测试字段
  "list|3":[
    {
      "tt":"@tt()"
}
  ]

})
// console.log(JSON.stringify(data))
console.log(data)

image.png

2. 拦截axios请求（重点）

·可以给每一个请求写一个mock的规则，不需要后端接口也可以跑前端
·需要注意的是，需要在发送请求之前把mock的拦截写上

MockJS 必须提前注册拦截规则

image.png

2.1 先在ts中定义好用户字段和响应字段

//axios.d.ts
export interface User {
  id: number;
  name: string;
  age: number;
  email: string;
  city: string;
  address: string;
}


// resopnse.d.ts
import { User } from './axios.d';
export interface ResponseData<T> {
  code: number;
  data: User[];
  message: string;
}

2.2 在axios前使用mock

流程：设置axios的baseURL==》配置mock拦截器，定义mock字段==》使用axios的try、catch进行拦截处理======》成功则保存user信息，再在标签中使用for循环将获取到的信息遍历（这里没有截取、可以自行尝试）

// axios.vue
<script lang="ts">
import { defineComponent, ref } from "vue";
import axios from "axios";
import Mock from "mockjs";
import { message } from "ant-design-vue";
import { User } from "../types/axios";
import { ResponseData } from "../types/response";
export default defineComponent({
  name: "AxiosDemo",
  setup() {
    const users = ref<User[]>([]);
    const loading = ref(false);
    const messageText = ref("");
    const messageType = ref<"success" | "error" | "info">("info");
    const responsedata = ref<ResponseData<User[]>>();
    // 表格列配置
    const columns = [
      {
        title: "ID",
        dataIndex: "id",
        key: "id",
        width: 80,
      },
      {
        title: "姓名",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "年龄",
        dataIndex: "age",
        key: "age",
        width: 100,
      },
      {
        title: "邮箱",
        dataIndex: "email",
        key: "email",
      },
      {
        title: "城市",
        dataIndex: "city",
        key: "city",
      },
      {
        title: "地址",
        dataIndex: "address",
        key: "address",
      },
    ];

    // 设置axios基础URL
    axios.defaults.baseURL = "http://localhost:3000";

    // 配置MockJS拦截器
    Mock.mock("http://localhost:3000/users", "get", () => {
      return {
        code: 200,
        data: Mock.mock({
          "data|3-5": [
            {
              "id|+1": 1,
              name: "@cname",
              "age|18-30": 18,
              email: "@email(qq.com)",
              city: "@city",
              address: "@county(true)",
            },
          ],
        }).data,
        msg: "success",
      };
    });

    // 获取用户列表的方法
    const fetchUsers = async (): Promise<void> => {
      loading.value = true;
      try {
        const response = await axios.get<ResponseData<User[]>>("/users");
        if (response.data.code === 200) {
          users.value = response.data.data;
          message.success(`成功获取 ${response.data.data.length} 条用户数据`);
          console.log("获取用户列表成功:", response.data);
        }
      } catch (error) {
        message.error("获取用户列表失败");
        console.error("获取用户列表失败:", error);
      } finally {
        loading.value = false;
      }
    };

    return {
      users,
      loading,
      message: messageText,
      messageType,
      columns,
      responsedata,
      fetchUsers,
    };
  },
});
</script>

结果：

image.png

2.2 随机生成statucode，模拟真实响应码

 // 配置MockJS拦截器 - 修复所有错误
    Mock.mock("http://localhost:3000/users", "get", () => {
      // 生成随机状态码（200 或 500）
      const statusCode = Math.random() > 0.5 ? 200 : 500;
      const code = statusCode;
      const isSuccess = code === 200;

      return {
        code: code,
        data: isSuccess
          ? Mock.mock({
              "data|3-5": [
                {
                  "id|+1": 1,
                  name: "@cname",
                  "age|18-30": 18,
                  email: "@email(qq.com)",
                  city: "@city",
                  address: "@county(true)",
                },
              ],
            }).data
          : [],
        msg: isSuccess ? "success" : "failed",
      };
    });

image.png

avatar
文章
阅读
粉丝