玩转 Mockjs,前端也能跑的很溜
mockjs作用就是,生成随机模拟数据,拦截 ajax 请求,可以对数据进行增删改查。在生成数据时,我们就需要能够熟练使用 mock.js 的语法。
Mockjs 的语法规范包括两部分:数据模板定义规范和数据占位符定义规范。
一、数据模板定义规范
数据模板中的每个属性组成有:属性名、生成规则、属性值。
使用语法为:
值得注意的有:
- 属性名和生成规则之间使用 | 分割。
- 生成规则是可选参数。
- 生成规则有 7 种形式。
- 生成规则含义需要依赖于属性值的类型。
- 属性值可以指定初始值和类型。
生成规则的格式分别有:
1.1、属性值是类型 String
变量的重复次数是一个随机值。
直接指定重复次数。
1.2、属性值是 Number
生成不断累加的数字。
生成一个区间数值。
生成带有小数点的数字。
1.3、属性值是 Boolean
1.4、属性值是对象 Object
生成一个指定属性个数的对象。
生成一个属性个数随机的对象。
1.5、属性值是数组 Array
取数组中某个元素作为结果。
生成新数组。
1.6、属性值是函数 Function
在数据占位符中,属性值是函数有重要的意义。待会会重点解释。
1.7、属性值是正则 RegExp
二、数据占位符定义规范
数据占位符只是在属性字符串中占个位置,并不会出现在最终的属性值中。
使用格式:
注意:
- 用 @ 来标识后边的字符串是标识符。
- 占位符引用的都是 mock.Random 中的方法。
- 如果需要扩展自定义占位符,可使用 Mock.Random.extend()。
- 占位符也可以引用 “数据模板” 中的内容。
- 占位符优先引用数据模板中的属性。
- 支持相对和绝对路径。
三、使用举例
创建一个 api 接口,返回一个随机生成的数组:
占位符引用的都是 Mock.random 内的方法,所以我们可以把上述代码更改为:
此时我们再查阅的时候,就发现生成的数组内,名字都是一模一样的。如果我们想生成不一样的姓名,该如何解决呢?
解决办法:把属性值更改为函数,将函数的返回值作为最终结果。
好了小编今天的文章就到此结束了,喜欢我的可以点个关注哦!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?