Mock.js的学习使用
Mock.js
介绍：是一个功能强大的JavaScript库，用于模拟接口请求和生成随机数据。
作用：
- 帮助开发者独立开发、前后端分离
- 快速原型验证
- 测试异常情况
- 增加单元测试的真实性
原理：
通过拦截XMLHttpRequest或fetch等网络请求，根据定义的规则返回模拟的数据。
当开发者发起一个请求时，Mock.js会检查匹配的规则，并返回相应的模拟数据。
前端开发就可以在没有真实接口的情况下进行开发和调试。
使用方法：
-
安装：
npm install mockjs --save-dev -
引用
import Mock from 'mockjs';
举例：
使用Mock.mock()方法定义接口的模拟数据，模拟一个GET请求的用户接口
Mock.mock('/api/user', 'get', {
code: 200,
data: {
id: '@id', // @id 表示生成一个随机的唯一标识符
name: '@name', // @name 表示生成一个随机的人名
age: '@integer(20, 50)', // @integer(20, 50) 表示生成一个 20 到 50 之间的随机整数
},
});
语法规范
1、数据模板 定义规范:
数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：
// 属性名 name // 生成规则 rule // 属性值 value 'name|rule': value
- 属性值 中可以含有
@占位符。- 属性值 还指定了最终值的初始值和类型。
- 属性值有：String、Number、Boolean、Object、Array、Function、RegExp、Path几种类型。不同的类型，生成规则会有不同的意义
- 生成规则 的含义需要依赖 属性值 的类型才能确定。
- 生成规则 有 7 种格式：
'name|min-max': value 'name|count': value 'name|min-max.dmin-dmax': value // 如果value的类型是number,生成一个浮点数,整数部分大于等于 min、小于等于 max,小数部分保留dmin到dmax位。 'name|min-max.dcount': value 'name|count.dmin-dmax': value 'name|count.dcount': value 'name|+step': value
2、数据占位符 定义规范：
格式：
@占位符
@占位符(参数 [, 参数])
- 用
@来标识其后的字符串是 占位符。- 占位符 引用的是
Mock.Random中的方法。- 通过
Mock.Random.extend()来扩展自定义占位符。- 占位符 也可以引用 数据模板 中的属性。
- 占位符 会优先引用 数据模板 中的属性。
- 占位符 支持 相对路径 和 绝对路径。
除了常见的 @id、@name 等占位符，还有以下一些常用占位符：
@boolean：生成一个随机的布尔值。
@integer：生成一个随机的整数。
@float：生成一个随机的浮点数。
@date：生成一个随机的日期。
@image：生成一个随机的图片 URL。
@sentence：生成一个随机的句子。
@paragraph：生成一个随机的段落。
@email：生成一个随机的邮箱地址。
@url：生成一个随机的 URL 地址。