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 官方文档
-------------本文结束  感谢您的阅读-------------
o(╯□╰)o我只要一毛钱的鼓励~~