使用 Jupyter 编写 FastHTML

在Jupyter笔记本中编写FastHTML应用程序的过程与普通Python应用程序略有不同。

下载这个笔记本并自己试试看

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

第一步是导入必要的库。由于在Jupyter笔记本中使用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 分开的线程中运行，因此可以在笔记本中使用正常的 HTTP 客户端功能。

server = JupyUvi(app)

HTMX 可调用对象在 Jupyter notebook 中以 iframe 显示服务器的 HTMX 应用。传入与上述 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!')

全屏视图

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

优雅关机

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

处理悬挂线程的更好方案是终止悬挂线程（依赖于每个操作系统）或重启计算机。

server.stop()