mockjs语法基础，前端岗面试

]

• background（可选），图片的背景色。默认值为 ‘#000000’。

• foreground（可选），图片的前景色（文字）。默认值为 ‘#FFFFFF’。

• format（可选），图片的格式。默认值为 ‘png’，可选值包括：‘png’、‘gif’、‘jpg’。

• text（可选），图片上的文字。默认值为参数 size。

一段随机Base64图片编码的返回

Random.dataImage( size?, text? )

说明：

• size（可选），图片的宽高，格式为 ‘宽x高’。默认从下面的数组中随机读取一个：

[

‘300x250’, ‘250x250’, ‘240x400’, ‘336x280’,

‘180x150’, ‘720x300’, ‘468x60’, ‘234x60’,

‘88x31’, ‘120x90’, ‘120x60’, ‘120x240’,

‘125x125’, ‘728x90’, ‘160x600’, ‘120x600’,

‘300x600’

]

• text（可选），图片上的文字。默认值为参数 size。

Mock.valid( template, data )

---

校验真实数据 data 与数据模板 template 是否匹配。

• template 必选。 表示数据模板，可以是对象或字符串。例如 { 'list|1-10':[{}] }、'@EMAIL'。

• data 必选。 表示真实数据。

示例：

var template = {

name: ‘value1’

}

var data = {

name: ‘value2’

}

Mock.valid(template, data)

// =>

[

{

“path”: [

“data”,

“name”

],

“type”: “value”,

“actual”: “value2”,

“expected”: “value1”,

“action”: “equal to”,

“message”: “[VALUE] Expect ROOT.name’value is equal to value1, but is value2”

}

]

数据模板

---

数据模板中的每个属性由 属性名、规则、属性值三部分组成。格式：'name|rule':value

说明：

• name：属性名

• rule：生成规则：(可选)

• value：属性值

其中：

• 属性名和规则之间用 “|” 进行分割

• 规则是可选的，一共有七种规则

规则的含义具体要根据属性值来进行确定，不同的属性值对应的规则含义是不同的；

示例：

1. ‘name|min-max’: value

2. ‘name|count’: value

3. ‘name|min-max.dmin-dmax’: value

4. ‘name|min-max.dcount’: value

5. ‘name|count.dmin-dmax’: value

6. ‘name|count.dcount’: value 7. ‘name|+step’: value

属性值的类型其实就是s 中数据的类型：string、number、boolean、object、array、function以及正则reg：

• string

’ name| min-max’ : string ; //通过重复string生成一个字符串，string的重复次数 大于等于min，小于等于max ;

’ name| count’ : string; //通过重复string生成一个字符串，重复次数为 count ;

• number

’ name| min-max’ : number ; //生成一个大于等于min 小于等于 max 的整数；

’ name| +1’ : number ; //属性值自动加1，初始值为 number ;

‘ name| min-max.dmin-dmax’ : number ; //生成一个浮点数，整数部分大于等于min，小于等于max； 小数部分保留 dmin 到 dmax 位；

• boolean

’ name| 1’ : boolean ; //随机生成一个布尔值，值为 true 和 false 的概率均为 50%；

’ name| min-max’ : boolean ; //随机生成一个布尔值，值为 true 的概率为 min/( min + max) ； 值为 false 的概率为 max/( min + max)；

• object

’ name| count’ : object ; //从object中随机抽取count 个属性；

’ name| min-max’ : object; //从object中随机抽取 min 到 max 个属性；

• array

’ name| 1’: array ; //从array中随机选取一个值最为最终值；

’ name| +1’ : array; //从array 中顺序选择一个元素，最为最终值；

’ name| min-max’ : array ; //通过重复array 生成一个新数组，重复的次数大于等于min, 小于等于max ;

’ name| count’ : array; //通过重复array 生成一个新数组，重复的次数为 count ;

• function

’ name’ : function ; // 执行function，使其最终的返回值最为 最终的属性值；函数的上下文为 name 所在的对象；

• RegExp

’ name’ : reg ; //根据正则去生成一个符合这个正则表达式规则的属性值；

属性值中可以包含 @占位符，并且属性值可指定最终值的初始值以及类型；

数据占位符只是在属性值字符串中占据一个位置，最终并不出现在属性值中，占位符的格式为 @占位符 || @占位符（参数 [，参数]）;

使用数据占位符的时候需要注意的是：

• 用@来标识的其后的是占位符；

• 占位符应用的是Mock.random的方法；

• 通过Mock.random.extend()来扩展自定义占位符；

• 占位符也可以引用数据模板中的数据而且会优先引用；

• 占位符支持相对路径也支持绝对的路径；

示例

//生成指定次数字符串

const data = Mock.mock({

“string|4”: “yx！”

})

console.log(data)

//生成指定范围长度字符串

const data = Mock.mock({

“string|1-8”: “yx”

})

console.log(data)

//生成一个随机字符串

const data = Mock.mock({

“string”: “@cword”

})

console.log(data)

//生成指定长度和范围

const data = Mock.mock({

string: “@cword(1)”,

str: ‘@cword(10,15)’

})

console.log(data)

//生成标题和句子

const data = Mock.mock({

title: “@ctitle”,

sentence: ‘@csentence’

})

console.log(data)

//生成指定长度的标题和句子

const data = Mock.mock({

title: “@ctitle(8)”,

sentence: ‘@csentence(50)’

})

//生成指定范围的

const data = Mock.mock({

title: “@ctitle(5,8)”,

sentence: ‘@csentence(50,100)’

})

console.log(data)

//随机生成段落

const data = Mock.mock({

content: ‘@cparagraph()’

})

console.log(data)

//生成指定数字

const data = Mock.mock({

“number|80”: 1

})

console.log(data)

//生成范围数字

const data = Mock.mock({

“number|1-999”: 1

})

console.log(data)

//随机生成标识

const data = Mock.mock({

id: ‘@increment()’

})

console.log(data)

//随机生成姓名-地址-身份证号

const data = Mock.mock({

name: ‘@cname()’,

idCard: ‘@id()’,

address: ‘@city(true)’ // 如果@city(),只会生成市，如果@city(true)会生成省和市

})​

console.log(data)

const data = Mock.mock({

‘list|50-99’:[

{

name: ‘@cname()’,

address: ‘@city(true)’,

id: ‘@increment(1)’ // 每次都增加1

}

]

})

综合示例

假设已经安装了axios、mockjs

1. api接口

export const findPage = (data: any) => {

return postJson(‘user/list’, data)

}

2. mock接口

import Mock from ‘mockjs’ // 引入mockjs

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

Mock.setup({//设置请求延时时间

timeout: 1000

})

let userList = []

for (let i = 0; i < 10; i++) {

const o = {

title: Mock.mock(“@ctitle”),

idCard: Mock.mock(‘@id()’),

addr: Mock.mock(‘@city(true)’),

name: Mock.mock({“string|1-8”: “yx”})

}

userList.push(o)

}

Mock.mock(constant.test_baseUrl + ‘/user/list’, ‘post’, (config: any) => {

//获取前端传递过来的数据

console.info(config.body)

return userList

})

3. vue页面

<el-button type=“danger” @click=“fun”>危险按钮