easymock 图片_Easy Mock 基本用法
前言
在上一篇文章，我们了解了如何《使用 docker 运行 easy-mock》，这篇文章我们来学习下 Easy Mock 的基本用法，掌握 Easy Mock 的奇淫技巧，前端小姐姐写页面再也不需要去求后端的小哥哥了。
1. 基础语法Easy Mock 集成了 Mock.js ，因此可以使用 Mock.js 的语法来 mock 数据。
1.支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等；
2.支持扩展更多数据类型，支持自定义函数和正则。
定义返回格式如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17{
"string|1-10": "★",
"string2|3": "★★",
"number|+1": 202,
"number2|1-100.1-10": 1,
"boolean|1": true,
"regexp": /[a-z][A-Z][0-9]/,
"absolutePath": "@/string @/user/name",
"user": {
"name": "demo"
},
"object|2": {
"310000": "上海市",
"320000": "江苏省"
},
"array|1": ["AMD"]
}
你将得到如下结果：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17{
"string": "★★★★★★★★",
"string2": "★★★★★★",
"number": 202,
"number2": 36.516242,
"boolean": false,
"regexp": "pT8",
"absolutePath": "★★★★★★★★ demo",
"user": {
"name": "demo"
},
"object": {
"310000": "上海市",
"320000": "江苏省"
},
"array": "AMD"
}
2. 数据占位符使用数据占位符，可以让你的数据更加真实。
定义返回格式如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23{
"string|1-2": "@string",
"integer": "@integer(10, 30)",
"float": "@float(60, 100, 2, 2)",
"boolean": "@boolean",
"date": "@date(yyyy-MM-dd)",
"datetime": "@datetime",
"now": "@now",
"url": "@url",
"email": "@email",
"region": "@region",
"city": "@city",
"province": "@province",
"county": "@county",
"upper": "@upper(@title)",
"guid": "@guid",
"id": "@id",
"image": "@image(200x200)",
"title": "@title",
"cparagraph": "@cparagraph",
"csentence": "@csentence",
"range": "@range(2, 10)"
}
你将得到如下结果：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32{
"string": "fQsTs@Tzdh",
"integer": 18,
"float": 75.86,
"boolean": true,
"date": "2000-05-26",
"datetime": "2012-04-11 08:59:12",
"now": "2019-11-15 06:11:39",
"url": "ftp://qrxpkel.br/ftjjrko",
"email": "i.dsfzdangko@phu.ee",
"region": "华南",
"city": "温州市",
"province": "福建省",
"county": "弋阳县",
"upper": "XSNRPAYY BXWRBBKTBC GCGCJCE XQFMJTW",
"guid": "19F0e2e1-E9ad-BD92-A0D5-A5f4AC92BED4",
"id": "63000019830408333X",
"image": "http://dummyimage.com/200x200",
"title": "Unrhbf Xrlpkb Yxzd",
"cparagraph": "老书称明选京基属处观取容形观角清行。给克群阶外活经导治书华与十下者志以导。派传当才已劳支南学示期构该。",
"csentence": "传使引都值四六始常同进放传转指每。",
"range": [
2,
3,
4,
5,
6,
7,
8,
9
]
}
3. 响应式数据借助 Easy Mock 提供的内置对象，我们可以根据接收到的请求参数，自定义数据返回，让数据再 真实一点。
3.1. 路径参数
如果你想要获取类似 http://www.domain.com/test/:id 中的 id 参数，可以通过 _req.params.参数名 的方式获取，参考如下：1
2
3
4
5
6
7
8
9{
data: {
id: function({
_req
}) {
return _req.params.id
}
}
}
在 PostMan 测试：
https://mock.xkcoding.com/mock/5dce0fdaaac115001c03b239/test/test3/1
得到如下结果：1
2
3
4
5{
"data": {
"id": "1"
}
}
3.2. 查询参数
如果你想要获取类似 http://www.domain.com/test?name=xkcoding 中的 name 参数，可以通过 _req.query.参数名 的方式获取，参考如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15{
success: function({
_req
}) {
return _req.query.name ? true : false
},
data: {
id: function({
_req
}) {
const name = "name 为空"
return _req.query.name || name
}
}
}
在 PostMan 测试：
https://mock.xkcoding.com/mock/5dce0fdaaac115001c03b239/test/test4
得到如下结果：1
2
3
4
5
6{
"data": {
"id": "name 为空"
},
"success": false
}
在 PostMan 测试：
https://mock.xkcoding.com/mock/5dce0fdaaac115001c03b239/test/test4?name=xkcoding
得到如下结果：1
2
3
4
5
6{
"data": {
"id": "xkcoding"
},
"success": true
}
3.3. body 参数
如果你根据传过来的 body 参数返回，你可以使用 _req.body 拿到 body 数据，参考方式如下：1
2
3
4
5
6
7{
data: function({
_req
}) {
return _req.body
}
}
在 PostMan 测试，使用 POST 方式
https://mock.xkcoding.com/mock/5dce0fdaaac115001c03b239/test/test5
传入参数1
2
3
4
5
6
7{
"text": "测试文本",
"likes": [
"LOL",
"CODE"
]
}
得到如下结果：1
2
3
4
5
6
7
8
9{
"data": {
"text": "测试文本",
"likes": [
"LOL",
"CODE"
]
}
}
4. 高阶技巧
4.1. 快捷键
Easy Mock 项目操作界面支持快捷键
全局导航p 个人项目
g 团队项目
w 工作台
d 文档
全局操作n 创建项目
s 搜索
4.2. 语法提示
编辑器页面支持语法提示功能，输入 em. 即可。em.base
em.date
em.image
em.color
em.text
em.name
em.web
em.address
em.helper
em.miscellaneous
em.demo.all
4.3. 如何使用 Easy Mock 实现分页数据分页数据就需要根据参数返回当前页的数据，这就用到了上面提到的 响应式数据。
直接给出 Mock 模板吧，逻辑不复杂，看不懂的朋友评论留言提问呀~1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39{
"code": 200,
"success": true,
"msg": "操作成功",
"data": function({
_req,
Mock
}) {
const total = 94;
let i = 0,
list = [],
currentPage = _req.query.currentPage ? _req.query.currentPage : 1, //当前页数
pageSize = _req.query.pageSize ? _req.query.pageSize : 10, //每次返回的条数
len = (total - pageSize * (currentPage - 1)) < pageSize ? (total - pageSize * (currentPage - 1)) : pageSize;
for (i; i < len; i++) {
// 当前序号 -> i + pageSize * (currentPage - 1) + 1
const width = Mock.mock('@integer(200, 400)');
list.push(
Mock.mock({
"id": "@id",
"title": "《@ctitle(5,10)》",
"summary": "@cword(3)",
"image": Mock.Random.image(width + 'x16:9', Mock.Random.color(), '#FFF', 'jpg', 'xkcoding'),
"publishTime": "@now",
"author": "xkcoding",
"watch": "@integer(0, 1000)",
"star": "@integer(0, 100)",
"fork": "@integer(0, 100)"
})
);
}
return {
total,
list
}
}
}
我们在 PostMan 测试：
https://mock.xkcoding.com/mock/5dce0fdaaac115001c03b239/test/test6?currentPage=1&pageSize=2
得到如下结果：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32{
"code": 200,
"success": true,
"msg": "操作成功",
"data": {
"total": 94,
"list": [
{
"id": "420000198912064299",
"title": "《东路运院少派成开团》",
"summary": "处前类",
"image": "http://dummyimage.com/240x16:9/79f2ee/FFF.jpg&text=xkcoding",
"publishTime": "2019-11-15 07:31:44",
"author": "xkcoding",
"watch": 990,
"star": 35,
"fork": 63
},
{
"id": "22000019910311824X",
"title": "《气影几把理时界海》",
"summary": "志定业",
"image": "http://dummyimage.com/256x16:9/f2cb79/FFF.jpg&text=xkcoding",
"publishTime": "2019-11-15 07:31:44",
"author": "xkcoding",
"watch": 413,
"star": 29,
"fork": 51
}
]
}
}
5. 附录
Easy Mock 响应式数据中，可以为某个属性指定 Function，为 Function 提供了 _req 对象，下面是 Function 的参数说明：对象描述MockMock 对象
_req.url获得请求 url 地址
_req.method获取请求方法
_req.params获取 url 参数对象
_req.querystring获取查询参数字符串(url中?后面的部分)，不包含 ?
_req.query将查询参数字符串进行解析并以对象的形式返回，如果没有查询参数字符串则返回一个空对象
_req.body当 post 请求以 x-www-form-urlencoded 方式提交时，我们可以拿到请求的参数对象
_req.path获取请求路径名
_req.header获取请求头对象
_req.originalUrl获取请求原始地址
_req.search获取查询参数字符串，包含 ?
_req.host获取 host (hostname:port)
_req.hostname获取 hostname
_req.type获取请求 Content-Type，不包含像 “charset” 这样的参数
_req.protocol返回请求协议
_req.ip请求远程地址
_req.get(field)获取请求 header 中对应 field 的值
_req.cookies(field)获取请求 cookies 中对应 field 的值
同时也提供了自定义响应的配置，封装在 _res 对象中字段描述status可以定制返回的 http status code，默认是 200
cookies可以定制需要设置的 cookie(暂时不支持设置过期时间等)
headers可以定制返回的 response 的 header
data如果有这个字段，会以此数据直接覆盖整个返回的数据，并且此处不支持 mock 的语法(如果 _res.status 的值为 200，则不会覆盖默认定义的 mock 数据)
6. 参考Easy Mock 官方文档
Mock.js 官方文档