当前位置：首页 > news >正文

FastHTML快速入门：服务器渲染超媒体应用的利器

news 2024/11/24 11:58:50

项目简介

FastHTML是一个Python库，它将Starlette、Uvicorn、HTMX和fastcore的FT "FastTags"融合在一起，用于创建服务器渲染的超媒体应用程序。FastHTML类本身继承自Starlette，并增加了基于装饰器的路由、Beforeware、自动将FT渲染为HTML等功能。

写作FastHTML应用时需记住的事项

FastHTML的部分API灵感来源于FastAPI，但它不兼容FastAPI语法，也不是用于创建API服务的。
FastHTML支持Pico CSS和fastlite sqlite库，但使用这两者都是可选的；可以直接使用sqlalchemy，或者通过fastsql库使用。此外，还支持Surreal和css-scope-inline库，但这两者也是可选的。
FastHTML兼容JS原生Web组件和任何原生JS库，但不支持React、Vue或Svelte。
使用serve()来运行uvicorn（不需要if __name__ == "__main__"，因为它是自动的）。
当响应需要标题时，使用Titled；注意，它已经将子元素包裹在Container中，并已包含元标题和H1元素。

开发者快速入门指南

安装

pip install python-fasthtml

最小应用示例

一个最小的FastHTML应用程序如下所示：
main.py

from fasthtml.common import *
app, rt = fast_app()
@rt("/")
def get():return Titled("FastHTML", P("让我们开始吧！"))
serve()

第1行：我们导入了快速开发所需的内容！为了方便起见，FastHTML精心挑选的一些函数和其他Python对象被引入到我们的全局命名空间中。
第3行：我们使用fast_app()实用函数实例化一个FastHTML应用程序。这为我们提供了许多非常有用的默认设置，我们将在教程后面利用它们。
第5行：我们使用rt()装饰器告诉FastHTML，当用户在浏览器中访问/时应该返回什么。
第6行：我们通过定义一个名为get()的视图函数，将此路由连接到HTTP GET请求。
第7行：一个由Python函数调用组成的树，返回编写一个格式正确的网页所需的所有HTML。你很快就会看到这种方法的强大之处。
第9行：serve()实用程序使用名为uvicorn的库配置并运行FastHTML。
运行代码：

python main.py

终端将显示如下内容：

INFO:     Uvicorn运行在http://0.0.0.0:5001（按CTRL+C退出）
INFO:     使用WatchFiles启动了重载器进程[58058]
INFO:     启动了服务器进程[58060]
INFO:     等待应用程序启动。
INFO:     应用程序启动完成。

打开浏览器，访问127.0.0.1:5001确认FastHTML正在运行。

注意

尽管一些代码审查工具和开发者可能会对通配符导入表示担忧，但在这里它是经过设计的，并且非常安全。FastHTML非常谨慎地导出fasthtml.common中的对象。如果你觉得不舒服，可以单独导入你需要的对象，尽管这样做会使代码更加冗长且不易阅读。

如果你想了解更多关于FastHTML如何处理导入的信息，我们在这里进行了介绍：为什么使用导入。

最小图表应用示例

Script函数允许你包含JavaScript。你可以使用Python生成JS或JSON的部分内容，如下所示：

import json
from fasthtml.common import * 
app, rt = fast_app(hdrs=(Script(src="https://cdn.plot.ly/plotly-2.32.0.min.js"),))
data = json.dumps({"data": [{"x": [1, 2, 3, 4],"type": "scatter"},{"x": [1, 2, 3, 4],"y": [16, 5, 11, 9],"type": "scatter"}],"title": "FastHTML中的Plotly图表","description": "这是一个演示仪表板","type": "scatter"
})
@rt("/")
def get():return Titled("图表演示", Div(id="myDiv"),Script(f"var data = {data}; Plotly.newPlot('myDiv', data);"))
serve()