前言
在开发过程中遇到一个情况：项目的页面已经全部完成开发，但是后端的接口还没完成。这个时候一直等的话就比较浪费时间。试想是否可以自己模拟一些数据先来开发功能呢？比如数据绑定、渲染等。这个时候就可以用到 Easy Mock 来模拟接口返回数据。
想要这样做，必须做到一点：和后端商量统一接口命名、请求参数字段与返回字段等。
使用方法
- 打开Easy-mock官网登录（没有账号可以直接注册）
- 登录之后点击右下角的加号创建项目，如图所示，吐槽一下，这个创建按钮真的不好找... 😂
- 创建项目，填写项目的相关配置。
没有Swagger Docs API可填写
https://petstore.swagger.io/v2/swagger.json
- 创建好了之后可以根据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)" - 编辑好各个模拟API后复制链接在项目中使用就行。
总结 💯
使用Easy Mock 能够很方便的模拟出想要的数据，文档中还有很多强大的功能我没有用到，只用到了最基础的模拟数据，但是已经给开发带来了很大的便捷。吐个槽：Easy Mock 网址在我使用的时候不怎么稳定，会时常卡死请求缓慢，毕竟是免费用的，先偷着乐就行了，不过还是希望网址能再优化一下。