玩转 Mockjs,前端也能跑得很溜

时间:2021-12-11 16:47:24

玩转 Mockjs,前端也能跑得很溜

mockjs作用就是,生成随机模拟数据,拦截 ajax 请求,可以对数据进行增删改查。在生成数据时,我们就需要能够熟练使用 mock.js 的语法。

Mockjs 的语法规范包括两部分:数据模板定义规范和数据占位符定义规范。

一、数据模板定义规范

数据模板中的每个属性组成有:属性名、生成规则、属性值。

使用语法为:

  1. "name|rule": value 

值得注意的有:

  • 属性名和生成规则之间使用 | 分割。
  • 生成规则是可选参数。
  • 生成规则有 7 种形式。
  • 生成规则含义需要依赖于属性值的类型。
  • 属性值可以指定初始值和类型。

生成规则的格式分别有:

1.1、属性值是类型 String

变量的重复次数是一个随机值。

  1. 'name|min-max':string 
  2. 通过生成一个 string 重复 min 到 max 之间的一个字符串。。 
  3.  
  4. //使用 
  5. 'name|1-3':'a' 
  6. 运行结果:生成一个 a 的个数为 1-3 之间的字符串变量。可能的结果有:a、aa 、aaa 

直接指定重复次数。

  1. 'name|count':string 
  2. 通过生成一个 string 重复 count 次的一个字符串。。 
  3.  
  4. //使用 
  5. 'name|3':'a' 
  6. 运行结果:aaa 

1.2、属性值是 Number

生成不断累加的数字。

  1. 'name|+1':num 
  2. 初始值为 num ,生成的属性值自动加 1 

生成一个区间数值。

  1. 'name|min-max':num 
  2. 生成一个 min 到 max 之间的数值,num 用来指定类型 
  3.  
  4. //使用 
  5. 'name|1-3': 1 
  6. 运行结果:生成一个 1-3 之间的数字。可能的结果有:1、2、3 

生成带有小数点的数字。

  1. 'name|min-max.dmin-dmax': num 
  2. 生成一个浮点数,整数部分介于 min 和 max 之间,小数保留 dmin 到 dmax 位。num 用来指定类型。 
  3.  
  4. //使用 
  5. 'num1|1-10.1-2': 1 
  6. 运行结果:生成 1-10 之间的带有 1到 2 位小数的浮点数。如:2.1、3.12 等 
  7.  
  8. 'num2|5.1-2': 1 
  9. 生成一个整数部分为 5 ,保留 1 到 2 位小数的浮点数。如:5.1、5.33、5.09 等 
  10.  
  11. 'num3|5.2': 1 
  12. 生成整数为 5 ,保留两位小数的浮点数。如:5.11、5.67 等 

1.3、属性值是 Boolean

  1. 'name|1': boolean 
  2. 生成一个随机值,真 假 概率都是一半。 
  3.  
  4. //使用 
  5. 'isLike|1'true 
  6. 生成 isLike 的值可能为 true 、false。概率是一样的。 
  1. 'name|min-max': value 
  2. 随机生成一个布尔值, 
  3. 值为 value 的概率是 min / (min + max), 
  4. 值为 !value 的概率是 max / (min + max)。 
  5.  
  6. //使用 
  7. 'like|1-5'true 
  8. 生成 true 的 概率为 1/6 。生成 false 的概率为 5/6 

1.4、属性值是对象 Object

生成一个指定属性个数的对象。

  1. 'obj|num': object 
  2. 从属性值 object 中,随机选取 num 个属性。 
  3.  
  4. //使用 
  5. 'obj|2': { 
  6.              a: '1'
  7.              b: '2'
  8.              c: '3' 
  9.             } 
  10. 运行结果可能为: 
  11. {a: "3", b: "2"
  12. {c: "3", b: "2"
  13. {a: "3", c: "2"

生成一个属性个数随机的对象。

  1. 'obj|min-max': object 
  2. 从 object 中 随机选取 min 到 max 个属性,生成一个对象。 
  3.  
  4. //使用 
  5. 'obj|1-2': { 
  6.              a: '1'
  7.              b: '2'
  8.              c: '3' 
  9.             } 
  10. 运行结果可能为: 
  11. {a: "3"
  12. {b: "3"
  13. {c: "3"
  14. {a: "3", b: "2"
  15. {c: "3", b: "2"
  16. {a: "3", c: "2"

1.5、属性值是数组 Array

取数组中某个元素作为结果。

  1. 'arr|1':array 
  2. 从属性值 array 中随机选取 1 个元素作为结果返回 
  3.  
  4. //使用 
  5. 'arr|1':[1,2,3] 
  6. 运行结果为:1、2、3 三种结果 

生成新数组。

  1. 'arr|min-max': array 
  2. 通过重复 array 的元素生成新数组,重复次数 min 到 max 。 
  3.  
  4. //使用 
  5. 'arr|1-2': [ 1,2,3 ] 
  6. 运行结果为:[ 1,2,3 ] 或 [ 1,2,3,1,2,3 ] 
  1. 'arr|num': array 
  2. 通过重复 array 的元素生成新数组,重复次数 num 次 。 
  3.  
  4. //使用 
  5. 'arr|2': [ 1,2,3 ] 
  6. 运行结果为: [ 1,2,3,1,2,3 ] 

1.6、属性值是函数 Function

  1. 'name':function 
  2. function 返回值作为最终的属性值。 
  3.  
  4. //使用 
  5. 'name': ()=>{ 
  6.  return 'web learn' 
  7. 运行结果为 web learn 

在数据占位符中,属性值是函数有重要的意义。待会会重点解释。

1.7、属性值是正则 RegExp

  1. 'name': regexp 
  2. 根据正则表达式 regexp 反向生成可以匹配的字符串。用于生成自定义格式的字符串 
  3.  
  4. //使用 
  5. 'reg': /[a-zA-Z0-9]2/ 
  6. 生成大小写字母和数字任意组成的长度为 2 的字符串 
  7.  
  8. 'reg':/\d{5,10}/ 
  9. 生成任意的 5 到 10 位的数字字符串 

二、数据占位符定义规范

数据占位符只是在属性字符串中占个位置,并不会出现在最终的属性值中。

使用格式:

  1. @占位符 
  2. @占位符(参数 [, 参数]) 
  3.  
  4. //使用 
  5. 'name'"@name"
  6.  生成英文名,如:Edward Rodriguez 
  7.  
  8. //带有参数 
  9. 'first':"@name(middle)"
  10. 生成带有中间名的英文名 。如:Ruth Paul Robinson 
  11.  
  12. 'name'"@cname"
  13.  生成中文名 

注意:

  • 用 @ 来标识后边的字符串是标识符。
  • 占位符引用的都是 mock.Random 中的方法。
  • 如果需要扩展自定义占位符,可使用 Mock.Random.extend()。
  • 占位符也可以引用 “数据模板” 中的内容。
  • 占位符优先引用数据模板中的属性。
  • 支持相对和绝对路径。
  1. Mock.mock('@string("number", 5)'
  2. 生成一个五位数的字符串 
  3.  
  4. Mock.mock('@color'
  5. 生成随机的颜色 
  6. //等同于 
  7. Random.color() 

三、使用举例

创建一个 api 接口,返回一个随机生成的数组:

  1. export default [ 
  2.  { 
  3.   url: "/api/list"
  4.   method: "post"
  5.   response: ({ url, body }) => { 
  6.    // body 是post方法时传入的数据 
  7.    // url 是请求接口,get方法时,也包含传递的参数 
  8.    return { 
  9.     code: 200, 
  10.     message: "ok"
  11.     //生成一个数组 
  12.     // 长度介于 10 到 20 之间 
  13.     'list|10-20': [{ 
  14.      name:'@cname' //生成中文名 
  15.     }] 
  16.    }; 
  17.   } 
  18.  } 

占位符引用的都是 Mock.random 内的方法,所以我们可以把上述代码更改为:

  1. 'list|10-20': [{ 
  2.  name:Random.cname() //生成中文名 
  3. }] 

此时我们再查阅的时候,就发现生成的数组内,名字都是一模一样的。如果我们想生成不一样的姓名,该如何解决呢?

解决办法:把属性值更改为函数,将函数的返回值作为最终结果。

  1. 'list|10-20': [{ 
  2.  name:()=>{ 
  3.   Random.cname() 
  4.  }  
  5. }] 

原文链接:https://www.toutiao.com/a7038875111243465227/