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

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博客

相关推荐
崔庆才丨静觅3 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60614 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了4 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅4 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅4 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅5 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment5 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅5 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊5 小时前
jwt介绍
前端
爱敲代码的小鱼5 小时前
AJAX(异步交互的技术来实现从服务端中获取数据):
前端·javascript·ajax