【DevOps】YApi应用操作入门

淡淡的烟草味﹌ 2022-10-29 09:25 455阅读 0赞

> 基础操作入门。

### 0. 目录 ###

*   *   *  1. 前言
         *  2. YApi的概念结构
         *  3. 操作明细
         *   *   *  3.1 超级管理员视角
                 *  3.2 组长 / 项目负责人视角
                 *  3.3 开发人员视角
         *  4. 后记
         *  5. Links

### 1. 前言 ###

从一个新手的角度介绍常规操作，所以诸如注册账户以及将账户添加到对应的项目这样的操作就不进行单独说明了。

### 2. YApi的概念结构 ###

YApi是按照"分组" > “项目” > “接口分类” > “接口定义” 这样的层级结构来组织安排整个Model结构和页面布局的，其中：

1.  “**分组**”（对应于实际公司组织结构中的每个研发小组）。其下包括当前用户的"个人空间"，以及其它分组（只能由超级管理员来操作）。分组下可以自建多个项目。  
    ![分组][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxemtjeDM_size_16_color_FFFFFF_t_70]
2.  “**项目**”（对应于研发小组所负责的项目）。其下可以包含多个自建的"接口分类"，用来层次性地组织接口，方便管理。
3.  “**接口分类**”。其下可以包含多个"接口定义"。接口分类的主要作用就是为了将有着相似的功能的接口放到一起，方便管理。例如在实际的开发过程中，我们可以以模块的角度来创建"接口分类"。
4.  “**接口定义**”。这个就是具体一个个作为前后端契约的HTTP请求了。  
    ![项目 - 接口分类 - 接口定义][- _ -]

### 3. 操作明细 ###

以下我们将从超级管理员，组长，开发人员三者的视角分别进行介绍。

##### 3.1 超级管理员视角 #####

超级管理员的主要职责是：

1.  根据部门内部的人员组织结构创建相应的分组；
2.  并设置相应的分组负责人，即"组长"。
3.  因为YApi推崇的是[扁平化管理模式的思想][Link 1]，因此组长是可以创建分组的，但删除分组的权限只有超级管理员有，这一点需要注意。

##### 3.2 组长 / 项目负责人视角 #####

组长 / 项目负责人通过账户登录系统之后，就会看到相应的分组，其可以：

1.  向指定分组中添加"项目"。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxemtjeDM_size_16_color_FFFFFF_t_70 1]
2.  向指定分组中添加"成员"。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxemtjeDM_size_16_color_FFFFFF_t_70 2]
3.  设置分组信息等。

以上关于分组和新建项目就介绍到这里，接下来就是我们的重头戏，也是我们平时开发过程接触频率最高的"接口定义"。

##### 3.3 开发人员视角 #####

以开发人员的视角来看，主要关注的是项目中的"接口"界面。整个软件开发流程中，与YApi有关的操作有九成以上是以这个页面为基准的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxemtjeDM_size_16_color_FFFFFF_t_70 3]  
研发人员在分配到任务之后，登录浏览到以上页面：

1.  点击"添加分类"，按照所分配到的模块新建对应的"模块文件夹"，例如上面的module1。
2.  选中module1文件夹，点击右上角的"添加接口"，输入基本信息之后，接口创建完毕。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxemtjeDM_size_16_color_FFFFFF_t_70 4]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxemtjeDM_size_16_color_FFFFFF_t_70 5]
3.  在实际的开发过程中，推荐在创建一个接口之后采用复制的方式来简化创建的过程。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxemtjeDM_size_16_color_FFFFFF_t_70 6]
4.  选中新建的"test3"接口，点击"编辑"标签页。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxemtjeDM_size_16_color_FFFFFF_t_70 7]
5.  设置该接口的Tag（比如一般情况下的版本号），请求参数和返回数据，点击保存。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxemtjeDM_size_16_color_FFFFFF_t_70 8]
6.  最终得到如下预览界面。此时前端就已经可以拿着Mock地址进行相应的开发工作了。与此同时后端可以利用"运行"Tab页面进行开发工作。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxemtjeDM_size_16_color_FFFFFF_t_70 9]

### 4. 后记 ###

关于YApi的其它配置和操作这里就不再一一介绍了，本文只是起到一个抛砖引玉的作用，类似环境配置，高级Mock等等能够简化我们日常开发工作的功能就留待读者自行发掘了，YApi在文档这一块还是做得很好的。

整体看下来，YApi是目前是完全可以满足基本的前后端开发需求的，至于类似根据返回值自动生成相应的后端代码等等操作可以留待后期熟练协作模式之后再慢慢优化。

### 5. Links ###

1.  [Mock.js官方网站][Mock.js]
2.  [Mock.js - examples][] 官方提供的样例, 采用所见即所得的方式让你更快入门, 找到自己需要的那个方法。
3.  [【DevOps】YAPI接口管理平台使用基础入门][DevOps_YAPI]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxemtjeDM_size_16_color_FFFFFF_t_70]: /images/20221024/a2ce561ec92948c9804b4a1885de5ae9.png
[- _ -]: /images/20221024/5ff4d1f357884e1683108fce56b7598f.png
[Link 1]: https://yapi.baidu.com/doc/documents/manage.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxemtjeDM_size_16_color_FFFFFF_t_70 1]: /images/20221024/2e258e9127274096ab39009451ec0a14.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxemtjeDM_size_16_color_FFFFFF_t_70 2]: /images/20221024/b5ef39ed93eb4fb2bdbc088abd975baa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxemtjeDM_size_16_color_FFFFFF_t_70 3]: /images/20221024/4bc6e20b8a2c4668b83ca1d558303180.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxemtjeDM_size_16_color_FFFFFF_t_70 4]: /images/20221024/36fe22386b254b6aa6d86fb014c784be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxemtjeDM_size_16_color_FFFFFF_t_70 5]: /images/20221024/343beb6d122e485a937a62770947f120.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxemtjeDM_size_16_color_FFFFFF_t_70 6]: /images/20221024/850b53142a93411083d964f5bf4ecd72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxemtjeDM_size_16_color_FFFFFF_t_70 7]: /images/20221024/2278211df935440e81c8cc7e69665a9c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxemtjeDM_size_16_color_FFFFFF_t_70 8]: /images/20221024/0f4f029bd92942f195d9737541f3897d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xxemtjeDM_size_16_color_FFFFFF_t_70 9]: /images/20221024/5e84d0ae36a848e286a82fc24c460050.png
[Mock.js]: http://mockjs.com/
[Mock.js - examples]: http://mockjs.com/examples.html
[DevOps_YAPI]: https://blog.csdn.net/justyman/article/details/105896297