使用 Jupyter 编写 FastHTML

在 Jupyter notebook 中编写 FastHTML 应用程序的流程与普通的 Python 应用程序略有不同。

在 Jupyter notebook 中编写 FastHTML 应用程序的流程与普通的 Python 应用程序略有不同。

下载此 notebook 亲自尝试

此页面的源代码是一个 Jupyter notebook。这使得直接进行实验变得很容易。然而，由于这是可运行的代码，这意味着我们必须注释掉一些内容才能构建文档。

第一步是导入必要的库。由于在 Jupyter notebook 内部使用 FastHTML 是一种特殊情况，因此它仍然是一个特殊的导入。

from fasthtml.common import *
from fasthtml.jupyter import JupyUvi, HTMX

让我们用 fast_app 创建一个应用。

app, rt = fast_app(pico=True)

定义一个路由来测试应用程序。

@rt
def index():
    return Titled('Hello, Jupyter',
           P('Welcome to the FastHTML + Jupyter example'),
           Button('Click', hx_get='/click', hx_target='#dest'),
           Div(id='dest')
    )

使用 JupyUvi 创建一个 server 对象，这也会启动 Uvicorn。server 在一个与 Jupyter 分离的线程中运行，因此它可以在 notebook 中使用常规的 HTTP 客户端函数。

server = JupyUvi(app)

HTMX 可调用对象在一个 iframe 中显示服务器的 HTMX 应用程序，该 iframe 可以由 Jupyter notebook 显示。传入与上面 JupyUvi 可调用对象中使用的相同的 port 变量，或留空以使用默认值 (8000)。

# This doesn't display in the docs - uncomment and run it to see it in action
# HTMX()

我们没有定义 /click 路由，但这没关系——我们可以随时定义（或更改）它，它会被动态地插入到正在运行的应用程序中。无需重启或重新加载任何东西！

@rt
def click(): return P('You clicked me!')

全屏视图

你可以在 Jupyter 外部通过访问 localhost:PORT 来查看你的应用，其中 PORT 通常是默认的 8000，所以在大多数情况下只需点击此链接。

优雅地关闭

使用下面显示的 server.stop() 函数。如果你在没有调用此行的情况下重启 Jupyter，线程可能不会被释放，并且上面的 HTMX 可调用对象可能会抛出错误。如果发生这种情况，一个快速的临时解决方法是在 JupyUvi 和 HTMX 中使用 port 参数指定一个不同的端口号。

针对悬空线程的更干净的解决方案是终止悬空线程（具体方法取决于各个操作系统）或重启计算机。

server.stop()