mock.js的使用

2023-11-22 17:38:10

通常项目过程中,你所需要的api返回的数据,后端可能还未完成,只有文档,此时你需要借助mock拦截ajax请求,生成随机的数据,完成页面的数据渲染等工作

有不同的针对mock.js的部署方案,就不一一列举了,不同的部署方案有不同的优缺点,可自习选择,推荐一篇博客mock的完美解决方案

基本使用:(方案之一)

1.安装 yarn add mockjs

2.导入在mock.js文件中 import Mock from 'mockjs'

3.注册 Mock.mock('需要拦截的url地址',{产生的随机数据})

4.引入在main.js中 import '路径地址'

Mock 数据生成规范

可以通过两种方式告诉 Mock 如何生成数据，一种是自定义规则的数据模板，一种是占位符，提供一些常见的随机值，例如·图片、邮箱、人名等

1.数据模板定义规范（Data Template Definition，DTD）

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

'属性名|生成规则':属性值

'name|rule': value

属性名就是参数名

针对不同的属性值类型，生成规则的意义也不一样，有的生成规则是概率（Boolean），有的生成规则是重复

Mock.mock({
 "string|1-10": "★",//随机生成 1-10 个字符串"★"
 "string2|3": "★",//固定生成 3 个字符串"★"
 "number|+1": 202,//每次请求自增 1,初始值为 202
 "number2|1-100.1-10": 1,//生成一个浮点数，整数部分1-100，小数部分保留1-10 位，属性值 number 只是用来确定类型。
 "boolean|1-2": true,//值为 true 的概率是 1/(1+2)，值为 false 的概率同样是 2/3。
 "regexp": /[a-z][A-Z][0-9]/,//随机生成满足正则的字符串
 "object|2": {
   "310000": "上海市",
   "320000": "江苏省",
   "440000":"广东省"
 },//对象中随机选取 2 个属性，生成对象
 "array|1": [ "AMD","CMD"],//数组中随机选取 1 个元素，最终生成值
 "arrayRepeat|3": ["AMD","CMD"],//重复数组元素 3 次，最终生成数组
 "date":"@date"//生成随机日期
})

生成的结果:

{
 "string": "★★",
 "string2": "★★★",
 "number": 202,
 "number2": 71.73566,
 "boolean":true,
 "regexp": "qS8",
 "absolutePath": "★★ demo",
 "object": {
   "310000": "上海市",
   "440000": "广东省"
 },
 "array": "AMD",
 "arrayRepeat": ["AMD","CMD", "AMD","CMD",AMD","CMD"],
 "date":"1980-12-19"
}

2.数据占位符定义规范（Data Placeholder Definition，DPD）

占位符是 mock 提供一些常用的随机数据例如随机生成的图片、邮箱、人名等

用法1: 直接使用

Mock.mock('@date')//1982-10-15
Mock.Random.date()//1997-12-31

用法2: 在数据模板中使用

 Mock.mock({
  "date":"@date",//随机日期
  "float":"@float",//随机浮点数
  "name":"xxxx",//固定值
  "quoteStrin1": "@name",//引用其他属性
  "user": {
    "name": "demo"
  },//固定值
  "quoteString": "@user/name",//引用其他属性
 })

{
    "date":"2020-06-29",
    "float":2202285915843574.5,
    "name":"xxxx",
    "quoteStrin1":"xxxx",
    "user ":{
       "name":"demo"
    },
    "quoteString":"demo"
}

需要注意，如果引用的属性名和 Mock 占位符名称一样（上面例子中的 quoteStrin1），引用值优先级比占位符高，所以最后 quoteStrin1 属性值与属性 name 的属性值一致,而不是占位符生成的值(Paul Miller)。

Mock 函数

1.Mock.mock 拦截请求，生成模拟数据

import Mock from 'mockjs'
Mock.mock('http://xxxx/channels', {
  data: {
    'channels|1-10': [
      {
        name: '测试mockjs',
        'id|+1': 0,
        title: '测试'
      }
    ]
  }
})

2.Mock.Random

Mock.Random 是一个工具类，用于生成各种随机数据

类型	方法	备注
Basic	boolean, natural, integer, float, character, string, range
Date	date,time, datetime, now
Image	image, dataImage	生成图片地址
Color	color,hex,rgb,rgba,hsl
Text	paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name	first, last, name, cfirst, clast, cname
Web	url, domain,protocol, email, ip, tld
Address	region,province,city,county,zip
Helper	capitalize, upper, lower, pick, shuffle	方法，Mock.mock(’@lower(“HELLO”)’)->hello
Miscellaneous	uuid,guid, id,increment

码农公寓