不为人知easy-mock-cli

柔光的暖阳◎ 2023-06-02 07:58 3阅读 0赞

#### 初识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)

*  配置文件的参数

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>描述</th> 
   <th>可空</th> 
   <th>类型</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>host</td> 
   <td>指定一个源，将在该源下获取接口数据</td> 
   <td>true</td> 
   <td>String</td> 
   <td><a href="https://www.easy-mock.com" rel="nofollow">https://www.easy-mock.com</a></td> 
  </tr> 
  <tr> 
   <td>output</td> 
   <td>生成 API 的基础目录（基于项目目录，无需手动创建）</td> 
   <td>true</td> 
   <td>String</td> 
   <td>easy-mock-api</td> 
  </tr> 
  <tr> 
   <td>template</td> 
   <td>指定一个 API 模板</td> 
   <td>false</td> 
   <td>String</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>projects</td> 
   <td>项目列表</td> 
   <td>false</td> 
   <td>Array</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>projects[id]</td> 
   <td>Easy Mock 项目</td> 
   <td>id</td> 
   <td>false</td> 
   <td>String</td> 
  </tr> 
  <tr> 
   <td>projects[name]</td> 
   <td>项目名（开心就好，尽量简单，不用中文)</td> 
   <td>false</td> 
   <td>String</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>projects[white]</td> 
   <td>白名单（只生成白名单中的接口)</td> 
   <td>true</td> 
   <td>Array[String]</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>projects[black]</td> 
   <td>黑名单（不生成黑名单中的接口）</td> 
   <td>true</td> 
   <td>Array[String]</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

*  配置文件的命名格式  
    支持以下文件格式
    
     *  json
     *  yml
     *  ymal
     *  js
 *  生成api层
    
        easymock init .
 *  结果如下：

![1323801-20190725113450027-2068224736.png][]

*  文件的介绍  
    ![1323801-20190725125857362-94889889.png][]  
    这个文件是根据你的mock自动生成的api层，注释是你mock中对接口的描述，函数名是你路由和方法的拼接。

![1323801-20190725130212414-1065056419.png][]

咱们在项目中使用的提供的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的文件 就能发现其中的奥妙。  
![1323801-20190725124746938-1803907970.png][]  
上图中的第一个函数creatAPI,就是为了生成api层的模板，第二个函数convertRESTAPI（）就是为了在路由上拼接参数，通过path字段来标识，这对象中的数据是拼接在路由上的。  
在项目中的使用：  
mock接口的定义：  
![1323801-20190725125351689-22238623.png][]

数据的请求：  
![1323801-20190725125259886-409746645.png][]

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

### 不经意间发现的惊喜 ###

在post请求传参的时候，发现在与后端的联调过程中，参数传不过去，好可怕呀，又要掉坑了！！axios的官网上的使用说明中，post 请求的参数 是通过data 来标识的，  
如下：  
![1323801-20190725130856387-234300152.png][]  
而easy-mock-cli中没有指定data参数，所以，咱们再数据请求传参的时候，需要加data标识  
![1323801-20190725131024734-476365783.png][]

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

### 自力更生，丰衣足食 ###

除了使用 easy-mock-templates 提供的模板外，我们还可以自定义模板，以满足不同的需求。如果你的业务需求，easy-mock-cli的模板不能满足，就可以自己创建模板。关于他的介绍，在这里就不做太多的讲解了。 可以看官方文档学习一下：[https://easy-mock.github.io/easy-mock-cli/\#/?id=%e8%87%aa%e5%ae%9a%e4%b9%89%e6%a8%a1%e6%9d%bf][https_easy-mock.github.io_easy-mock-cli_id_e8_87_aa_e5_ae_9a_e4_b9_89_e6_a8_a1_e6_9d_bf]

### 完美的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][https_i.cnblogs.com_EditPosts.aspx_postid_11242197]

转载于:https://www.cnblogs.com/mn6364/p/11242197.html

[1323801-20190725113450027-2068224736.png]: /images/20230601/83534a18fd434551892477c88ca4805b.png
[1323801-20190725125857362-94889889.png]: /images/20230601/7f9e5162598e412fb3cce43eddd3c78e.png
[1323801-20190725130212414-1065056419.png]: /images/20230601/aeb3c036ab44406e8c8f0bc1f647a7a4.png
[1323801-20190725124746938-1803907970.png]: /images/20230601/c1fbcce57892460893560e637228c7ab.png
[1323801-20190725125351689-22238623.png]: /images/20230601/f72444ea57cf40f984255df8994d5401.png
[1323801-20190725125259886-409746645.png]: /images/20230601/4de84b14ae344a11baf0e6bc00a3bf76.png
[1323801-20190725130856387-234300152.png]: /images/20230601/76bd6af9bdd34ba491a3cbc285d9a772.png
[1323801-20190725131024734-476365783.png]: /images/20230601/06c6445429514770a26e47bad5ec3778.png
[https_easy-mock.github.io_easy-mock-cli_id_e8_87_aa_e5_ae_9a_e4_b9_89_e6_a8_a1_e6_9d_bf]: https://easy-mock.github.io/easy-mock-cli/#/?id=%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A8%A1%E6%9D%BF
[https_i.cnblogs.com_EditPosts.aspx_postid_11242197]: https://i.cnblogs.com/EditPosts.aspx?postid=11242197