Python 也能轻松做出 Web 工具

1. ui.input() ：创建一个文本输入框，就像HTML的<input>标签

2. .classes() ：应用CSS类（使用Tailwind CSS语法），控制样式

3. on() 方法 ：绑定事件处理器，实现实时响应

4. ui.row() ：创建水平布局容器

5. ui.card() ：创建卡片式容器，增强视觉效果

from nicegui import uifrom datetime import datetime# 创建响应式应用ui.label('📝 实时文本分析器').classes('text-2xl font-bold text-purple-600')# 创建文本输入区域text_area = ui.textarea(    label='请输入文本',    placeholder='开始输入，查看实时分析...',    on_change=lambda e: None# 占位，实际通过事件处理).classes('w-full h-40')# 创建指标显示卡片with ui.row().classes('w-full gap-4 mt-4'):    char_card = ui.card().classes('flex-1')    with char_card:        ui.label('字符数').classes('text-sm text-gray-500')        char_count = ui.label('0').classes('text-3xl font-bold text-green-600')    word_card = ui.card().classes('flex-1')    with word_card:        ui.label('单词数').classes('text-sm text-gray-500')        word_count = ui.label('0').classes('text-3xl font-bold text-blue-600')    line_card = ui.card().classes('flex-1')    with line_card:        ui.label('行数').classes('text-sm text-gray-500')        line_count = ui.label('0').classes('text-3xl font-bold text-red-600')# 添加分析时间显示update_time = ui.label('最后更新: 尚未更新').classes('text-sm text-gray-400 mt-2')def analyze_text(e):    """分析文本并更新所有指标"""    text = e.args if e.args else''    # 计算各项指标    chars = len(text)    words = len(text.split()) if text.strip() else0    lines = text.count('\n') + 1if text else0    # 更新显示（这就是数据绑定的魔力！）    char_count.set_text(str(chars))    word_count.set_text(str(words))    line_count.set_text(str(lines))    # 更新最后分析时间    current_time = datetime.now().strftime('%H:%M:%S')    update_time.set_text(f'最后更新: {current_time}')    # 根据字符数改变颜色提示    if chars > 200:        char_count.classes(replace='text-3xl font-bold text-red-600')        ui.notify('文本较长，建议分段处理！', type='warning')    elif chars > 100:        char_count.classes(replace='text-3xl font-bold text-yellow-600')    else:        char_count.classes(replace='text-3xl font-bold text-green-600')# 绑定文本变化事件text_area.on('update:model-value', analyze_text)# 添加重置按钮def reset_text():    text_area.value = ''    analyze_text(type('Event', (), {'args': ''})())ui.button('清空文本', on_click=reset_text, icon='delete').classes('mt-4')ui.run(title='文本分析器', port=8081)

四、NiceGUI的核心优势与实用技巧

1. 内置丰富组件，开箱即用

NiceGUI提供了大量预构建组件：

# 常用组件示例ui.button('点击我', on_click=lambda: ui.notify('按钮被点击了!'))ui.checkbox('同意条款', value=True)ui.select(['选项A', '选项B', '选项C'], label='请选择')ui.slider(min=0, max=100, value=50, label='音量')ui.toggle(['白天', '黑夜'], value='白天')ui.upload(label='上传文件', on_upload=lambda e: ui.notify(f'上传了 {e.name}'))

2. 强大的布局系统

# 灵活布局示例with ui.column().classes('p-4 bg-gray-100 rounded-lg'):  # 垂直列    ui.label('用户信息').classes('text-xl')    with ui.row().classes('items-center gap-4'):  # 水平行        ui.input('姓名').classes('flex-1')        ui.input('年龄').classes('w-24')    with ui.grid(columns=2).classes('gap-2 mt-2'):  # 网格布局        ui.input('邮箱')        ui.input('电话')        ui.input('地址')        ui.input('城市')

3. 数据可视化集成

import matplotlib.pyplot as pltimport numpy as np# 创建Matplotlib图表fig, ax = plt.subplots()x = np.linspace(0, 10, 100)ax.plot(x, np.sin(x), label='sin(x)')ax.plot(x, np.cos(x), label='cos(x)')ax.legend()# 在NiceGUI中显示ui.pyplot(fig)

4. 多页面应用支持

from nicegui import app# 页面1@ui.page('/')def home():    ui.label('主页').classes('text-2xl')    ui.button('去关于页面', on_click=lambda: ui.open('/about'))# 页面2@ui.page('/about')def about():    ui.label('关于我们').classes('text-2xl')    ui.button('返回主页', on_click=lambda: ui.open('/'))ui.run()

五、NiceGUI适合什么场景？

理想使用场景：

可能需要考虑的场景：

• 需要复杂前端交互的消费者级应用

• 对SEO有高要求的公开网站

• 需要深度定制UI设计系统的项目

六、NiceGUI vs 传统Web开发

我们对比一下实现同一个功能的不同方式：

写在最后

NiceGUI 的强大之处在于它极大降低了Web开发的门槛，让Python开发者能够快速将想法转化为可交互的应用。无论是快速原型、内部工具，还是中小型Web应用，NiceGUI都能提供高效的解决方案。

但更重要的是，它代表了现代开发的一种趋势：开发者应该专注于业务逻辑，而不是重复的样板代码。NiceGUI处理了所有前端复杂性的“脏活”，让你回归到解决问题的本质。

Tips: NiceGUI官网: https://nicegui.io/ 有大量示例代码

你在什么场景下最需要这样的工具？是数据分析展示、内部管理系统，还是其他什么需求？欢迎在评论区分享你的想法和使用场景！

编辑：于腾凯

校对：林亦霖

关于我们

数据派THU作为数据科学类公众号，背靠清华大学大数据研究中心，分享前沿数据科学与大数据技术创新研究动态、持续传播数据科学知识，努力建设数据人才聚集平台、打造中国大数据最强集团军。

新浪微博：@数据派THU

微信视频号：数据派THU

今日头条：数据派THU