Mock.js介绍及使用总结

news2024/11/16 5:34:39

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(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

接下来就是见证奇迹的时刻:我们在项目里面向/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<UserType>();

  const updateUserCard = () => {
    axios.post("/api/login", {})
      .then(res => {
        setUser(res.data);
      });
  }

  useEffect(() => {
    setInterval(() => {
      updateUserCard();
    }, 2000);
  }, [])

  return (
    <div>
      <UserCard user={user} />
      </div>
  );
}

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 <div className={styles.card}>
        <p className={styles.title}>IDENTIFICATION CARD | 2023</p>
        <h1 className={styles.name}>{user?.uName || ""}</h1>
        <h2 className={styles.id}>ID: {user?.uId || ""}</h2>
        <h2 className={styles.age}>Age: {user?.uAge || ""}</h2>
        <h2 className={styles.email}>Email: {user?.uEmail || ""}</h2>
    </div>
}

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/391047.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023年轻资产创业怎么做?哪些项目容易创业?

2023年&#xff0c;越来越多的创业者开始考虑轻资产创业&#xff0c;但是&#xff0c;多数人在选择项目的时候&#xff0c;没有一个标准&#xff0c;不知道怎么选择轻资产创业项目&#xff0c;那么&#xff0c;在这里给大家讲讲&#xff0c;轻资产创业怎么做&#xff0c;哪些轻…

反思当下所处的环境,有没有让你停滞不前、随波逐流

环境对人的影响真的很大&#xff0c;小时候的环境、长大后的环境、工作环境、生活环境、好的环境、差的环境......我们都生活在一定的环境中所以既是环境的产物&#xff0c;又是环境的创造者与改造者。我们与环境的关系是相辅相成的我们的生活和工作当中接触到的人或事或物&…

emac接口与phy交互

nuc970的emac接口 nuc970的EMAC以太网接口与PHY芯片之间的数据交换是通过MII&#xff08;Media Independent Interface&#xff09;或RMII&#xff08;Reduced Media Independent Interface&#xff09;接口实现的。 在MII接口中&#xff0c;EMAC和PHY之间通过4对数据线&…

C语言:当scanf语句中有转义字符时,你该这样输入

最近在重新学习一下C语言的有关知识&#xff0c;突然发现现在来看过去所学的知识&#xff0c;自己的感受又有很大的不同&#xff0c;就拿输入语句scanf来说吧&#xff01;看到CSDN问答上有一个关于scanf语句的问题&#xff0c;当时题主代码很简单&#xff0c;可是就是没有输出语…

idea:地址被占用

问题启动idea报&#xff1a;java.net.BindException: Address already in use: bind&#xff0c;具体截图如下&#xff1a;解决步骤1、首先想到的是改idea端口&#xff0c;但按网上方法试下了几个4位数和5位数的端口&#xff0c;没啥作用2、根据idea抛异常的弹出框提示&#xf…

在函数中,用指针接收就可以改变相应的内容吗??

作者&#xff1a;小树苗渴望变成参天大树 作者宣言&#xff1a;认真写好每一篇博客 作者gitee:gitee 如 果 你 喜 欢 作 者 的 文 章 &#xff0c;就 给 作 者 点 点 关 注 吧&#xff01; 我们在不管指针那篇博客&#xff0c;还是在函数那篇博客中&#xff0c;我都给大家讲解过…

Unity 打包代码到 DLL

Unity 打包代码到 DLL 使用Unity API PlayerBuildInterface.CompilePlayerScripts 将项目中的代码生成为 DLL 程序集 在 Editor 文件夹下新建脚本 CompileDll using UnityEngine; using UnityEditor; using UnityEditor.Build.Player; using System.IO;public class Compile…

【springmvc】获取请求参数

SpringMVC获取请求参数 1、通过ServletAPI获取 将HttpServletRequest作为控制器方法的形参&#xff0c;此时HttpServletRequest类型的参数表示封装了当前请求的请求报文的对象 RequestMapping("/testParam") public String testParam(HttpServletRequest request)…

Allegro如何输出ODB文件操作指导

Allegro如何输出ODB文件操作指导 在PCB设计完成之后,需要输出生产文件用于生产加工,除了gerber文件可以用生产制造,ODB文件同样也可以用于生产,如下图 用Allegro如何输出ODB文件,具体操作如下 首先确保电脑上已经安装了ODB这个插件,版本不受限制点击File

开学季准备哪些电容笔好?apple pencil一代平替笔推荐

一支简单而又易用的电容笔&#xff0c;配上我们的ipad&#xff0c;将会为我们的工作、学习带来更多的乐趣。在画画时&#xff0c;也不能忽略电容笔的重要作用。关于电容笔的相关知识&#xff0c;本人也略有知不少&#xff0c;以下是我今天要带来的几款具有极高性价比的电容笔&a…

【C#进阶】C# 特性

序号系列文章10【C#基础】C# 正则表达式11【C#基础】C# 预处理器指令12【C#基础】C# 文件与IO文章目录前言1&#xff0c;特性的概念1.1 特性的属性1.2 特性的用途2&#xff0c;特性的定义2.1 特性参数2.2 特性目标3&#xff0c;预定义特性3.1 AttributeUsage3.2 Conditional3.2…

【springmvc】java bean 的区分

bean JavaBean分为两类&#xff1a; 一类称为实体类Bean&#xff1a;专门存储业务数据的&#xff0c;如 Student、User 等一类称为业务处理 Bean&#xff1a;指 Service 或 Dao 对象&#xff0c;专门用于处理业务逻辑和数据访问。 在一个java的springboot中&#xff0c;一般…

day59-day60【代码随想录】二刷数组

文章目录前言一、移动零&#xff08;力扣283&#xff09;【双指针】二、轮转数组&#xff08;力扣189&#xff09;三、寻找数组的中心下标&#xff08;力扣728&#xff09;四、和为 K 的子数组&#xff08;力扣560&#xff09;五、按奇偶排序数组 II&#xff08;力扣922&#x…

【SPSS】多因素方差分析详细操作教程(附案例实战)

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)

此页可在动态列表的基础上完善&#xff0c;也可以单独学习 【微信小程序-原生开发】实用教程10 - 动态列表的新增、修改、删除 https://blog.csdn.net/weixin_41192489/article/details/128835069 效果预览 核心技术 列表的分页加载 skip 跳跃到指定下标开始查询limit 限制返…

Vulnhub系列:SickOS1.1

靶机地址&#xff1a;SickOS1.1渗透思路&#xff1a;信息收集对于目标靶机进行扫描&#xff0c;可以利用nmap或arp-scan -l进行查询&#xff0c;查询到靶机后&#xff0c;探测其开放的端口&#xff0c;常见的端口21、22、80、3306、445等等&#xff0c;对于不同的端口进行不同的…

博途PLC开放式以太网通信之TRCV_C指令编程应用

博途PLC开放式以太网通信TSENG_C指令应用,请参看下面的文章链接: 博途PLC 1200/1500PLC开放式以太网通信TSEND_C通信(UDP)_plc的udp通信_RXXW_Dor的博客-CSDN博客开放式TSEND_C通信支持TCP 、UDP等,关于TSEND_C的TCP通信可以参看下面这篇文章:博途PLC 1200/1500PLC开放式…

存储器分类

存储器(Memory)包括&#xff1a; RAM(Random Access Memory)&#xff08;计算机运行内存、CPU的L1/L2 Cache等&#xff09;、 ROM(Read Only Memory)&#xff08;用于BIOS等固化程序/数据的存储&#xff09;和 Flash&#xff08;可用于机械硬盘等&#xff09;。 存储器&#x…

现代神经网络(VGG),并用VGG16进行实战CIFAR10分类

专栏&#xff1a;神经网络复现目录 本章介绍的是现代神经网络的结构和复现&#xff0c;包括深度卷积神经网络&#xff08;AlexNet&#xff09;&#xff0c;VGG&#xff0c;NiN&#xff0c;GoogleNet&#xff0c;残差网络&#xff08;ResNet&#xff09;&#xff0c;稠密连接网络…

Blender Python材质处理入门

本文介绍在 Blender 中如何使用 Python API 获取材质及其属性。 推荐&#xff1a;用 NSDT场景设计器 快速搭建3D场景。 1、如何获取材质 方法1、 获取当前激活的材质 激活材质是当前在材质槽中选择的材料。 如果你选择一个面&#xff0c;则活动材料将更改为分配给选定面的材质…