阅读 1356

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

前言

在开发过程中遇到一个情况:项目的页面已经全部完成开发,但是后端的接口还没完成。这个时候一直等的话就比较浪费时间。试想是否可以自己模拟一些数据先来开发功能呢?比如数据绑定、渲染等。这个时候就可以用到 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 网址在我使用的时候不怎么稳定,会时常卡死请求缓慢,毕竟是免费用的,先偷着乐就行了,不过还是希望网址能再优化一下。

博客地址: 戳我

关注下面的标签,发现更多相似文章
评论