一、什么是Easy Mock

Easy Mock是一个可视化，并且能快速生成模拟数据的服务。以项目管理的方式组织Mock List，能帮助我们更好的管理Mock数据，不怕丢失。

1、解决的问题

开发时，后端还没完成数据输出，前端只好写静态模拟数据。

2、常见的Mock方式

• 将Mock数据直接写在代码里
• 利用JS拦截请求
• 利用Charles、Fiddler等代理工具拦截请求
• Mock平台。如Easy Mock、RAP等

3、使用Easy Mock的优势

• 前后端分离：让前端工程师独立于后端进行开发。
• 增加单元测试的真实性：通过随机数据，模拟各种场景。
• 开发无侵入：不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。
• 用法简单：符合直觉的接口。
• 数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
• 方便扩展：支持支持扩展更多数据类型，支持自定义函数和正则。
• 在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成之后，只需要改变url地址即可。

二、使用Easy Mock

1、注册Easy Mock账号

https://www.easy-mock.com/

helenyao

2、创建项目

3、创建列表接口

4、编辑json数据

将接口 http://localhost:8101/admin/edu/teacher 返回的json数据复制过来

5、预览

6、测试接口

将easy mock接口地址替换到axios.html文件中

axios.get('https://www.easy-mock.com/mock/5c72aae79f7c4d72ba29a8f5/mock-test/admin/edu/teacher')

7、浏览器中运行

三、Mock.js占位符语法

模拟的json数据人工编辑很繁琐，我们可以使用Mock.js语法动态生成json数据

文档：

https://www.easy-mock.com/docs

https://github.com/nuysoft/Mock/wiki

示例：

http://mockjs.com/examples.html

{
  "success": true,
  "code": 20000,
  "message": "成功",
  "data": {
    "items|5-10": [{
      "id": "@id",
      "name": "@cname",
      "intro": "@csentence",
      "career": "@cparagraph",
      "level|1": [1, 2],
      "avatar": "@image(200x200)",
      "sort|1-100": 1,
      "deleted|1": true,
      "gmtCreate": "@datetime",
      "gmtModified": "@datetime"
    }]
  }
}