Easy Mock 基本用法

发表于 | 分类于 | 阅读次数：
本文字数： 7.6k | 阅读时长 ≈ 7 分钟

前言

在上一篇文章，我们了解了如何《使用 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 官方文档
-------------本文结束  感谢您的阅读-------------
xkcoding wechat
欢迎来我的公众号「xkcoding小凯扣丁」逛逛
o(╯□╰)o 赞助一杯咖啡 ~~