fondo

Con la rápida iteración de los negocios y cada vez más interfaces, la depuración de datos MOCK después del desarrollo de la interfaz se ha convertido en un punto de mejora de la eficiencia para los evaluadores de I + D. YAPI nació para ayudarnos a mejorar la eficiencia.

Estructura de datos simulada

1. Marque de forma única la configuración @id

Manipulación de datos como identificador único.

2. Imagen @imagen

3 Tiempo

4. Datos y enumeración

Según los datos de prueba de enumeración de generación de datos en diferentes estados, como si se pueden modificar, deshabilitar, habilitar, etc.

5. datos de matriz

Se puede utilizar para probar datos de paginación, etc.

aplicación frontal

La interfaz se utiliza para la declaración de tipos y la declaración de datos de salida unificada es conveniente para los campos en desarrollo.

Preparación ambiental

yarn add -D yapi-to-typescript

generar archivo de configuración

npx ytt init -c ytt.config.ts

archivo de configuración personalizado

Dirección del servidor: Severurl

Marca del artículo: Ficha

Clasificación de interfaz

categories: [ { id: [5963],// 如果全部生成则使用[0]，具体某个分类需要自己拼数组 }, ]

configuración personalizada

import { defineConfig } from 'yapi-to-typescript'
/**
 * 生成Api接口名称  Interface和ChangeCase数据类型参见node_modules\yapi-to-typescript\lib\esm\index.d.ts定义
 * @param interfaceInfo : Interface
 * @param changeCase:ChangeCase
 * @returns 请求响应接口名称--pascal命名
 */
function genApiInterfaceName(interfaceInfo, changeCase) {
  // 取解析路径dir最尾部的路径作为前缀路径
  const lastPath = interfaceInfo.parsedPath.dir.split('/').pop();
  // 拼接前缀路径+文件名称
  return `${changeCase.pascalCase(lastPath)}${changeCase.pascalCase(interfaceInfo.parsedPath.name)}`;
}
export default defineConfig([
  {
    serverUrl: 'http://yapi.paquapp.com',
    typesOnly: false,
    target: 'typescript',
    reactHooks: {
      enabled: false,
    },
    prodEnvName: '图库',
    customTypeMapping: {
      "byte": "integer",
      "short": "integer",
      "int": "integer",
      "long": "integer",
      "float": "number",
      "double": "number",
      "bigdecimal": "number",
      "char": "string",
      "void": "null"
    },
    outputFilePath: (interfaceInfo, changeCase) => {
      // 文件夹名称取api-url路径末尾2个
      const filePathArr = interfaceInfo.path.split('/').slice(-2);
      const filePath = filePathArr.map((item) => changeCase.camelCase(item)).join('/');
      return `src/types/httpTypes/${filePath}.ts`;
    },
    // 生成ts文件中请求参数interface名称,将下划线命名转换成pascal命名
    getRequestDataTypeName: (interfaceInfo, changeCase) => {
      return `${genApiInterfaceName(interfaceInfo, changeCase)}Request`;
    },
    // 生成ts文件中请求响应数据interface名称,将下划线命名转换成pascal命名
    getResponseDataTypeName: (interfaceInfo, changeCase) => {
      return `${genApiInterfaceName(interfaceInfo, changeCase)}Response`;
    },
    // 响应数据中要生成ts数据类型的键名
    dataKey: 'pictureYapi',
    // 项目配置
    projects: [
      {
        token: 'c31f682a598a775a3923ead18550ec97cfc2692b9b00cc872de6cfcb3287c9f1',
        categories: [
          {
            id: [0],// 如果全部生成则使用[0]，具体某个需要自己拼数组
          },
        ],
      },
    ],
  },
])

Resumir:

Se puede utilizar selectivamente según las necesidades del proyecto.

Tutorial de la herramienta de interfaz Yapi