How to use Swagger UI to display API documentation in FastAPI

How to use Swagger UI to display API documentation in FastAPI

Introduction:
In modern web development, API is an indispensable part. In order to facilitate development and maintenance, we need to provide a friendly and easy-to-use API documentation so that other developers can understand and use our API. Swagger is a popular API documentation format and tool that provides an interactive UI interface that can visually display the details of the API. In this article, I will show you how to use Swagger UI in FastAPI to display API documentation.

1. Installing dependencies
   First, we need to install FastAPI and related dependencies. It can be installed using the following command:

   pip install fastapi[all]

   This will install FastAPI and all the dependencies it requires, including Swagger UI.

2. Creating a FastAPI application
   Next, we will create a FastAPI application. In a new Python file, write the following code:

   from fastapi import FastAPI
   
   app = FastAPI()
   
   @app.get("/")
   async def root():
    return {"message": "Hello World"}

   This simple application defines a root route that returns a simple "Hello World" message.

3. Add Swagger UI
   In order to add Swagger UI to our application, we need to import the relevant FastAPI components. Add the following code to our app file:

   from fastapi import FastAPI
   from fastapi.openapi.utils import get_openapi
   from fastapi.openapi.docs import get_swagger_ui_html
   
   app = FastAPI()
   
   @app.get("/")
   async def root():
    return {"message": "Hello World"}
   
   def custom_swagger_ui_html(*, request):
    openapi_url = app.openapi_url
    swagger_url = openapi_url.replace("/openapi.json", "/swagger")
    return get_swagger_ui_html(
        openapi_url=openapi_url,
        title=app.title + " - Swagger UI",
        oauth2_redirect_url=swagger_url + "/oauth2-redirect.html",
        swagger_js_url="/static/swagger-ui-bundle.js",
        swagger_css_url="/static/swagger-ui.css",
    )
   
   app.openapi = get_openapi(title="My API")
   
   @app.get("/swagger", include_in_schema=False)
   async def swagger_ui_html(request: Request):
    return custom_swagger_ui_html(request=request)
   
   app.mount("/static", StaticFiles(directory="static"), name="static")

   In the code, we create a custom function called custom_swagger_ui_html. This function will use the get_swagger_ui_html function provided by FastAPI to generate the HTML page of Swagger UI. We also defined some URLs and paths to static files for Swagger UI.

4. Running the Application
   Now our application is ready to run. In the terminal, use the following command to start the application:

   uvicorn main:app --reload

   This will start our application and make it run locally at the default address http://localhost:8000.

5. View API documentation
   Open http://localhost:8000/swagger in the browser, you will see an interactive Swagger UI interface. It will display the details of your API, including routing, request and response models, and more.

Conclusion:
By using FastAPI and Swagger UI, we can easily display and browse our API documentation. This makes it easier for developers to understand and use our API. I hope this article can help you use Swagger UI to display API documents in FastAPI.

The above is a guide on how to use Swagger UI to display API documents in FastAPI. Hope this article will be helpful to you. thanks for reading!

The above is the detailed content of How to use Swagger UI to display API documentation in FastAPI. For more information, please follow other related articles on the PHP Chinese website!