17611538698
webmaster@21cto.com

活儿好又性感的在线 Mock 平台 - Easy Mock

资讯 0 2582 2017-04-27 12:01:08
前言
关于前端数据模拟的之前有分享过一个来自阿里的 RAP 系统,今天来看看前天风靡朋友圈的来自大搜车的 Easy Mock 系统,有兴趣的可以自行体验。
正文从这开始~
介绍
什么是 Easy Mock
Easy Mock 是一个极其简单、高效、可视化、并且能快速生成模拟数据的在线 mock 服务。 
以项目管理的方式组织 Mock List,能帮助我们更好的管理 Mock 数据,不怕丢失。 你问我为什么要用它?请听我一一道来它的过人之处。
网站地址:https://www.easy-mock.com/ 欢迎注册体验。
目前 easy-mock 在大搜车已经支持了200个项目,4000条mock数据的量级,并且完全独立部署,请大家放心使用。
今天我们要说一说 如何有效提高前端开发效率 ,这个话题似乎有些大了, 更确切的说应该是 如何使用 Easy Mock 提高前端开发效率。在前后端分离的大浪潮下,如何有效保障我们在开发环节不被打断?(接口开发需要的时间往往比前端多)
数据伪造
我相信大家都有各自的办法。比如说,
  • 将 Mock 数据写在代码里
  • 利用请求拦截
  • 利用 Charles 等代理工具,将 URL Map 到本地文件
  • 本地 Mock Server
上面这些方法虽然可以解决我们的问题,但同样伴随着一些问题。比如说,
  • 脏代码
  • 依赖特定的框架
  • 增加切换成本
  • 接口数据结构重构需要手动更新
  • 效率低下
  • 无法优雅的进行协同编辑
  • 无法持久化
看到这些,它们真的能够提高我们的开发效率吗?答案就在你的心中。 为此,Easy Mock 就这样诞生了。
支持 Swagger

Swagger 是一个规范和完整的框架,用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。

效率一直我们关注的问题,Easy Mock 支持基于 Swagger 生成 Mock List。并且,智能的更新操作只会对已经变动的接口做覆盖式更新。 并且基于 Swagger 创建的接口是支持参数显示的,也就是说我们能看到这个接口的请求参数和响应数据结构。
再简单点讲,它的强大之处在于彻底解放我们的双手。只要后端用了 Swagger(并且按照规范生成 API 文档),生成 Mock 数据只是 1秒钟 的事情。
具体的使用方式见 Easy Mock 官网文档。
更简单的团队协作
Easy Mock 提供了 2 种方式以实现团队协作编辑。
  • 个人项目 下邀请小伙伴一起参与编辑
  • 创建团队 或 加入团队 即可参与该团队下所有项目的编辑
响应数据
如果能根据传入的参数动态返回数据该多好?Easy Mock 支持处理 Request 对象。 也就是说我们可以通过 Request 对象的某些属性进行条件判断,从而实现 响应式数据。 那么,Request 对象都有些什么属性呢?如下,
  • header
  • method
  • url
  • querystring
  • host
  • hostname
  • query
  • cookies
这些只是一部分,更多属性和使用方式见 Easy Mock 官网文档
接口代理

有了接口代理可以做更多的事情。

  • 代码调试
  • 跨域请求
工作台
如何在茫茫的项目列表中找到你想要进行编辑的项目? 搜索虽然很方便,但有时候来回切换项目也需要时间成本,并且这是烦人的。 为此我们可以通过将项目添加到工作台中,以提高我们的使用效率。
快捷键
为了进一步提升效率,值得一提的小细节是 Easy Mock 支持快捷键操作。
创建项目 & 创建接口
在 项目列表 或 接口列表 中,按下 ctrl + c
搜索
在 项目列表 或 接口列表 中,按下 ctrl + s
导出接口
有可能你需要在本地用到这些接口,正好 Easy Mock 支持导出数据。
复制
这对于接口版本升级是很有用的。试想一下,一个项目超过 200 个接口,如果后面接口版本升级,同时以前的接口不变。再一次创建 200 个接口是什么感觉?
Restful
如果后端提供 /restful/:id/list 或者 /restful/{id}/list 这样的接口地址。别慌,Easy Mock 是支持的
扩展
移动端调试
步骤如下:
  • 利用 Charles Fiddler 等代理工具,抓取客户端中包含页面入口的接口
  • 在 Easy Mock 上创建一个接口
  • 将刚刚抓取的接口数据复制到 数据模型 中,修改页面入口为本地的入口然后保存。要用本地 ip 哦,localhost 在手机上是无效的
  • 点击 预览,复制接口地址
  • 回到代理工具。点击最开始抓取的接口,将其代理成刚刚复制的地址即可
这个方式可以为调试带来极大的帮助。
最后
那晚有看了截图,系统的 UI 感人,谁试谁知道。可通过文末左下角“阅读原文”体验。


评论