前端数据模拟 Mock.js 学习笔记

news2025/3/10 16:17:36

mock.js介绍

Mock.js是一款前端开发中拦截Ajax请求再生成随机数据响应的工具,可以用来模拟服务器响应

  • 优点是:
  • 非常方便简单,无侵入性,基本覆盖常用的接口数据类型
  • 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等
  • 缺点是:
  • 不支持文件
  • 不是异步的

安装的话直接用npm install mockjs这条命令行即可

mockjs可以模拟前端请求后端返回数据的过程,那么在前端开发过程中,我们就不需要等待后端写好接口就能写关于axios的代码来请求数据,当后端开发好后直接移除mockjs即可不需要修改过多的代码,对于前端开发来说是非常方便的

核心方法

Mock.mock(rurl?, rtype?, template|function(options))

  • rurl:表示需要拦截的URL,可以是URL字符串或URL正则
  • rtype:表示要拦截的Ajax请求类型,例如get、post、put请求等
  • template:表示数据模板,可以是对象或者是字符串
  • function:表示用于生成响应式数据的函数

同时mock也可以设置延时请求到数据:Mock.setup({ timeout : 400}),其中400是表示延迟400毫秒,如果400被'200-600'替代了,那么意思就是延迟200毫秒到600毫秒请求数据

数据生成规则

mock的语法规范包含两层规范:数据模板(DTD),数据占位符(DPD)

数据模板中的每个属性由三部分构成:属性名name、生成规则rule、属性值value

'name|rule' : value

属性名和生成规则之间用竖线 | 分割,生成规则是可选的,有7种格式:

'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

当然还有更多的写法来规定数据生成,具体可以找ai写或者看官方文档写就好了

基本使用

在项目src目录下创建mock目录,新建index.js文件

然后在index.js文件中写入需要模拟生成的数据即可

示例:

最后,我们需要在main.js里面引入我们写好的mock目录下的js文件,因为前面定义mock目录下js文件名字为index.js,所以会自动导入index.js,不需要写成 import './mock/index' 这样

然后在需要请求数据的组件中调用mock.js中模拟的数据接口,这时返回的response就是mock.js中用Mock.mock('url' ,data)中设置的data

注意:如果你还没有开发后端接口,axios 请求的接口路径就是你在 Mock.js 中定义的路径。Mock.js 会拦截这些请求并返回模拟数据

参考

14.前端数据模拟MockJS_哔哩哔哩_bilibili

Mock.js 超全 超详细总结 保姆级别的教程_mockjs-CSDN博客

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

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

相关文章

用DeepSeek-R1-Distill-data-110k蒸馏中文数据集 微调Qwen2.5-7B-Instruct!

下载模型与数据 模型下载: huggingface: Qwen/Qwen2.5-7B-Instruct HF MirrorWe’re on a journey to advance and democratize artificial intelligence through open source and open science.https://hf-mirror.com/Qwen/Qwen2.5-7B-Instruct 魔搭&a…

DeepSeek大模型 —— 全维度技术解析

DeepSeek大模型 —— 全维度技术解析 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,可以分享一下给大家。点击跳转到网站。 https://www.captainbed.cn/ccc 文章目录 DeepSeek大模型 —— 全维度技术解析一、模型架构全景解析1…

EasyRTC嵌入式音视频通话SDK:基于ICE与STUN/TURN的实时音视频通信解决方案

在当今数字化时代,实时音视频通信技术已成为人们生活和工作中不可或缺的一部分。无论是家庭中的远程看护、办公场景中的远程协作,还是工业领域的远程巡检和智能设备的互联互通,高效、稳定的通信技术都是实现这些功能的核心。 EasyRTC嵌入式音…

qt open3dAlpha重建

qt open3dAlpha重建 效果展示二、流程三、代码效果展示 二、流程 创建动作,链接到槽函数,并把动作放置菜单栏 参照前文 三、代码 1、槽函数实现 void on_actionAlpha_triggered();//alpha重建 void MainWindow::

《深入浅出数据索引》- 公司内部培训课程笔记

深入浅出数据索引 内容:索引理论,索引常见问题,索引最佳实践,sql优化实战,问答 哈希不支持范围查询 4层 几个亿 5层 几十亿上百亿 B树的分裂,50-50分裂 都是往上插一个元素(红黑树是左右旋转&a…

PPT 技能:巧用 “节” 功能,让演示文稿更有序

在制作PPT时,你是否遇到过这样的情况:幻灯片越来越多,内容越来越杂,找某一页内容时翻得眼花缭乱?尤其是在处理大型PPT文件时,如果没有合理的结构,编辑和调整都会变得非常麻烦。这时候&#xff0…

Xss漏洞问题

https://bu1.github.io/2021/01/12/%E7%AC%AC%E5%8D%81%E4%BA%8C%E5%91%A8%EF%BC%9AXSS%E6%BC%8F%E6%B4%9E%E5%AD%A6%E4%B9%A0%E5%AE%9E%E6%88%98/ 后端绕开了前端&#xff0c;直接调用接口入库&#xff1a; <select οnchange“alert(1)”>12 前端拿到这个文本后&…

Docker概念与架构

文章目录 概念docker与虚拟机的差异docker的作用docker容器虚拟化 与 传统虚拟机比较 Docker 架构 概念 Docker 是一个开源的应用容器引擎。诞生于 2013 年初&#xff0c;基于 Go 语言实现。Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中&#xf…

3.使用ElementUI搭建侧边栏及顶部栏

1. 安装ElementUI ElementUI是基于 Vue 2.0 的桌面端组件库。使用之前&#xff0c;需要在项目文件夹中安装ElementUI&#xff0c;在终端中输入以下命令&#xff0c;进行安装。 npm i element-ui -S并在main.js中引入ElementUI 2. 使用elmentUI组件进行页面布局 2.1 清空原…

C# OPC DA获取DCS数据(提前配置DCOM)

OPC DA配置操作手册 配置完成后&#xff0c;访问远程ip&#xff0c;就能获取到服务 C#使用Interop.OPCAutomation采集OPC DA数据&#xff0c;支持订阅&#xff08;数据变化&#xff09;、单个读取、单个写入、断线重连

不同开发语言之for循环的用法、区别总结

一、Objective-C &#xff08;1&#xff09;标准的c风格 for (int i 0; i < 5; i) {NSLog("i %d", i); } &#xff08;2&#xff09;for in循环。 NSArray *array ["apple", "banana", "orange"]; for (NSString *fruit in …

MuBlE:为机器人操作任务规划提供了逼真的视觉观察和精确的物理建模

2025-03-05&#xff0c;由华为诺亚方舟实验室、捷克技术大学和帝国理工学院联合开发的MuBlE&#xff08;MuJoCo and Blender simulation Environment&#xff09;模拟环境和基准测试。通过结合MuJoCo物理引擎和Blender高质量渲染&#xff0c;为机器人操作任务规划提供了逼真的视…

ASP.NET Core 6 MVC 文件上传

概述 应用程序中的文件上传是一项功能&#xff0c;用户可以使用该功能将用户本地系统或网络上的文件上传到 Web 应用程序。Web 应用程序将处理该文件&#xff0c;然后根据需要对文件进行一些验证&#xff0c;最后根据要求将该文件存储在系统中配置的用于保存文件的存储中&#…

2025年03月07日Github流行趋势

项目名称&#xff1a;ai-hedge-fund 项目地址url&#xff1a;https://github.com/virattt/ai-hedge-fund项目语言&#xff1a;Python历史star数&#xff1a;12788今日star数&#xff1a;975项目维护者&#xff1a;virattt, seungwonme, KittatamSaisaard, andorsk, arsaboo项目…

Cursor + IDEA 双开极速交互

相信很多开发者朋友应该和我一样吧&#xff0c;都是Cursor和IDEA双开的开发模式:在Cursor中快速编写和生成代码&#xff0c;然后在IDEA中进行调试和优化 在这个双开模式的开发过程中&#xff0c;我就遇到一个说大不大说小不小的问题&#xff1a; 得在两个编辑器之间来回切换查…

3.3.2 用仿真图实现点灯效果

文章目录 文章介绍Keil生成.hex代码Proteus仿真图中导入.hex代码文件开始仿真 文章介绍 点灯之前需要准备好仿真图keil代码 仿真图参考前文&#xff1a;3.3.2 Proteus第一个仿真图 keil安装参考前文&#xff1a;3.1.2 Keil4安装教程 keil新建第一个项目参考前文&#xff1a;3.1…

点云软件VeloView开发环境搭建与编译

官方编译说明 LidarView / LidarView-Superbuild GitLab 我的编译过程&#xff1a; 安装vs2019&#xff0c;windows sdk&#xff0c;qt5.14.2&#xff08;没安装到5.15.7&#xff09;&#xff0c;git&#xff0c;cmake3.31&#xff0c;python3.7.9&#xff0c;ninja下载放到…

PDF处理控件Aspose.PDF,如何实现企业级PDF处理

PDF处理为何成为开发者的“隐形雷区”&#xff1f; “手动调整200页PDF目录耗时3天&#xff0c;扫描件文字识别错误导致数据混乱&#xff0c;跨平台渲染格式崩坏引发客户投诉……” 作为开发者&#xff0c;你是否也在为PDF处理的复杂细节消耗大量精力&#xff1f;Aspose.PDF凭…

《2025年软件测试工程师面试》消息队列面试题

消息队列 消息队列&#xff08;Message Queue&#xff0c;简称 MQ&#xff09;是一种应用程序之间的通信方法。 基本概念 消息队列是一种先进先出&#xff08;FIFO&#xff09;的数据结构&#xff0c;它允许一个或多个消费者从队列中读取消息&#xff0c;也允许一个或多个生产者…

大数据学习(55)-BI工具数据分析的使用

&&大数据学习&& &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 承认自己的无知&#xff0c;乃是开启智慧的大门 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4dd;支持一下博主哦&#x1f91…