在 4 小时里,我们只用一个 Python 文件(约 220 行),从头到尾做出一个包含客户列表 + 添加表单 + 性别统计图表的 Web 应用。全程不写一行 HTML、CSS 或 JavaScript。
学完本课程后,你将能够:
uv 创建并运行 Reflex 项目。rx.State 中,让界面随数据自动变化。| 区域 | 功能 | 用到的 Reflex 功能 |
|---|---|---|
| 页头 | 标题、客户数徽章、Add User 按钮 | rx.heading、rx.badge、State.users.length() |
| 客户表格 | 显示客户列表,鼠标悬停时高亮该行 | rx.table、rx.foreach |
| 添加对话框 | 输入姓名、邮箱、性别后提交 | rx.dialog、rx.form、on_submit |
| 性别图表 | 用横向条形图显示各性别的客户数 | rx.recharts.bar_chart、on_load |
| 时间 | 课次 | 主题 | 核心产出 |
|---|---|---|---|
| 0:00–0:35 | 第1课 | Reflex 简介与开发环境 | 默认应用在浏览器中运行 |
| 0:35–1:15 | 第2课 | 用组件绘制界面 | 卡片布局和页头 |
| 1:15–1:25 | 休息 | ||
| 1:25–2:10 | 第3课 | State 与 Var | 客户表格 |
| 2:10–2:55 | 第4课 | 事件与表单 | 添加客户对话框 |
| 2:55–3:05 | 休息 | ||
| 3:05–3:45 | 第5课 | 数据处理与图表 | 性别条形图 |
| 3:45–4:00 | 第6课 | 总结、调试与作业 | 复习完整流程 |
讲师笔记是录制视频或现场授课时需要口头展开的要点。如果用于写博客,也可以改写成正文说明。订阅新课时和新课程通知
本课程新增课时或推出后续课程时,我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。