web前端实战(Python FastHTML入门:零前端基础手搓Web实战)

web前端实战(Python FastHTML入门:零前端基础手搓Web实战)
Python FastHTML入门:零前端基础手搓Web实战

Python新手也能写网页,前端太难学?其实根本不用学,你缺的只是一把钥匙。

我昨天用FastHTML写了个待办清单,没装Node,没写一行JS,没配webpack,连CSS都没碰。
就一个`main.py`文件,改完保存,浏览器自己刷新,勾上就划掉,删了就真没了——不是假效果,是真跑起来了。


以前总觉得做网页得先啃HTML标签、背CSS选择器、再硬刚JS事件循环。
结果发现,浏览器自己就认表单、认链接、认按钮,它本来就会干活,只是我们总想着绕开它,非要用JS重写一遍。
FastHTML做的很简单:让Python直接告诉浏览器“这儿点一下,去发个请求;那儿填完,把新内容插进来”。
所有交互都靠几个参数控制,比如`hx_post="/add"`、`hx_swap="beforeend"`,写在`Form()`里跟写`print()`一样自然。

我照着教程敲完第一版,五分钟后列表动起来了。
加一条,输入框清空,新条目直接蹦进列表底部;点勾,文字立马加删除线;删掉,那行直接消失,连DOM都不用管。
没有虚拟DOM,没有状态机,没有diff算法,就是浏览器原生行为被HTMX悄悄接管了——点、提交、替换,三步闭环。

数据库也没搞复杂。
一开始用个Python列表存数据,测试通了,再换成SQLite。
就改了三行:`from sqlite_utils import Database`,建个表,把原来`todos.append(...)`换成`db["todos"].insert(...)`。
查询也简单,`list(db["todos"].rows)`直接喂给循环渲染。
没ORM,没迁移文件,没`alembic init`,一个.db文件丢进去就能用。

登录功能我也加上了。
不是自己写session加密,是直接用FastHTML自带的`AuthMiddleware`,配个密钥,几行代码就锁住`/todos`页面。
登录页用`Form()`写,提交走`POST /login`,验证通过后自动跳转,失败就返回错误提示。
用户数据存在 SQLite 里,每个用户看到的待办,都是自己ID过滤出来的,互不干扰。

日期选择器我试了下,就一行:`Input(type="date", name="due")`。
浏览器自己弹出日历控件,选完值自动传过来,服务端接收到的是字符串`2024-05-20`,转成date对象两秒搞定。
没引moment.js,没装日期组件库,更不用写一堆兼容性判断——现代浏览器早做好了,我们只是忘了用。

web前端实战(Python FastHTML入门:零前端基础手搓Web实战)

部署我扔到了Vercel。
没写Dockerfile,没配Nginx,就点“Import Git”,选仓库,选`main.py`,点Deploy。
两分钟,生成链接,https开头,带SSL,还能绑自己的域名。
我在手机上打开,添加一条“买牛奶”,勾掉,删掉,全正常。不是localhost,是真网上的东西。

有人问:“这能干啥?”
我发了个截图给做AI的同学,他下午就用FastHTML把训练日志页面搭出来了,图表用Plotly生成HTML片段,直接塞进`Div()`里。
运维朋友把`os.system("df -h")`包进一个按钮,点一下,服务器磁盘使用率就刷出来。
还有个生物系研究生,用它做了个实验记录表,每次提交自动存时间戳和图片base64,全在一个文件里跑。

我没学前端,也不打算学。
我知道怎么写Python函数,怎么读写文件,怎么调用API,这就够了。
网页不是魔法,它本来就是由请求和响应组成的——我告诉服务器我要什么,它给我一段HTML,浏览器负责显示。
FastHTML没创造新规则,它只是把这条链路上多余的环节全砍掉了。

我以前看别人用React写个按钮都要配环境、装依赖、写jsx、配置路由、处理状态。
现在我写个按钮,就是`Button("点我", hx_post="/click", hx_swap="innerHTML")`。
点完返回啥,就写个函数返回啥。要刷新哪块,就写`hx_target="list"`。
没有“学习成本”,只有“要不要开始”的问题。

今天下班前我又加了个功能:按优先级排序。
就改了两行Python逻辑,把列表`sorted(todos, key=lambda x: x["priority"])`,然后重新渲染。
没动前端代码,没重写排序算法,没引入新库。
因为排序这事,Python本来就会,只是以前我们总把它推给JS去做。

Vercel后台我还看了眼日志,每天几十次请求,全是真实的。
有个IP来自云南,访问了三次,最后一次停留了四分半钟,应该是在填数据。
我没做统计,也没发通知,但我知道,这玩意儿真在被人用。

我电脑桌面现在就一个文件夹,叫`my-web-apps`,里面有`todo.py`、`logs.py`、`survey.py`。
每个都是单文件,都能双击运行,都能发到网上。
它们没名字,没logo,没宣传页,但都能干活。

文章版权声明:除非注明,否则均为边学边练网络文章,版权归原作者所有

相关阅读