玩转 Mockjs，前端也能跑的很溜

​

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

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

一、数据模板定义规范

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

使用语法为：

"name|rule": value

值得注意的有：

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

生成规则的格式分别有：

1.1、属性值是类型 String

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

\'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

1.2、属性值是 Number

生成不断累加的数字。

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

生成一个区间数值。

\'name|min-max\':num
生成一个 min 到 max 之间的数值，num 用来指定类型

//使用
\'name|1-3\': 1
运行结果：生成一个 1-3 之间的数字。可能的结果有：1、2、3

生成带有小数点的数字。

\'name|min-域名-dmax\': num
生成一个浮点数，整数部分介于 min 和 max 之间，小数保留 dmin 到 dmax 位。num 用来指定类型。

//使用
\'num1|1-10.1-2\': 1
运行结果：生成 1-10 之间的带有 1到 2 位小数的浮点数。如：2.1、域名 等

\'num2|5.1-2\': 1
生成一个整数部分为 5 ,保留 1 到 2 位小数的浮点数。如：5.1、域名、域名 等

\'num3|5.2\': 1
生成整数为 5 ，保留两位小数的浮点数。如：域名、域名 等

1.3、属性值是 Boolean

\'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

1.4、属性值是对象 Object

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

\'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"}

1.5、属性值是数组 Array

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

\'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 ]

1.6、属性值是函数 Function

\'name\':function
function 返回值作为最终的属性值。

//使用
\'name\': ()=>{
 return \'web learn\'
}
运行结果为 web learn

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

1.7、属性值是正则 RegExp

\'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",
 生成中文名

注意：

• 用 @ 来标识后边的字符串是标识符。
• 占位符引用的都是 域名om 中的方法。
• 如果需要扩展自定义占位符，可使用 域名nd()。
• 占位符也可以引用 “数据模板” 中的内容。
• 占位符优先引用数据模板中的属性。
• 支持相对和绝对路径。

域名(\'@string("number", 5)\')
生成一个五位数的字符串

域名(\'@color\')
生成随机的颜色
//等同于
域名r()

三、使用举例

创建一个 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\' //生成中文名
    }]
   };
  }
 }
]

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

\'list|10-20\': [{
 name:域名e() //生成中文名
}]

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

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

\'list|10-20\': [{
 name:()=>{
  域名e()
 } 
}]

好了小编今天的文章就到此结束了，喜欢我的可以点个关注哦！

​