前言

在开发过程中遇到一个情况：项目的页面已经全部完成开发，但是后端的接口还没完成。这个时候一直等的话就比较浪费时间。试想是否可以自己模拟一些数据先来开发功能呢？比如数据绑定、渲染等。这个时候就可以用到 Easy Mock 来模拟接口返回数据。

想要这样做，必须做到一点：和后端商量统一接口命名、请求参数字段与返回字段等。

使用方法

  1. 打开Easy-mock官网登录（没有账号可以直接注册）
  2. 登录之后点击右下角的加号创建项目，如图所示，吐槽一下，这个创建按钮真的不好找... 😂

 

01

 

  1. 创建项目，填写项目的相关配置。 02

没有Swagger Docs API可填写 https://petstore.swagger.io/v2/swagger.json

  1. 创建好了之后可以根据API文档添加模拟数据了。常用的快捷按钮如题所示： 03

点击预览接口效果如下：

需要注意的是：点击send之后才能看到请求和响应。

 

04

 

点击编辑接口效果如下：

右边的按钮打开的话点击更新接口后会自动回到图三的控制面板，关闭点击更新会停留在当前，可以根据需要自行调节。

 

05

 

5.根据常用语法编辑模拟API。

Easy Mock 引入了 Mock.js，使其功能强大好用。

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

常用占位语法，详细文档在 mockjs.com

 "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. 编辑好各个模拟API后复制链接在项目中使用就行。

总结 💯

使用Easy Mock 能够很方便的模拟出想要的数据，文档中还有很多强大的功能我没有用到，只用到了最基础的模拟数据，但是已经给开发带来了很大的便捷。吐个槽：Easy Mock 网址在我使用的时候不怎么稳定，会时常卡死请求缓慢，毕竟是免费用的，先偷着乐就行了，不过还是希望网址能再优化一下。