swagger-ui-react 前端引用草稿

前言

SwaggerUI是一个React组件，它接受一个配置对象作为其唯一的属性。这个配置对象可以包含多个属性来自定义SwaggerUI的行为和外观。以下是SwaggerUI支持的主要属性及其说明：

下面是一个使用swagger-ui-react 4.2.1版本的自定义layout的示例代码

import React, { Component } from "react";
import SwaggerUI from "swagger-ui-react";
import "swagger-ui-react/swagger-ui.css";

class CustomLayout extends Component {
  render() {
    return (
      <div>
        <div className="header">
          <h1>Custom Header</h1>
        </div>
        <div className="swagger-container">
          <SwaggerUI {...this.props} />
        </div>
        <div className="footer">
          <h1>Custom Footer</h1>
        </div>
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <SwaggerUI
          url="https://petstore.swagger.io/v2/swagger.json"
          docExpansion="none"
          layout={CustomLayout}
        />
      </div>
    );
  }
}

export default App;

在这个示例中，我们创建了一个CustomLayout组件，它将作为SwaggerUI组件的layout属性值传递。在CustomLayout组件中，我们定义了一个自定义的头部和底部，并使用{...this.props}语法将所有传递给CustomLayout组件的属性传递给SwaggerUI组件。

在App组件中，我们将CustomLayout组件传递给SwaggerUI组件的layout属性，以便在SwaggerUI组件中使用自定义的布局。我们还通过url属性指定了要加载的Swagger API文档的URL，以及通过docExpansion属性设置了文档的默认扩展。

发现者何种自定义方式好像不起什么作用！

docExpansion

SwaggerUI中的docExpansion属性用于配置API文档的初始展开状态。它控制在SwaggerUI中显示的API文档的呈现方式。

该属性有以下几个可选值：

none: 默认值，所有操作都将被折叠，并且用户需要手动单击每个操作以查看其细节。
list: 将显示所有操作的摘要，并将其分组到其各自的资源中。
full: 将显示所有操作和资源的所有详细信息。

您可以将docExpansion属性传递给SwaggerUI组件的配置对象中，如下所示：

const ui = SwaggerUI({
  // ...
  docExpansion: 'list', // 将所有操作摘要显示为列表
  // ...
});

onComplete

SwaggerUI提供了onComplete回调函数，该函数在文档加载完毕并呈现在UI中后被触发。您可以在该回调函数中获取当前API文档头的信息，以便进行进一步处理。

例如，以下代码演示了如何在onComplete回调函数中获取当前API文档头的信息并将其打印到控制台：

const ui = SwaggerUI({
  // ...
  onComplete: (swaggerApi, swaggerUi) => {
    const currentApi = swaggerUi.getCurrentApi();
    console.log(`当前API文档头信息： ${currentApi.info.title} - ${currentApi.info.version}`);
  }
});

在这个例子中，swaggerUi.getCurrentApi()方法返回当前显示的Swagger规范对象。您可以从Swagger规范对象中获取各种信息，例如文档标题和版本等。

如果您需要在用户与SwaggerUI交互时获取API文档头的信息，例如当用户单击操作时，您可以使用SwaggerUI提供的事件来注册回调函数。例如，以下代码演示了如何在单击操作时获取当前API文档头的信息并将其打印到控制台：

const ui = SwaggerUI({
  // ...
  onComplete: (swaggerApi, swaggerUi) => {
    // 注册单击操作事件
    swaggerUi.getSystem().on('opblock-select', (e) => {
      const currentApi = swaggerUi.getCurrentApi();
      console.log(`当前API文档头信息： ${currentApi.info.title} - ${currentApi.info.version}`);
    });
  }
});

在这个例子中，swaggerUi.getSystem().on('opblock-select', callback)方法注册一个事件处理程序，在用户单击操作时被触发。
在事件处理程序中，我们可以使用前面提到的方法来获取当前API文档头的信息。

以下是一个完整的使用SwaggerUI的示例，其中包括使用docExpansion属性自定义API文档的默认展开状态和使用onComplete回调函数获取当前API文档头的信息。

import React, { useState } from 'react';
import SwaggerUI from 'swagger-ui-react';
import 'swagger-ui-react/swagger-ui.css';

function App() {
  const [currentApi, setCurrentApi] = useState(null);

  const onComplete = (swaggerApi, swaggerUi) => {
    const api = swaggerUi.getCurrentApi();
    setCurrentApi(api);
  };

  return (
    <div className="App">
      {currentApi && (
        <h1>
          {currentApi.info.title} - {currentApi.info.version}
        </h1>
      )}
      <SwaggerUI
        url="https://petstore.swagger.io/v2/swagger.json"
        docExpansion="list"
        onComplete={onComplete}
      />
    </div>
  );
}

export default App;

在这个示例中，我们使用useState来存储当前API文档头的信息。
在onComplete回调函数中，我们使用swaggerUi.getCurrentApi()方法获取当前API文档头的信息，并使用setCurrentApi更新状态。
然后，我们根据当前API文档头的信息来渲染一个标题。
最后，我们将url和docExpansion属性传递给SwaggerUI组件，以便呈现Swagger规范文件并自定义API文档的默认展开状态。