利用Easy Mock简单模拟开发数据接口

前言

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

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

使用方法

1. 打开Easy-mock官网登陆（没有帐号能够直接注册）
2. 登陆以后点击右下角的加号建立项目，如图所示，吐槽一下，这个建立按钮真的很差找... 😂

 

 

3. 建立项目，填写项目的相关配置。

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

4. 建立好了以后能够根据API文档添加模拟数据了。经常使用的快捷按钮如题所示：

点击预览接口效果以下：

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

 

 

点击编辑接口效果以下：

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

 

 

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

6. 编辑好各个模拟API后复制连接在项目中使用就行。

总结 💯

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