前端之Mockjs

共计 2867 个字符，预计需要花费 8 分钟才能阅读完成。

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

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

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

使用语法为：

"name|rule": value

值得注意的有：

属性名和生成规则之间使用 | 分割。

生成规则是可选参数。

生成规则有 7 种形式。

生成规则含义需要依赖于属性值的类型。

属性值可以指定初始值和类型。

生成规则的格式分别有：

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

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

直接指定重复次数。

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

生成不断累加的数字。

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

生成一个区间数值。

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

生成带有小数点的数字。

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

'name|1': boolean 
生成一个随机值，真 假 概率都是一半。// 使用 
'isLike|1': true 
生成 isLike 的值可能为 true、false。概率是一样的。

'name|min-max': value 
随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。// 使用 
'like|1-5': true 
生成 true 的 概率为 1/6。生成 false 的概率为 5/6

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

'obj|num': object 
从属性值 object 中，随机选取 num 个属性。// 使用 
'obj|2': { 
             a: '1', 
             b: '2', 
             c: '3' 
            } 
运行结果可能为：{a: "3", b: "2"} 
{c: "3", b: "2"} 
{a: "3", c: "2"}

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

'obj|min-max': object 
从 object 中 随机选取 min 到 max 个属性，生成一个对象。// 使用 
'obj|1-2': { 
             a: '1', 
             b: '2', 
             c: '3' 
            } 
运行结果可能为：{a: "3"} 
{b: "3"} 
{c: "3"} 
{a: "3", b: "2"} 
{c: "3", b: "2"} 
{a: "3", c: "2"}

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

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

生成新数组。

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

'arr|num': array 
通过重复 array 的元素生成新数组，重复次数 num 次。// 使用 
'arr|2': [1,2,3] 
运行结果为：[1,2,3,1,2,3]

'name':function 
function 返回值作为最终的属性值。// 使用 
'name': ()=>{return 'web learn'} 
运行结果为 web learn

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

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

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

使用格式：

@占位符 
@占位符 (参数 [, 参数]) 
 
// 使用 
'name': "@name", 
 生成英文名，如：Edward Rodriguez 
 
// 带有参数 
'first':"@name(middle)", 
生成带有中间名的英文名。如：Ruth Paul Robinson 
 
'name': "@cname", 
 生成中文名 

注意：

用 @来标识后边的字符串是标识符。

占位符引用的都是 mock.Random 中的方法。

如果需要扩展自定义占位符，可使用 Mock.Random.extend()。

占位符也可以引用“数据模板”中的内容。

占位符优先引用数据模板中的属性。

支持相对和绝对路径。

Mock.mock('@string("number", 5)') 
生成一个五位数的字符串 
 
Mock.mock('@color') 
生成随机的颜色 
// 等同于 
Random.color()

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

export default [ 
 { 
  url: "/api/list", 
  method: "post", 
  response: ({url, body}) => { 
   // body 是 post 方法时传入的数据 
   // url 是请求接口，get 方法时，也包含传递的参数 
   return { 
    code: 200, 
    message: "ok", 
    // 生成一个数组 
    // 长度介于 10 到 20 之间 
    'list|10-20': [{name:'@cname' // 生成中文名}] 
   }; 
  } 
 } 
]

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

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

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

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

'list|10-20': [{name:()=>{Random.cname() 
 }  
}]

阿里云 2 核 2G 服务器 3M 带宽 61 元 1 年，有高配

腾讯云新客低至 82 元 / 年，老客户 99 元 / 年

代金券：在阿里云专用满减优惠券