yapi-code-auto-generator

针对 YApi 系统的代码自动生成器

YApi-code-auto-generator

首先这是针对 YApi 平台接口页面开发的脚本。

YApi 是一个支持内网私有部署的、打通前后端及QA的、可视化的接口管理平台。

官网：http://yapi.smart-xwork.cn/ 源码：https://github.com/YMFE/yapi

通常情况下，我们需要根据这样的接口信息封装一个调用接口的函数。

例如现在有一个「获取所有商品」的接口：

那么我会根据这个基本信息封装一个函数：

function getAllGoods (data) {
  return axios.get('/api/goods', data)
}

可以看到这个函数的结构非常简单，参数、方法类型、路径都是固定的，只有函数名需要自己想，但是因为服务端同学在构造路径的时候也已经尽量地语义化了，所以可以根据路径+方法类型来拼接出函数名称。

YApi-code-generator 脚本的主要功能就是自动拼接出这样的函数，你只需要一键拷贝到自己的项目中即可使用。

如图所示，脚本会根据「基本信息」中的内容生成一个代码块，以注释的形式标注了「接口名称」和「接口文档地址」这样方便重新打开 YApi 查看接口具体细节。

按照开发习惯，每个接口都封装成一个单独的函数向外暴露，函数名称由「方法」+「路径」拼接，然后函数返回一个 Promise。

图示的 GET 是我基于 axios 封装的用于发送 get 请求的方法，你也可以任意其他的请求库来封装。

除了上面封装调用接口的函数之外，我还注意到另外一种重复性劳动：如果是一个列表接口，那么我为了在表格中展示这个列表，就需要根据返回结果来写一个 columns 字段（我使用的是 ant-design-vue 的 table 组件）

这种重复性劳动当然也应该由脚本代劳 😜，最后结果如下：

总之，这是一个减少前端同学大量复制粘贴操作的脚本。