antDesignPro6: openapi を使用してインターフェイス宣言ドキュメントとインターフェイス呼び出しを自動的に生成する方法 (4 ステップ)

1. 使用手順:

1. config.ts の openAPI フィールドを設定します。

openAPI: 配列タイプ。複数の異なるモジュール インターフェイスを構成できます。

export default defineConfig({
    /**
   * @name openAPI 插件的配置
   * @description 基于 openapi 的规范生成serve 和mock，能减少很多样板代码
   * @doc https://pro.ant.design/zh-cn/docs/openapi/
   */
   openAPI: [
    {
      requestLibPath: "import { request } from 'umi'", // 要使用的请求库
      // schemaPath: join(__dirname, 'oneapi.json'),
      // schemaPath: swagger不同模块接口对应的文档路径（根据后端提供地址获取，如下截图）
      schemaPath: 'http://xxx_test.com:端口号/tms-user/v2/api-docs', 
      projectName: 'tms-user', // 生成的api目录名（一般按模块划分）
      apiPrefix: 'process.env.TMS_USER', // 接口声明文档中请求的前缀名
    },
    {
      requestLibPath: "import { request } from 'umi'",
      schemaPath: 'http://xxx_test.com:端口号/tms-waybill/v2/api-docs',
      projectName: 'tms-waybill',
      apiPrefix: 'process.env.TMS_WAYBILL',
    },
  ],
  define: {  // 定义一些全局变量
    'process.env': {
      TMS_USER: '/tms-user',
      TMS_WAYBILL: '/tms-waybill',
    },
  },
})

バックエンドスタッフが提供するインターフェースパスページxx.html

2. proxy.ts で関連するインターフェイス要求プロキシを構成します (ローカル開発)。

テスト環境や事前環境など、複数の環境を構成できます。-- package.json でさまざまなスクリプト コマンド (npm run start:test、npm run start:pre など) を構成して、現在の開発環境を決定します。

/**
 * @name 代理的配置
 * @see 在生产环境 代理是无法生效的，所以这里没有生产环境的配置
 * -------------------------------
 * The agent cannot take effect in the production environment
 * so there is no configuration of the production environment
 * For details, please see
 * https://pro.ant.design/docs/deploy
 *
 * @doc https://umijs.org/docs/guides/proxy
 */
export default {
  /**
   * @name 详细的代理配置
   * @doc https://github.com/chimurai/http-proxy-middleware
   */
  test: {
    '/tms-waybill': {
      target: 'http://xxx_test.com:端口号', // 要代理的具体test环境接口域名
      changeOrigin: true,
    },
  },
  pre: {
    '/xxx': {
      target: 'your pre url', // 要代理的pre接口接口域名
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },
};

3. コマンドを実行し、インターフェイス ドキュメント ディレクトリを自動的に生成します。

コマンドを実行します: npm run openapi   -》 システムは、インターフェイス モジュール ディレクトリとさまざまな API ファイルを src/services ディレクトリに自動的に生成します -》 次に、npm run start:test   -》 を実行します。ページ上でインターフェイスの呼び出しを開始します。

システムによって自動的に生成された 2 つのディレクトリと API ファイルのスクリーンショット

package.json 内のさまざまな環境コマンドのスクリーンショット

4. ページ上のインターフェイスを使用するだけです。

// xxx.tsx页面

import api from '@/services/tms-waybill'

const getList = async (params: object) => {
    const { data } = await api.ProjectManageController.getListUsingPOST({ ...params });
    console.log('后台返回的是', data);
};

2. よくある質問と解決策

1. コマンド npm run openapi を使用して最新のインターフェイス ドキュメントを生成すると、vscode コンソールでエラーが報告されます: undefind, xxx のバージョン プロパティ値を読み取れません。

回答: バックグラウンド インターフェイスがコード (リリース) をアップロードしているため、リリース後に npm run openapi コマンドを再実行できます。