arrière-plan

Avec l'itération rapide des activités et le nombre croissant d'interfaces, les données MOCK de débogage après le développement de l'interface sont devenues un point d'amélioration de l'efficacité pour les testeurs R&D. YAPI a été créé pour nous aider à améliorer l'efficacité.

Structure de données MOCK

1. Marquer de manière unique le paramètre @id

Manipulation des données comme identifiant unique

2. Image @image

3 fois

4. Données et dénombrement

Selon la génération de données, l'énumération teste les données dans différents états, par exemple si elles peuvent être modifiées, désactivées, activées, etc.

5. Données du tableau

Peut être utilisé pour tester les données de pagination, etc.

application frontale

Le frontal est utilisé pour la déclaration de type et la déclaration unifiée des données de sortie est pratique pour les champs en développement

Préparation environnementale

yarn add -D yapi-to-typescript

générer un fichier de configuration

npx ytt init -c ytt.config.ts

fichier de configuration personnalisé

Adresse du serveur : severurl

Marque de l'article : Jeton

Classement des interfaces

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

configuration personnalisée

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]，具体某个需要自己拼数组
          },
        ],
      },
    ],
  },
])

Résumer:

Peut être utilisé de manière sélective en fonction des besoins du projet

Tutoriel sur l'outil d'interface Yapi