一、需求

前端有新需求时，涉及如Table表格的开发，其中title和dataIndex字段相信很多同学都是在比如swagger上一个个手动复制粘贴过来，这其实浪费我们很多时间。比如获取以下参数表。

还有如表单的label及value绑定、接口请求的出入参等，都少不了频繁的复制粘贴操作。

有没有一种办法可以尽可能减少这种琐碎的重复性工作，就是这个工具要做的事情。

二、设计

以swagger为例，步骤如下：

访问swagger页面；
获取生成swagger UI的接口信息；
获取想要的接口数据，获取配置信息；
根据想要的数据格式进行数据转化；
数据导出；

三、实现

1. `swagger`接口

步骤分解：

首先访问接口文档swagger
打开控制台，刷新页面
获取swaggerUI的文档接口信息

2. 获取想要的数据

知道swagger UI的生成方式，也就拿到了对应的接口数据，接下来获取自己想要的信息。

新建项目

mkdir myswagger && cd myswagger && npm init -y && touch index.js

在package.json中新增配置
```
"type": "module",
```
调用swagger UI接口，获取对应配置

使用axios调取接口，很容易能拿到数据，要注意的是接口可能需要鉴权，代码如下：

// myswagger/index.js
import axios from "axios";

// 接口请求获取swagger数据
async function getRes(url = "", headers = {}) {
  try {
    // 登录获取token
    const res = await axios.get(url, {
      headers: {
        authorization: "Basic aaaaaaaaa=",
        ...headers,
      },
    });
    console.log(res.data)
    return res;
  } catch (error) {
    console.log(error);
  }
}

getRes('https://localhost:8000/api-docs')

假设上面地址正确且鉴权正常通过，运行下面命令就能看到swagger UI显示的相关数据。

cnpm install axios && node index.js

在接口平台的控制台中找到自己想要的接口名称如/api/abc及接口相关配置

这个根据不同的接口平台及不同的接口，可能有不同的配置规律。

3. 数据转化

获取到想要的数据，比如想转换成Table想要的columns，只要根据对应dataIndex及title进行匹配，就可以用快速转化。

antd

这个根据不同平台不同接口有不同的处理，以下是举例获取出入参数的一种转化

获取/api/abc接口的出入参对象


// 获取入参说明JSON
function getRequstQueryIn(res, api = []) {
  // console.log("获取入参说明JSON");
  const { paths } = res;

  // 匹配正确url
  const path = getPath(api, paths);

  if (!path.parameters || !path.parameters[0] || !path.parameters[0].schema) {
    console.error("无入参描述");
    return [];
  }

  // 入参参数的位置
  const refQuery = path.parameters[0].schema.$ref;
  const keysQuery = refQuery
    .replace("#", "")
    .split("/")
    .filter((key) => key);

  // 入参参数
  const propertiesQuery = res[keysQuery[0]][keysQuery[1]].properties;

  const configArr = mapJsonToArrayConfig(propertiesQuery);

  return configArr;
}

// 获取出参说明JSON
function getResponsesPropertiesOut(res, api = []) {
  // console.log("获取出参说明JSON");
  const { paths } = res;
  // 匹配正确url
  const path = getPath(api, paths);

  if (!path.responses || !path.responses[200] || !path.responses[200].schema) {
    console.error("无出参描述");
    return [];
  }
  // 响应参数的位置
  const refResponses = path.responses[200].schema.$ref;
  const keysResponses = refResponses
    .replace("#", "")
    .split("/")
    .filter((key) => key);

  let propertiesResponses = res[keysResponses[0]][keysResponses[1]].properties;

  // 含分页参数
  if (keysResponses[1].indexOf("分页") !== -1) {
    const resKey = keysResponses[1]
      .replace("分页对象", "")
      .replace("«", "")
      .replace("»", "");

    const _resPonse = res[keysResponses[0]][resKey].properties;

    propertiesResponses = {
      ...propertiesResponses,
      ..._resPonse,
    };
  }

  const configArr = mapJsonToArrayConfig(propertiesResponses);
  return configArr;
}

按需转换成自己想要的数据格式

// json转换成config配置
function mapJsonToArrayConfig(res = {}) {
  let arr = [];
  for (const key in res) {
    if (Object.hasOwnProperty.call(res, key)) {
      const desc = res[key].description || "";

      arr = arr.concat({
        key,
        label: desc,
      });
    }
  }

  return arr;
}

4. 数据导出

上面的出入参说明JSON函数及相关处理完成后，拿到对应数据可以快速导出一个json或者js文件，方便使用。

文件生成就是node的常规操作，不做细讨论。这里贴下生成的效果图。

根据生成效果图代码结构的能力，我们可以有效的提高我们的开发效率。

四、拓展

想要减少日常开发中的复制粘贴操作其实有很多方法，这里贴出其中一个思路的其中一种实现。

五、源码

为了增加灵活性及复用性，增加了链式调用，源码如下可在仓库中查看。

通过swagger接口快速生成AntDesign组件配置