Easy Mock 基本用法

前言

在上一篇文章，我们了解了如何《使用 docker 运行 easy-mock》，这篇文章我们来学习下 Easy Mock 的基本用法，掌握 Easy Mock 的奇淫技巧，前端小姐姐写页面再也不需要去求后端的小哥哥了。

1. 基础语法

Easy Mock 集成了 Mock.js ，因此可以使用 Mock.js 的语法来 mock 数据。

1.支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等；2.支持扩展更多数据类型，支持自定义函数和正则。

定义返回格式如下：

{
  "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"]
}

你将得到如下结果：

{
  "string": "★★★★★★★★",
  "string2": "★★★★★★",
  "number": 202,
  "number2": 36.516242,
  "boolean": false,
  "regexp": "pT8",
  "absolutePath": "★★★★★★★★ demo",
  "user": {
    "name": "demo"
  },
  "object": {
    "310000": "上海市",
    "320000": "江苏省"
  },
  "array": "AMD"
}

2. 数据占位符

使用数据占位符，可以让你的数据更加真实。

定义返回格式如下：

{
  "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)"
}

你将得到如下结果：

{
  "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.参数名 的方式获取，参考如下：

{
  data: {
    id: function({
      _req
    }) {
      return _req.params.id
    }
  }
}

在 PostMan 测试：

https://mock.xkcoding.com/mock/5dce0fdaaac115001c03b239/test/test3/1

得到如下结果：

{
  "data": {
    "id": "1"
  }
}

3.2. 查询参数

如果你想要获取类似 http://www.domain.com/test?name=xkcoding 中的 name 参数，可以通过 _req.query.参数名 的方式获取，参考如下：

{
  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

得到如下结果：

{
  "data": {
    "id": "name 为空"
  },
  "success": false
}

在 PostMan 测试：

https://mock.xkcoding.com/mock/5dce0fdaaac115001c03b239/test/test4?name=xkcoding

得到如下结果：

{
  "data": {
    "id": "xkcoding"
  },
  "success": true
}

3.3. body 参数

如果你根据传过来的 body 参数返回，你可以使用 _req.body 拿到 body 数据，参考方式如下：

{
  data: function({
    _req
  }) {
    return _req.body
  }
}

在 PostMan 测试，使用 POST 方式

https://mock.xkcoding.com/mock/5dce0fdaaac115001c03b239/test/test5

传入参数

{
  "text": "测试文本",
  "likes": ["LOL", "CODE"]
}

得到如下结果：

{
  "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 模板吧，逻辑不复杂，看不懂的朋友评论留言提问呀~

{
  "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

得到如下结果：

{
  "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 的参数说明：

同时也提供了自定义响应的配置，封装在 _res 对象中

6. 参考

• Easy Mock 官方文档
• Mock.js 官方文档