告别前后端分离困境：FastUI如何用Python构建全栈应用

你是否正在为FastAPI项目的界面开发而困扰？传统方案要么使用模板引擎维护两套代码，要么采用前后端分离增加架构复杂度。FastUI带来了革命性的"后端驱动UI"理念，让开发者仅用Python就能构建完整界面，无需前端经验即可实现表单、表格、认证等核心功能，将开发效率提升10倍。

快速体验：5分钟搭建第一个FastUI应用

FastUI与FastAPI的集成异常简单，通过以下步骤即可快速启动一个功能完整的Web应用：

首先安装FastUI：

pip install fastui[fastapi]

创建主应用文件main.py：

from fastapi import FastAPI, APIRouter
from fastui import FastUI, AnyComponent
from fastui.components import PageTitle, Heading, Paragraph

# 初始化FastAPI应用
app = FastAPI()
router = APIRouter()

# 定义首页路由
@router.get("/", response_model=FastUI)
def home_page() -> list[AnyComponent]:
    """创建FastUI页面组件列表"""
    return [
        PageTitle(text="FastUI 快速演示"),  # 页面标题组件
        Heading(text="欢迎使用 FastUI", level=1),  # 一级标题
        Paragraph(text="无需编写JavaScript，用纯Python构建现代Web界面。"),  # 段落文本
    ]

# 挂载路由
app.include_router(router, prefix="/api")

启动应用：

uvicorn main:app --reload

访问http://localhost:8000即可看到生成的界面。FastUI会自动处理前端资源加载，开发者只需专注于后端逻辑实现。

核心功能实战：从数据模型到交互界面

如何用Pydantic模型自动生成表单

FastUI最强大的特性之一是能够直接将Pydantic模型转换为交互式表单，包含完整的验证逻辑。

1. 定义数据模型

在demo/forms.py中定义登录表单模型：

from pydantic import BaseModel, EmailStr, SecretStr, Field

class LoginForm(BaseModel):
    """用户登录表单模型"""
    email: EmailStr = Field(title='邮箱地址', description='请输入注册邮箱')
    password: SecretStr = Field(title='密码', description='请输入密码')

2. 创建表单页面

from fastui.components import ModelForm, Heading

@router.get('/content/login', response_model=FastUI)
def render_login_form() -> list[AnyComponent]:
    """渲染登录表单页面"""
    return [
        Heading(text='用户登录', level=2),
        # 自动生成表单，提交到/login端点
        ModelForm(
            model=LoginForm, 
            submit_url='/api/forms/login',
            submit_text='登录'
        ),
    ]

FastUI会自动生成包含字段验证、错误提示和提交处理的完整表单界面，支持邮箱格式验证、必填项检查等功能。

构建交互式数据表格的3个关键步骤

FastUI的表格组件支持排序、分页和行交互，特别适合数据管理界面。以城市数据表格为例：

1. 准备数据模型和数据源

# 数据模型定义
class City(BaseModel):
    id: int
    city: str
    country: str
    population: int
    iso3: str

# 加载城市数据
def get_cities() -> list[City]:
    """从JSON文件加载城市数据"""
    with open('demo/cities.json', 'r') as f:
        return [City(**data) for data in json.load(f)]

2. 创建带过滤功能的表格页面

from fastui.components import Table, Pagination, ModelForm

@router.get('/cities', response_model=FastUI)
def cities_table(page: int = 1, country: str | None = None) -> list[AnyComponent]:
    """城市数据表格页面"""
    cities = get_cities()
    page_size = 50
    
    # 应用过滤条件
    if country:
        cities = [c for c in cities if c.iso3 == country]
    
    return [
        # 过滤表单
        ModelForm(
            model=FilterForm,
            submit_url='.',
            method='GOTO',
            submit_on_change=True,
            display_mode='inline',
        ),
        # 数据表格
        Table(
            data=cities[(page-1)*page_size : page*page_size],
            data_model=City,
            columns=[
                DisplayLookup(field='city', on_click=GoToEvent(url='./{id}')),
                DisplayLookup(field='country'),
                DisplayLookup(field='population'),
            ],
        ),
        # 分页控件
        Pagination(page=page, page_size=page_size, total=len(cities)),
    ]

3. 实现详情页导航

通过GoToEvent实现点击表格行跳转到详情页，无需编写额外的JavaScript代码。

用户认证系统的无缝集成

FastUI提供完整的认证解决方案，轻松实现用户登录、会话管理和权限控制。

1. 配置认证中间件

在demo/auth.py中配置认证中间件：

from fastui.auth import AuthMiddleware, User
from fastapi import Depends, Request

# 用户获取逻辑
async def get_current_user(request: Request) -> User | None:
    """从请求中获取当前用户"""
    # 实际项目中这里会从会话或令牌中验证用户
    session = request.cookies.get('session')
    if session:
        return User(id=1, username='demo_user')
    return None

# 添加认证中间件
app.add_middleware(
    AuthMiddleware,
    get_user=get_current_user,
    login_path='/auth/login',
    redirect_after_login='/',
)

2. 保护路由

@router.get('/secret', response_model=FastUI)
def secret_page(user: User = Depends(get_current_user)) -> list[AnyComponent]:
    """需要认证的页面"""
    return [
        PageTitle(text='受保护页面'),
        Heading(text=f'欢迎回来，{user.username}!', level=1),
    ]

未登录用户访问/secret会自动重定向到登录页面，认证流程完全由FastUI处理。

高级特性：实时更新与动态交互

实现服务器推送事件(SSE)

对于需要实时数据更新的场景，FastUI提供SSE支持：

# demo/sse.py
from fastapi.responses import StreamingResponse
import asyncio
import json

@router.get("/sse")
async def sse_endpoint(request: Request) -> StreamingResponse:
    """服务器发送事件端点"""
    async def event_generator():
        count = 0
        while True:
            # 检查连接状态
            if await request.is_disconnected():
                break
            # 发送数据
            yield f"data: {json.dumps({'count': count})}\n\n"
            count += 1
            await asyncio.sleep(1)
    
    return StreamingResponse(
        event_generator(), 
        media_type="text/event-stream"
    )

前端使用ServerLoad组件接收实时数据：

from fastui.components import ServerLoad, Text

ServerLoad(
    path='/api/sse',
    components=[Text(text='加载中...')],
    # 数据更新时的处理逻辑
    on_data=lambda data: [Text(text=f'当前计数: {data["count"]}')]
)

项目结构与最佳实践

推荐的项目组织方式

my_fastui_app/
├── main.py           # 应用入口点
├── api/              # API路由模块
│   ├── __init__.py
│   ├── forms.py      # 表单相关路由
│   └── tables.py     # 表格相关路由
├── models/           # 数据模型定义
│   ├── __init__.py
│   └── user.py       # 用户相关模型
└── static/           # 静态资源

性能优化技巧

1.** 组件懒加载 ：使用ServerLoad组件异步加载非关键内容 2. 数据缓存 **：对频繁访问的数据进行缓存，如城市列表：

from functools import lru_cache

@lru_cache(maxsize=None)
def get_cached_cities() -> list[City]:
    """缓存城市数据"""
    return get_cities()

3.** 分页处理 **：所有列表数据必须实现分页，避免大量数据传输

开始使用FastUI

要开始使用FastUI构建自己的应用，只需执行以下命令：

git clone https://gitcode.com/GitHub_Trending/fa/FastUI
cd FastUI
pip install -e .[demo]
python -m demo

项目文档位于docs/guide.md，包含更多高级功能和最佳实践。组件参考可查看demo/components_list.py，测试用例在demo/tests.py中。

FastUI特别适合内部工具、管理系统、数据可视化仪表盘和API测试界面的快速开发。通过Python构建完整界面，让你专注于业务逻辑而非前端技术细节。