初识easy-mock-cli,始于一场缘分

在谈及easy-mock-cli的时候,先说一下easy-mock是什么把?官方解释是:Easy Mock 是一个可视化,并且能快速生成 模拟数据 的持久化服务。通俗易懂的话,就是假数据。使用的目的就是为了在前后端开发的过程中,前端会比后端先行一步,在还原完页面就需要等后端的接口在去开发功能,这样,就会造成前后端开发时间不同步,浪费开发的时候,mock的出现就解决了这个困境。前端在还原完页面之后,可以根据与后端定义好的mock接口,进行开发。等后端开发完成之后,与后端联调。项目大功告成,也没有谁等谁,互相嫌弃的问题了。

easy-mock-cli 的自我介绍

Easy Mock 是一个可视化,并且能快速生成模拟数据的服务。以项目管理的方式组织 Mock List,能帮助我们更好的管理 Mock 数据,不怕丢失。

Easy Mock CLI 是一个基于 Easy Mock 快速生成 API 调用文件的命令行工具。

可以根据你mock的接口,结合axios生成的api层,一开始觉得真好啊,不用去一个个手写api层,自动生成了mock中所有的,觉得真开心呀,省事省力,然后就开始用mock模拟数据,进行接口测试。

  • easy-mock-cli的安装

      npm install -g easy-mock-cli
  • 创建配置文件 .easymockrc

   {
"output": "api",
"template": "axios",
"projects": [
{
"id": "你要创建的 Easy Mock 项目的 id",
"name": "demo"
}
]
}
![](https://img2018.cnblogs.com/blog/1323801/201907/1323801-20190725140456113-333562477.png)
  • 配置文件的参数
属性名 描述 可空 类型 默认值
host 指定一个源,将在该源下获取接口数据 true String https://www.easy-mock.com
output 生成 API 的基础目录(基于项目目录,无需手动创建) true String easy-mock-api
template 指定一个 API 模板 false String
projects 项目列表 false Array
projects[id] Easy Mock 项目 id false String
projects[name] 项目名(开心就好,尽量简单,不用中文) false String
projects[white] 白名单(只生成白名单中的接口) true Array[String]
projects[black] 黑名单(不生成黑名单中的接口) true Array[String]
  • 配置文件的命名格式

    支持以下文件格式

    • json
    • yml
    • ymal
    • js
  • 生成api层

    easymock init .
  • 结果如下:

  • 文件的介绍



    这个文件是根据你的mock自动生成的api层,注释是你mock中对接口的描述,函数名是你路由和方法的拼接。

咱们在项目中使用的提供的axios模板,所以,他已经在util.js文件中创建了axios的实例,所以,咱们之前在assets中的axios.js就不生效了。需要在util.js中进行拦截器的处理。

mock联调与yu后端联调的battle

因接口规范规定,再获取表格数据的时候,我们需要把分页的信息拼接在路由上,但是我们在mock上制定的url是 /salary/support/divideProportion/proportion/page/size,但是真的在真机联调的时候,我们传给后端的是具体的page和size,所以,就造成mock与后端联调造成不一致的问题。有没有解决的方案,让mock联调与与后端联调保持一致呢?这样子,也不用为难我们前端了。easy-mock-cli中没有详细的介绍,如何解决。但是你看utils的文件 就能发现其中的奥妙。



上图中的第一个函数creatAPI,就是为了生成api层的模板,第二个函数convertRESTAPI()就是为了在路由上拼接参数,通过path字段来标识,这对象中的数据是拼接在路由上的。

在项目中的使用:

mock接口的定义:

数据的请求:

在mock的接口地址中,需要使用{}来表明路由中的哪些字段是变量,在请求传参的时候,需要用path字段来标识。

不经意间发现的惊喜

在post请求传参的时候,发现在与后端的联调过程中,参数传不过去,好可怕呀,又要掉坑了!!axios的官网上的使用说明中,post 请求的参数 是通过data 来标识的,

如下:



而easy-mock-cli中没有指定data参数,所以,咱们再数据请求传参的时候,需要加data标识

这样子,感觉终于能够再mock联调完之后,不用在去更改api层在去与后端联调了。只要保证前后端开发的过程中,按着mock定好的接口,我们就可以很顺利的联调了。

自力更生,丰衣足食

除了使用 easy-mock-templates 提供的模板外,我们还可以自定义模板,以满足不同的需求。如果你的业务需求,easy-mock-cli的模板不能满足,就可以自己创建模板。关于他的介绍,在这里就不做太多的讲解了。 可以看官方文档学习一下:https://easy-mock.github.io/easy-mock-cli/#/?id=自定义模板

完美的ending

本篇博客介绍了easy-mock-cli如何在项目中使用,以及在使用的过程中遇见的坑。easy-mock-cli的两大核心就是配置文件和API模板,首先要安装好easy-mock-cli,然后配置你的mock的路径,输出文件,项目的名字和id。对项目进行初始化,这样,生成api文件,你就离胜利只有一步之遥了。然后就要去看他util.js文件,通过看他的代码来了解他的思想,因为他的官方文档比较简单的介绍了如何使用,而没有具体的讲解怎么避免与mock的联调和与后端联调 保持一致的问题。这种时候,就需要我们去看人家的源码来理解。他是如何生成api层,如何通过axios进行数据的请求的。

突然发现在好多网站发现转载,如需转载请注明来源,本博客只为了与大家分享,谢谢。

转载地址:https://i.cnblogs.com/EditPosts.aspx?postid=11242197

不为人知的easy-mock-cli的更多相关文章

  1. MockJS和Easy Mock使用

    之前做mock数据一直用的json-server,今天同事给我推荐了很好用的工具:Easy Mock,我看完之后是下图的状态 很得劲啊,感觉人生已经达到了高潮 既能伪造接口,又能根据既定的规则生成对应 ...

  2. 小程序——使用Easy Mock

    使用Easy Mock 一.什么是Easy Mock    Easy Mock 是一个可视化的能快速生成模拟数据的持久化服务.在实际开发中常见的Mock方式一般是将模拟数据直接写在代码里,利用Java ...

  3. 【重点突破】—— Easy Mock的使用及Mock.js规范

    前言:在线使用Easy Mock可视化工具,可以提供快速生成“模拟数据”的持久化服务: Mock.js是一个JS插件,指定了一套规范,而Easy Mock工具就遵循这些规范.  一.Easy Mock ...

  4. Easy mock - 安装配置和基本使用

    Easy-mock easy-mock是一款比较好用的接口模拟工具, 使用之前我们需要安装和配置 需要下载的内容有以下 Node Redis MongoDB Node和Redis一路点下一步就行, M ...

  5. 本地部署Easy Mock

    最近在自己捣腾个vue的项目,苦于没有接口测试.网上搜寻一遍,基本上是使用mock.js模拟数据.研究mock.js 过程中,发现很多人提到了Easy Mock,发现它更加的方便.但是访问Eash M ...

  6. 使用移动自适应布局+easy mock实现移动界面的简单实现

    一.使用easy mock模拟数据 easy mock链接地址 二.自己写移动自适应布局 自己编写主要是利用rem进行宽度栅格布局: html { /* 相当于一个界面适配器,pc以及移动端都可以进行 ...

  7. easy-mock介绍

    今天推荐一个好用的前端 mock 工具,Easy Mock,目前由大搜车无线架构团队进行维护,让我觉得特别好用的一点是 它支持 swagger(一个能称为框架的 API 书写工具),并能够基于 Swa ...

  8. Postman Mock Server

    为了不影响前端开发的进度,一般后端都是先定数据结构,然后写个假接口让前端调用,这样前端就不必等着后端接口开发完成以后再开始了.届时,前后端以及UI和测试就可以并行,待双方都把各自的逻辑写好了,便可以联 ...

  9. Spring Boot(九)Swagger2自动生成接口文档和Mock模拟数据

    一.简介 在当下这个前后端分离的技术趋势下,前端工程师过度依赖后端工程师的接口和数据,给开发带来了两大问题: 问题一.后端接口查看难:要怎么调用?参数怎么传递?有几个参数?参数都代表什么含义? 问题二 ...

随机推荐

  1. MongoDB自学日记3——架构及HA

    在对mongoDB的操作有了一定基础后,终于可以扯扯HA和架构这两个高大上的概念了.在这之前当然还得弄清楚mongoDB的Key feature:Sharding. 1. Sharding Shard ...

  2. git(二)

    一.GitHub(代码的云仓库) 1.创建一个新的项目 git remote add origin https://github.com/1352282824shy/COCAP.git git pus ...

  3. 十分钟了解Kubernetes

    何为Kubernetes? 最简单的一句话来概括Kubernetes. 它就是一套成熟的商用服务编排解决方案.Kubernetes定位在Saas层,重点解决了微服务大规模部署时的服务编排问题. Kub ...

  4. javascript中&&运算符和||运算符的使用

    前言 我们在前端开发中,&&运算符和||运算符是使用率和频繁度比较高的,&&运算符和||运算符的功能特别强大,想成为一名优秀的前端工程师,&&运算符和| ...

  5. 解决kali linux 2016.2实体机安装后root用户没有声音

    Kali Linux系统默认状态下,root用户是无法使用声卡的,也就没有声音.启用的方法如下:(1)在终端执行命令:systemctl --user enable pulseaudio (2)在/e ...

  6. Free MP3 CD Ripper_缓冲区溢出远程代码执行_CVE-2019-9766漏洞复现

    Free MP3 CD Ripper_缓冲区溢出远程代码执行_CVE-2019-9766漏洞复现 一.漏洞描述 Free MP3 CD Ripper是一款音频格式转换器.Free MP3 CD Rip ...

  7. Flume 简介及基本使用

    一.Flume简介 Apache Flume是一个分布式,高可用的数据收集系统.它可以从不同的数据源收集数据,经过聚合后发送到存储系统中,通常用于日志数据的收集.Flume 分为 NG 和 OG (1 ...

  8. Appium+python自动化(十二)- Android UIAutomator终极定位凶“胸”器(七)(超详解)

    简介 乍眼一看,小伙伴们觉得这部分其实在异性兄弟那里就做过介绍和分享了,其实不然,上次介绍和分享的大哥是uiautomatorviewer,是一款定位工具.今天介绍的是一个java库,提供执行自动化测 ...

  9. vue中ajax应用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Linux 文件系统的基本结构

    Linux文件系统为一个倒置的树状结构,所有文件或文件夹均包含在一个根目录/中. Linux系统严格区分大小写所以在Linux中:一个名为“A”的文件夹和一个名为“a”的文件夹是不同的两个文件夹,这点 ...