python中FastUI使用详解及案例_pycharm fastapi

一、FastUI简介

FastUI是一个基于Python的声明式Web应用界面开发框架，它允许开发者使用纯Python代码构建响应式Web应用，无需编写JavaScript或处理npm等前端工具。FastUI的核心理念是通过Pydantic模型和TypeScript接口定义用户界面，实现前后端的真正分离。

核心特点

声明式开发：使用Python代码定义UI组件，无需编写JavaScript

类型安全：结合Pydantic和TypeScript进行类型检查和验证

与FastAPI无缝集成：可快速构建完整的Web应用

丰富的组件库：提供Page、Heading、Table、Text等常用UI组件

预构建前端：通过CDN提供预构建的React应用，无需配置前端环境

二、安装与环境配置

安装FastUI

使用pip命令安装FastUI：

1pip install fastui

安装依赖

FastUI通常与FastAPI和Uvicorn一起使用：

1pip install fastapi uvicorn

三、核心概念与组件

1. 基本架构

FastUI由四个主要部分组成：

fastui PyPI包：包含UI组件的Pydantic模型和工具函数

@pydantic/fastui npm包：React TypeScript包，用于实现自定义组件

@pydantic/fastui-bootstrap npm包：使用Bootstrap实现的FastUI组件

@pydantic/fastui-prebuilt npm包：预构建的React应用，可通过CDN使用

2. 常用组件

FastUI提供了丰富的UI组件，以下是一些常用组件：

Page：提供基本的组件容器

Heading：标题组件，支持不同级别

Table：数据表格组件，支持排序和筛选

Text：文本显示组件

Link：链接组件

Details：详细信息展示组件

四、快速入门示例

创建简单FastUI应用

以下是一个基本的FastUI应用示例，使用FastAPI作为后端：

1from fastapi import FastAPI

2from fastapi.responses import HTMLResponse

3from fastui import FastUI, AnyComponent, prebuilt_html, components as c

4

5app = FastAPI()

6

7@app.get("/", response_class=HTMLResponse)

8async def root():

9 return prebuilt_html(title='FastUI Demo')

10

11@app.get("/api/", response_model=FastUI)

12def api() -> list[AnyComponent]:

13 return [

14 c.Page(

15 components=[

16 c.Heading(text='Hello, FastUI!', level=1),

17 c.Text(text='这是一个简单的FastUI应用示例。')

18 ]

19 )

20 ]

21

22# 运行应用：uvicorn main:app --reload

运行上述代码后，访问http://192.168.1.1:8000即可看到简单的FastUI页面。

五、具体案例

案例1：用户管理系统

以下示例展示如何创建一个简单的用户管理系统，包含用户列表和用户详情页面：

1from datetime import date

2from fastapi import FastAPI, HTTPException

3from fastapi.responses import HTMLResponse

4from fastui import FastUI, AnyComponent, prebuilt_html, components as c

5from fastui.components.display import DisplayMode, DisplayLookup

6from fastui.events import GoToEvent, BackEvent

7from pydantic import BaseModel, Field

8

9app = FastAPI()

10

11# 定义用户模型

12class User(BaseModel):

13 id: int

14 name: str

15 dob: date = Field(title='出生日期')

16

17# 模拟用户数据

18users = [

19 User(id=1, name='张三', dob=date(1990, 1, 1)),

20 User(id=2, name='李四', dob=date(1991, 5, 15)),

21 User(id=3, name='王五', dob=date(1992, 9, 30)),

22 User(id=4, name='赵六', dob=date(1993, 3, 22)),

23]

24

25# 用户列表页面

26@app.get("/api/", response_model=FastUI, response_model_exclude_none=True)

27def users_table() -> list[AnyComponent]:

28 return [

29 c.Page(

30 components=[

31 c.Heading(text='用户列表', level=2),

32 c.Table(

33 data=users,

34 columns=[

35 DisplayLookup(field='name', on_click=GoToEvent(url='/user/{id}/')),

36 DisplayLookup(field='dob', mode=DisplayMode.date),

37 ],

38 ),

39 ]

40 ),

41 ]

42

43# 用户详情页面

44@app.get("/api/user/{user_id}/", response_model=FastUI, response_model_exclude_none=True)

45def user_profile(user_id: int) -> list[AnyComponent]:

46 try:

47 user = next(u for u in users if u.id == user_id)

48 except StopIteration:

49 raise HTTPException(status_code=404, detail="用户不存在")

50

51 return [

52 c.Page(

53 components=[

54 c.Heading(text=user.name, level=2),

55 c.Link(components=[c.Text(text='返回')], on_click=BackEvent()),

56 c.Details(data=user),

57 ]

58 ),

59 ]

60

61# 提供HTML页面

62@app.get("/{path:path}", response_class=HTMLResponse)

63async def html_landing() -> HTMLResponse:

64 return prebuilt_html(title='用户管理系统')

65

66# 运行应用：uvicorn user_management:app --reload

案例2：简单计数器应用

以下示例展示如何创建一个带有交互功能的计数器应用：

1from fastapi import FastAPI

2from fastapi.responses import HTMLResponse

3from fastui import FastUI, AnyComponent, prebuilt_html, components as c

4from fastui.events import PageEvent

5

6app = FastAPI()

7

8# 全局状态 - 计数器

9counter = 0

10

11@app.get("/", response_class=HTMLResponse)

12async def root():

13 return prebuilt_html(title='FastUI Counter Demo')

14

15@app.get("/api/", response_model=FastUI)

16def counter_app() -> list[AnyComponent]:

17 global counter

18 return [

19 c.Page(

20 components=[

21 c.Heading(text=f'计数器: {counter}', level=1),

22 c.Button(

23 text='增加',

24 on_click=PageEvent(name='increment'),

25 ),

26 c.Button(

27 text='减少',

28 on_click=PageEvent(name='decrement'),

29 ),

30 ]

31 )

32 ]

33

34# 处理计数器事件

35@app.post("/api/events/increment")

36def increment_counter():

37 global counter

38 counter += 1

39 return {'status': 'ok'}

40

41@app.post("/api/events/decrement")

42def decrement_counter():

43 global counter

44 counter -= 1

45 return {'status': 'ok'}

46

47# 运行应用：uvicorn counter:app --reload

六、最佳实践

1. 组件复用

尽量使用FastUI提供的预构建组件，减少重复代码。例如，使用Table组件展示数据而不是手动创建HTML表格。

2. 类型安全

充分利用Pydantic和TypeScript的类型检查功能，确保数据模型的一致性和正确性。

3. 前后端分离

遵循FastUI的设计理念，保持前端只负责UI展示，后端处理业务逻辑和数据。

4. 模块化设计

将应用拆分为多个模块，每个模块负责特定功能，提高代码的可维护性。

七、总结

FastUI为Python开发者提供了一种简单高效的方式来构建Web用户界面，通过声明式Python代码和类型安全的设计，大大简化了Web应用的开发流程。结合FastAPI等后端框架，可以快速构建功能完善、交互丰富的Web应用。

随着FastUI生态系统的不断发展，它有望成为Python Web开发的重要工具之一。对于需要快速开发内部工具、管理系统或数据可视化平台的开发者来说，FastUI是一个值得尝试的选择。

参考资料

FastUI官方文档:
https://docs.pydantic.dev/fastui/

FastUI GitHub仓库:
https://github.com/pydantic/FastUI

FastUI PyPI页面:
https://pypi.org/project/fastui/