Yapi インターフェイス ツールのチュートリアル

背景

ビジネスの反復が速くなり、インターフェースの数が増えるにつれ、インターフェース開発後の MOCK データのデバッグが R&D テスターに​​とって効率化のポイントとなり、その効率化を支援するために YAPI が登場しました。

MOCKデータ構造

1.@id設定を一意にマークする

一意の識別子としてのデータ操作

2. 画像 @image

 

 

3. 時間

4. データと列挙

データ生成に応じて、変更できるかどうか、無効化できるかどうか、有効化できるかどうかなど、さまざまな状態のテスト データを列挙します。

 

5. 配列データ

ページングデータなどのテストに使用できます。

 

フロントエンドアプリケーション

フロントエンドは型宣言に使用され、統一された出力データ宣言は開発現場に便利です

環境整備

yarn add -D yapi-to-typescript

構成ファイルを生成する

npx ytt init -c ytt.config.ts

カスタム構成ファイル

サーバーアドレス: severurl

 

アイテムマーク：トークン

 

 

インターフェースの分類

 

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

カスタム構成

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

 

要約:

プロジェクトのニーズに応じて使い分け可能