Flet - 为FastAPI提供更好的UI

Flet for FastAPI 允许将交互式实时仪表板添加到您的FastAPI应用程序中，并在FastAPI内部托管任何Flet Web应用程序，以实现生产级别的可靠性。

安装

pip install flet-fastapi

第一个应用程序

创建 counter.py 包含以下内容

import flet as ft
import flet_fastapi

async def main(page: ft.Page):
    counter = ft.Text("0", size=50, data=0)

    async def add_click(e):
        counter.data += 1
        counter.value = str(counter.data)
        await counter.update_async()

    page.floating_action_button = ft.FloatingActionButton(
        icon=ft.icons.ADD, on_click=add_click
    )
    await page.add_async(
        ft.Container(counter, alignment=ft.alignment.center, expand=True)
    )

app = flet_fastapi.app(main)

这是一个简单的应用程序，显示一个计数器和位于右下角的按钮来增加该计数器。

flet_fastapi.app() 在FastAPI应用程序的根目录配置单个Flet应用程序，使用 main() 会话处理程序和以下端点

/ws (WS) - Flet应用程序的WebSocket处理程序。

/upload (PUT) - 文件上传处理程序。

/oauth_callback (GET) - OAuth流程回调处理程序。

/ (GET) - Flet应用程序的静态文件和SPA通配符处理程序。

在本地运行应用程序

安装Uvicorn网络服务器

pip install uvicorn

使用以下方式启动uvicorn

uvicorn counter:app

打开浏览器并导航到http://127.0.0.1:8000 以查看正在运行的应用程序。

在同一域名下托管多个Flet应用程序

import flet as ft
import flet_fastapi


async def root_main(page: ft.Page):
    await page.add_async(ft.Text("This is root app!"))


async def sub_main(page: ft.Page):
    await page.add_async(ft.Text("This is sub app!"))


app = flet_fastapi.FastAPI()


app.mount("/sub-app", flet_fastapi.app(sub_main))
app.mount("/", flet_fastapi.app(root_main))

子应用程序必须在根Flet应用程序之前映射，因为它配置了SPA的通配符 index.html。

使用uvicorn运行应用程序并访问http://127.0.0.1:8000 和然后http://127.0.0.1:8000/sub-app/ 以查看两个Flet应用程序都在运行。注意/sub-app/ URL中的尾随斜杠 - 如果没有斜杠，请求将被路由到根应用程序。

将Flet添加到现有的FastAPI应用程序中

from contextlib import asynccontextmanager

import flet as ft
import flet_fastapi
from fastapi import FastAPI

@asynccontextmanager
async def lifespan(app: FastAPI):
    await flet_fastapi.app_manager.start()
    yield
    await flet_fastapi.app_manager.shutdown()

app = FastAPI(lifespan=lifespan)

async def main(page: ft.Page):
    await page.add_async(ft.Text("Hello, Flet!"))

app.mount("/flet-app", flet_fastapi.app(main))

当将 Flet 应用添加到现有的 FastAPI 应用中时，您需要在应用启动时调用 flet_fastapi.app_manager.start()，在关闭时调用 flet_fastapi.app_manager.shutdown()。请使用最适合您的方式：生命周期（如上例所示）或应用事件。

app_manager.start() 方法启动后台任务，清理已过期的会话和 OAuth 流状态。

app_manager.shutdown() 方法删除 Flet 应用创建的任何临时文件。

在生产环境中运行应用

建议在生产环境中使用 Hypercorn 运行 FastAPI，它是一个 ASGI 网络服务器，但也可能使用 Gunicorn 运行 FastAPI 应用，它是一个 WSGI 服务器，但具有更多功能，如传递代理头。

安装 Gunicorn

pip install gunicorn

使用以下命令启动 gunicorn

gunicorn -k uvicorn.workers.UvicornWorker counter:app

参考

环境变量

FLET_SECRET_KEY - 用于签署上传请求的密钥。如果配置了上传目录，则必须设置。

FLET_SESSION_TIMEOUT - 用户断开连接后保持会话活跃的秒数。默认为 3,600 秒。

FLET_OAUTH_STATE_TIMEOUT - OAuth 状态有效期，单位为秒，是 OAuth 流开始和重定向到 OAuth 回调 URL 之间的最大允许时间。默认为 600 秒。

FLET_MAX_UPLOAD_SIZE - 允许上传文件的最大大小，以字节为单位。