前端数据模拟 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 分钟前
从 Figma 到 Qt:Qtitan 能减少哪些界面还原工作?
前端·qt·嵌入式·figma·图形界面·工业界面·qtitan
YWL6 分钟前
OpenLayers导出功能:地图截图+GeoJSON导出完整方案,从Canvas合并到PDF生成
前端·vue·openlayers
苦瓜小生14 分钟前
【前端】【力扣与手撕】十天带你刷完前端算法与手撕,全是最简单好记的最优解法!day4
前端·数据结构·算法·leetcode·面试
mayaairi24 分钟前
Vue2 实战进阶:表单数据收集、指令系统与自定义指令全解析
前端·javascript·vue.js
计算机魔术师34 分钟前
实测GPT-6 Astra后,我发现过去十年的专业门槛正在失效
前端
虎头金猫37 分钟前
Pic Smaller 本地部署:压缩图片、转换格式,再搭建自己的 Web 工具
运维·前端·开源·aigc·ai编程·ai写作
hunterandroid37 分钟前
Android ANR 排查实战:从线上告警到主线程卡点定位
android·前端
图扑软件1 小时前
下篇・换墨|主题/多语言/移动端,一套组件全覆盖
前端·javascript·ui·性能优化·数据可视化
程序员老赵1 小时前
Docker 部署 TeX Live:轻松搭建 LaTeX 论文排版编译平台
前端·docker·latex
Zhu7581 小时前
部署安全的pg数据库,搭配pgadmin实现web界面管理
前端·数据库·安全