最后
如果你已经下定决心要转行做编程行业,在最开始的时候就要对自己的学习有一个基本的规划,还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标,然后为之努力,坚持到底。如果你有幸看到这篇文章,希望对你有所帮助,祝你转行成功。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
‘88x31’, ‘120x90’, ‘120x60’, ‘120x240’,
‘125x125’, ‘728x90’, ‘160x600’, ‘120x600’,
‘300x600’
]
-
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。
校验真实数据 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:属性值
其中:
-
属性名和规则之间用 “|” 进行分割
-
规则是可选的,一共有七种规则
规则的含义具体要根据属性值来进行确定,不同的属性值对应的规则含义是不同的;
示例:
-
‘name|min-max’: value
-
‘name|count’: value
-
‘name|min-max.dmin-dmax’: value
-
‘name|min-max.dcount’: value
-
‘name|count.dmin-dmax’: value
-
‘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
- api接口
export const findPage = (data: any) => {
return postJson(‘user/list’, data)
}
- 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
})
- vue页面
<el-button type=“danger” @click=“fun”>危险按钮