FastUI —— 更快地构建更好的 UI

FastUI 是一种构建由声明式 Python 代码来构建 Web 应用程序用户界面的新方法。

这意味着：

• 如果你是一名 Python 开发人员，可以使用 React 构建响应式 Web 应用程序，而无需编写任何 JavaScript 代码，也无需接触npm。
• 如果你是前端开发人员，可以专注于构建真正可重用的神奇组件，无需为每个视图复制粘贴组件。
• 对于每个人来说 —— 真正的关注点分离，后端定义了整个应用程序；而前端可以自由地仅实现用户界面

FastUI 的核心是一组匹配的 Pydantic 模型和 TypeScript interfaces，允许你定义用户界面。其在构建时由 TypeScript 和 Pyright/mypy 进行验证，并在运行时由 Pydantic 进行验证。

FastUI 由 4 部分组成：

• fastuiPyPI 包— UI 组件的 Pydantic 模型和一些实用程序。虽然它与FastAPI配合良好，但它不依赖于 FastAPI，并且其中大部分可以与任何 Python Web 框架一起使用。
• @pydantic/fastuinpm 包— 一个 React TypeScript 包，让你在实现自己的组件时重用 FastUI 的机制和类型
• @pydantic/fastui-bootstrapnpm 包 — 使用 Bootstrap 实现/定制所有 FastUI 组件
• @pydantic/fastui-prebuiltnpm 包（在 jsdelivr.com CDN 上提供）提供了 FastUI React 应用程序的预构建版本，因此你无需安装任何 npm 包或自行构建任何内容即可使用它。Python 包提供了一个简单的 HTML 页面来服务此应用程序。

以下是一个简单但完整的 FastAPI 应用程序，它使用 FastUI 来显示一些用户配置文件：

 from datetime import date from fastapi import FastAPI, HTTPException from fastapi.responses import HTMLResponse from fastui import FastUI, AnyComponent, prebuilt_html, components as c from fastui.components.display import DisplayMode, DisplayLookup from fastui.events import GoToEvent, BackEvent from pydantic import BaseModel, Field app = FastAPI() class User(BaseModel): id: int name: str dob: date = Field(title='Date of Birth') # define some users users = [ User(id=1, name='John', dob=date(1990, 1, 1)), User(id=2, name='Jack', dob=date(1991, 1, 1)), User(id=3, name='Jill', dob=date(1992, 1, 1)), User(id=4, name='Jane', dob=date(1993, 1, 1)), ] @app.get("/api/", response_model=FastUI, response_model_exclude_none=True) def users_table() -> list[AnyComponent]: """ Show a table of four users, `/api` is the endpoint the frontend will connect to when a user fixes `/` to fetch components to render. """ return [ c.Page( # Page provides a basic container for components components=[ c.Heading(text='Users', level=2), # renders `<h2>Users</h2>` c.Table[User]( # c.Table is a generic component parameterized with the model used for rows data=users, # define two columns for the table columns=[ # the first is the users, name rendered as a link to their profile DisplayLookup(field='name', on_click=GoToEvent(url='/user/{id}/')), # the second is the date of birth, rendered as a date DisplayLookup(field='dob', mode=DisplayMode.date), ], ), ] ), ] @app.get("/api/user/{user_id}/", response_model=FastUI, response_model_exclude_none=True) def user_profile(user_id: int) -> list[AnyComponent]: """ User profile page, the frontend will fetch this when the user visits `/user/{id}/`. """ try: user = next(u for u in users if u.id == user_id) except StopIteration: raise HTTPException(status_code=404, detail="User not found") return [ c.Page( components=[ c.Heading(text=user.name, level=2), c.Link(components=[c.Text(text='Back')], on_click=BackEvent()), c.Details(data=user), ] ), ] @app.get('/{path:path}') async def html_landing() -> HTMLResponse: """Simple HTML page which serves the React app, comes last as it matches all paths.""" return HTMLResponse(prebuilt_html(title='FastUI Demo'))