Die API-Dokumentation verwendet **Swagger UI** und **ReDoc**, und jede dieser Dokumentationen benötigt einige JavaScript- und CSS-Dateien.

<img src="/img/tutorial/extending-openapi/image01.png">

## 文档 JavaScript 与 CSS 自托管

FastAPI 支持 **Swagger UI** 和 **ReDoc** 两种 API 文档，这两种文档都需要调用 JavaScript 与 CSS 文件。

这些文件默认由 <abbr title="Content Delivery Network（内容分发网络）: 由多台服务器为 JavaScript 和 CSS 等静态文件支持的服务。一般来说，从靠近客户端的服务器提供静态文件服务可以提高性能。">CDN</abbr> 提供支持服务。

但也可以自定义设置指定的 CDN 或自行提供文件服务。

### <a href="https://nestjs.com/" class="external-link" target="_blank">NestJS</a> (and <a href="https://angular.io/" class="external-link" target="_blank">Angular</a>)

This isn't even Python, NestJS is a JavaScript (TypeScript) NodeJS framework inspired by Angular.

It achieves something somewhat similar to what can be done with Flask-apispec.

=== "Python"

    ```Python
    {!> ../../../docs_src/generate_clients/tutorial004.py!}
    ```

=== "Node.js"

    ```Javascript
    {!> ../../../docs_src/generate_clients/tutorial004.js!}
    ```

Oder Sie haben andere Möglichkeiten, mit dem WebSocket-Endpunkt zu kommunizieren.

---

Für dieses Beispiel verwenden wir jedoch ein sehr einfaches HTML-Dokument mit etwas JavaScript, alles in einem langen String.

Das ist natürlich nicht optimal und man würde das nicht in der Produktion machen.

In der Produktion hätten Sie eine der oben genannten Optionen.

Mas ele faz o trabalho com código assíncrono muito mais fácil.

Essa mesma sintaxe (ou quase a mesma) foi também incluída recentemente em versões modernas do JavaScript (no navegador e NodeJS).

Mas antes disso, controlar código assíncrono era bem mais complexo e difícil.

L'utilisation d'`async` et `await` est relativement nouvelle dans ce langage.

Mais cela rend la programmation asynchrone bien plus simple.

Cette même syntaxe (ou presque) était aussi incluse dans les versions modernes de Javascript (dans les versions navigateur et NodeJS).

Mais avant ça, gérer du code asynchrone était bien plus complexe et difficile.

## JavaScript-only settings

Swagger UI also allows other configurations to be **JavaScript-only** objects (for example, JavaScript functions).

FastAPI also includes these JavaScript-only `presets` settings:

```JavaScript
presets: [
    SwaggerUIBundle.presets.apis,
    SwaggerUIBundle.SwaggerUIStandalonePreset
]
```

# Static Files - `StaticFiles`

You can use the `StaticFiles` class to serve static files, like JavaScript, CSS, images, etc.

Read more about it in the [FastAPI docs for Static Files](https://fastapi.tiangolo.com/tutorial/static-files/).

You can import it directly from `fastapi.staticfiles`:

```python
from fastapi.staticfiles import StaticFiles
```

<iframe data-w-type="embedded" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://xr4n4.mjt.lu/wgt/xr4n4/hj5/form?c=40a44fa4" width="100%" style="height: 0;"></iframe>