mockjs作用就是，生成随机模拟数据，拦截 ajax 请求，可以对数据进行增删改查。在生成数据时，我们就需要能够熟练使用 mock.js 的语法。
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' 运行结果：aaa1.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-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 等
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" , 生成中文名注意：
用 @ 来标识后边的字符串是标识符。 占位符引用的都是 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() } }]原文链接：https://www.toutiao.com/a7038875111243465227/
查看更多关于玩转 Mockjs，前端也能跑得很溜的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did64109