Mock.js介绍及使用总结
创始人
2024-05-29 07:22:57
0

1 什么是Mock.js

Mock.js用于生成随机的模拟数据,拦截 Ajax 请求,返回伪造的数据。因此在前端开发阶段就可以通过这个工具进行沉浸式开发,实现数据自产自销,降低和后端的沟通成本,实现真正意义上的前后端开发解耦合。相信我,使用这个工具,一定能够提高你的工作效率。

那么Mock.js有哪些特点呢?列举如下:

  1. 前后端分离:让前端攻城师独立于后端进行开发。
  2. 增加单元测试的真实性:通过随机数据,模拟各种场景。
  3. 开发无侵入:不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。
  4. 用法简单:符合直觉的接口。
  5. 数据类型丰富:支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
  6. 方便扩展:支持支持扩展更多数据类型,支持自定义函数和正则。

欲知更多,请见官网:Mock.js

2 怎么用

Mock的使用可以说是相当简单,安装好之后只需要动动手指,就能够让它运行起来了。

2.1 安装

npm install mockjs -D

2.2生成伪造的用户数据

这里以生成伪造的用户信息数据为例,简单介绍一下Mock.js是如何生成假数据的。定义UserType数据类型如下:

// UsrType.ts
type UserType = {uName: string,uId: string,uEmail: string,uAge: number
}export { UserType }

使用Mock生成伪造数据,将其封装成一个函数:

// user_mock.ts
import Mock from "mockjs";const getLoginRsp = () => Mock.mock({uName: Mock.Random.name(),uId: Mock.Random.id(),uAge: Mock.Random.natural(10, 50),uEmail: Mock.Random.email()
});export { getLoginRsp }

这里主要使用Mock.Random内置的方法生成了随机的用户名、用户ID、年龄和Email等数据,你还可以使用Mock生成更复杂的数据类型如数组,结构体、照片等等,更多示例请看官方示例,不再赘述。

既然已经定义好了这个伪造数据的函数,后续你想使用假数据,就可以直接调用getLoginRsp函数,即可得到假数据,举个栗子:

const mockData = getLoginRsp();
console.log(mockData);// uAge: 32
// uEmail: "d.topvut@bwwdcz.nt"
// uId: "630000198110044420"
// uName: "Nancy Hall"

是不是很方便?更方便的在后面!

2.3 拦截ajax请求,返回伪造数据

你可以使用Mock.mock()方法,将前端发送的ajax请求拦截,然后直接返回你想要的数据,前端开发大杀器!举个栗子,新建一个index.ts文件:

// mock/mock.ts
import Mock from "mockjs";
import { getLoginRsp } from "./auth_mock";// 拦截/api/login这个请求,请求类型为post,第三个参数就是你定义好的mock数据函数
Mock.mock("/api/login", 'post', getLoginRsp);

然后在项目入口处引入index.ts即可,我以React项目为例:

// main.ts
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'// 在这里引入刚刚创建的index.ts文件
import "./mock/index"ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(,
)

接下来就是见证奇迹的时刻:我们在项目里面向/api/login接口请求数据:

// App.tsx
import axios from 'axios';
import { useEffect, useState } from 'react'
import './App.css'
import UserCard from './components/UserCard';
import { UserType } from './types/UserType';function App() {const [user, setUser] = useState();const updateUserCard = () => {axios.post("/api/login", {}).then(res => {setUser(res.data);});}useEffect(() => {setInterval(() => {updateUserCard();}, 2000);}, [])return (
user} />
); }export default App

UsrCard.tsx主要用于展示用户相应的数据:

import { UserType } from "../types/UserType";
import styles from "./UserCard.module.css";export default function UserCard({user}: {user: UserType | undefined}) {return 
styles.card}>

styles.title}>IDENTIFICATION CARD | 2023

styles.name}>{user?.uName || ""}

styles.id}>ID: {user?.uId || ""}

styles.age}>Age: {user?.uAge || ""}

styles.email}>Email: {user?.uEmail || ""}

}

最终呈现效果如下图所示:
在这里插入图片描述
成功获取到假数据,并且展示了出来!至此,使用Mock.js进行基本的数据伪造和请求拦截已经讲完了,更多复杂的用法,需要你结合自己的业务内容去探索了~

相关内容

热门资讯

马英九痛批赖清德无能:“我实在... 台北举行“反绿”抗议,马英九讲话痛批赖清德无能:“我实在看不下去了”据“东森新闻云”等台媒4月26日...
挑大梁 江苏行∣417个重量级... 转自:扬子晚报4月26日,2025苏州全球招商大会在苏州国际博览中心开幕,来自世界500强企业、重点...
【甘快看·强信心 看发展 招商... 生产车间内,各项工作正在有条不紊展开。本文图片均由新甘肃·甘肃日报记者 魏晓倩 摄新甘肃·甘肃日报记...
鹰眼预警:万业企业营业收入大幅... Hehson财经上市公司研究院|财报鹰眼预警4月26日,万业企业发布2024年年度报告,审计意见为标...
本市今年将建100个社区微花园     本报讯(记者  王斌)北京青年报记者从首都绿化委员会办公室获悉,今年本市将建成100个社区微...
对阵热刺 利物浦拿1分即可锁定... 北京时间4月27日,英超第34轮将上演一场焦点对决,领头羊利物浦坐镇安菲尔德迎战深陷保级泥潭的热刺。...
兄妹契约剧情介绍? 兄妹契约剧情介绍?兄妹契约剧情介绍,兄妹契约全集哪里有?三味影院有的 ,不过哦o(∩_∩)o...是...
南京港2024年年报解读:营收... 2025年4月,南京港股份有限公司(以下简称“南京港”)发布2024年年度报告。报告期内,公司实现营...
以上率下抓整改 严字当头转作风 新华社北京4月26日电(记者 戴锦镕 柳泽兴 艾福梅)在深入贯彻中央八项规定精神学习教育中,黑龙江、...
“四聚焦”回应群众诉求有速度有... 本报讯(记者 衣凯玥)市委作风巡查第七组进驻湟中区巡查期间,持续深化巩固历年来作风巡查工作成果,以“...
鹰眼预警:文灿股份销售毛利率持... Hehson财经上市公司研究院|财报鹰眼预警4月26日,文灿股份发布2024年年度报告,审计意见为标...
鹰眼预警:众源新材应收账款增速... Hehson财经上市公司研究院|财报鹰眼预警4月26日,众源新材发布2024年年度报告,审计意见为标...
鹰眼预警:三六零营业收入下降 Hehson财经上市公司研究院|财报鹰眼预警4月26日,三六零发布2024年年度报告,审计意见为标准...
进一步加大微短剧等网络视听领域...     “规范微短剧版权秩序”“持续净化网络购物环境”……在国新办日前召开的新闻发布会上,市场监管总...
市委平安西宁建设领导小组会议召... 本报讯(记者 施翔)4月26日,市委平安西宁建设领导小组会议召开,系统总结2024年工作,分析当前安...
鹰眼预警:纵横通信应收账款增速... Hehson财经上市公司研究院|财报鹰眼预警4月26日,纵横通信发布2024年年度报告,审计意见为标...
消费品以旧换新超1.2亿人次受...     超1.2亿人次享受补贴优惠,带动销售额超7200亿元……商务部日前召开消费品以旧换新专题新闻...
贵广网络2024年报解读:营收... 2025年4月,贵州省广播电视信息网络股份有限公司(以下简称“贵广网络(维权)”)发布2024年年度...
西宁市人民代表大会常务委员会关... (2025年2月25日西宁市第十七届人民代表大会常务委员会第二十七次会议通过 2025年3月27日青...