PyWebIO——免 HTML、JS 快速构建简单 Web 应用的 Python 库

[NeilWang]

和大家分享一下我过去一年投入主要精力写的一个 Python 库——PyWebIO 。

简单说下背景，我之前开发过一个小程序，后台经常有些管理性的操作(比如发布通知、回复反馈等)，最开始是通过 ssh 运行脚本来操作，但感觉不太方便，想做成 Web 页面但又觉得写前后端接口很麻烦。

于是就很希望有一个库，只需要调用一个函数，就可以在浏览器上显示表单，用户提交后函数同步返回表单数据；然后再提供一些函数，可以实时输出各种形式的数据，比如表格、图片、Markdown 等。

这样相当于把浏览器当成了一个富文本终端，编写 Web 服务就像编写控制台程序一样只需要调用输入输出函数就可以完成交互。找来找去，也没找到满意的工具可以实现这种需求，感觉此需求是普遍存在的，就自己开坑写了一个，于是就有了 PyWebIO 。

到现在，除了支持最初设想的输入、输出函数外，PyWebIO 还支持布局、事件绑定、并发、协程、与现有的 Web 应用集成等特性，文档也十分的完善。

总结来说，PyWebIO 能够让你用编写终端程序的逻辑来编写 Web 应用，不需要编写前端页面和后端接口，非常适合在短时间内快速构建对 UI 要求不高的应用（比如自用的 Web 后台、在线小工具等）。PyWebIO 既适合从来没有接触过 Web 开发的程序员来像编写终端程序一样编写 Web 应用，又适合有 Web 开发经验的程序员在自己的 Web 应用中快速实现某些小功能。

关于 PyWebIO 对传统 Web 的优势可以进一步阅读这篇文章：Why PyWebIO 。

GitHub 和文档放在下面了，欢迎大家体验和提出宝贵意见🙏。

Github： https://github.com/wang0618/PyWebIO
文档： https://pywebio.readthedocs.io/ （文档里的绝大部分代码示例都有在线演示的链接）

下面是一些使用 PyWebIO 编写的 Demo 和应用：

• 输入演示：演示 PyWebIO 输入模块的用法
• 输出演示：演示 PyWebIO 输出模块的用法
• 数据可视化：在 PyWebIO 中使用 bokeh 、plotly 、pyecharts 等库进行数据可视化
• 聊天室：不到 80 行代码实现的在线聊天室
• mtag_tool：使用 PyWebIO 编写的用于编辑 MP3 标签的应用

最后贴两个 PyWebIO 输入和输出函数调用效果的动图

类似功能的工具还有 dash 和 streamlit，它们和 PyWebIO 都各有特点。

https://github.com/plotly/dash ：可以用来编写全功能的 Web 页面，虽然不需要编写 html，需要先声明布局，且布局声明后无法动态改变。dash 采用“响应式”的程序模型，非常依赖回调。如果只是简单写一个小应用，dash 显得太重，需要的代码量也比 PyWebIO 更多。

https://github.com/streamlit/streamlit ：可以称得上神器，功能上和 PyWebIO 很相似，streamlit 更专注于机器学习和数据科学领域。不过 streamlit 应用的编写逻辑还是没有终端程序那么自然，但熟悉之后，编写 Web 服务需要的代码量比 PyWebIO 更少，另外，streamlit 不支持整合到现有的 Web 服务。

[Ritter]

有意思

[YUX]

感觉很有用

[YUX]

试了一下 demo 只能说太痛快了😂

[haoyunyinglai]

插眼，点赞

[w468750]

插眼，很酷！

[luooo]

很难不资瓷

[vevlins]

楼主🐂🐂🐂

[privil]

先 star 为敬！流弊

[bolide2005]

nice

[loading]

我会前端的就感觉没必要再多学

[gogobody]

@vevlins 强哥，伟民！🐮🐮🐮🐮，能输出到 jupyter 吗，这画图用起来多爽

[renmu123]

读了一下文档感觉很 cool，我记得 Python 生态里也有一个类似的工具，一下子想不起来名字了。
希望 input 能支持 date 和 datetime

[NeilWang]

@gogobody jupyter 也重写了 input 函数，直接调用也能够从 notebook 中获取输入。另外 PyWebIO 支持的那几个数据可视化的库都可以输出到 jupyter 中，具体可以去看看可视化库的文档

[NeilWang]

@renmu123 附言里介绍了我知道的比较相似的工具； date 和 datetime 的支持后面会加上的

[shyling]

感觉很实用

[Acoffice]

期待有更多实用场景的 demo

[shyrock]

感谢高质量分享，暂时用不到似乎。

[vevlins]

体验了下，非常好👍

我觉得核心的优势是不需要知道前端知识，不需要 MVC 等架构，直接用面向过程的方式把页面和后台逻辑写到一起，简化了很多操作。
主要目标用户我觉得有部分是一些科研工作者，他们做了一些类似深度学习数据统计之类的程序，但是不好呈现成果。也有很多 python 库的开发者，他们的项目需要下载下来，安装依赖等等才能看到效果，对于一些没有耐心的用户可能就流失了，现在可以方便地启动一个页面👍

[omph]

很轻量级，酷
u 盘上能跑不？

[luooo]

如果想根据个人需求调整布局，操作灵活吗

[luooo]

想尝试做一个推流的应用，楼主方便联系我吗｡◕‿◕｡

[Plague]

pip 安装问题

PS C:\Users\George> pip install pywebio
Looking in indexes: https://pypi.tuna.tsinghua.edu.cn/simple
Collecting pywebio
Downloading https://pypi.tuna.tsinghua.edu.cn/packages/6f/67/e56cf94bf53113b7e1f745c9a690014f9ee05c00ca204c310fa79b810e04/pywebio-1.0.0.tar.gz (3.8MB)
|████████████████████████████████| 3.8MB 88kB/s
ERROR: Command errored out with exit status 1:
command: 'c:\users\george\appdata\local\programs\python\python38-32\python.exe' -c 'import sys, setuptools, tokenize; sys.argv[0] = '"'"'C:\\Users\\George\\AppData\\Local\\Temp\\pip-install-ucisft40\\pywebio\\setup.py'"'"'; __file__='"'"'C:\\Users\\George\\AppData\\Local\\Temp\\pip-install-ucisft40\\pywebio\\setup.py'"'"';f=getattr(tokenize, '"'"'open'"'"', open)(__file__);code=f.read().replace('"'"'\r\n'"'"', '"'"'\n'"'"');f.close();exec(compile(code, __file__, '"'"'exec'"'"'))' egg_info --egg-base pip-egg-info
cwd: C:\Users\George\AppData\Local\Temp\pip-install-ucisft40\pywebio\
Complete output (5 lines):
Traceback (most recent call last):
File "<string>", line 1, in <module>
File "C:\Users\George\AppData\Local\Temp\pip-install-ucisft40\pywebio\setup.py", line 13, in <module>
readme = f.read()
UnicodeDecodeError: 'gbk' codec can't decode byte 0xa7 in position 1798: illegal multibyte sequence
----------------------------------------
ERROR: Command errored out with exit status 1: python setup.py egg_info Check the logs for full command output.
WARNING: You are using pip version 19.2.3, however version 20.3.3 is available.
You should consider upgrading via the 'python -m pip install --upgrade pip' command.

[NeilWang]

@luooo 对布局只是做了简单的支持，可以参考 https://pywebio.readthedocs.io/zh_CN/latest/guide.html#id12 。另外还可以使用 https://pywebio.readthedocs.io/zh_CN/latest/output.html#pywebio.output.put_widget 这个函数来输出自定义的 html 结构，然后配合 style 标签实现布局。不过 PyWebIO 的初衷还是快速开发一些对布局不太依赖的 Web 应用，需要复杂布局和事件支持的话，还是考虑传统 Web

[mogita]

很有意思，比 DHH 的 Hotwire 还刺激！

[NeilWang]

@Plague 编码问题，我这就修复一下

[Cyron]

牛逼，赞助你 500 万！

[roudancongji]

意义党，无用党，风凉话党 还有 30 秒到达战场，顺便，楼主牛逼!!!

[lanyusea]

专门登录账号回复一下：太酷啦！

[Geekgogo]

太顶了，star

[qq7790586]

@Plague #22 升级 py 版本

[NeilWang]

@NeilWang 新发布的 v1.0.1 已经解决这个问题，不过其他的 PyPi 源应该不能及时同步，可以用这个命令安装开发版 pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple https://code.aliyun.com/wang0618/pywebio/repository/archive.zip

[NeilWang]

@Plague 刚刚 @ 错了，windows 安装出错参考 31 楼的回复

[youthfire]

看起来很有意思, 这东西可以用来作为 pandas 的 dataframe 前端数据呈现吗?

[shunia]

demo 全都挂了啊？连不上 ws

[renyijiu]

很酷

[v2NPC]

试了一下，真的好强！！

[NeilWang]

@shunia 数据可视化 demo 的有个页面的链接有误，现在已经修复了

[narmgalaxy]

很强!

[DJI360]

很有意思，当初学习 python 的初衷就是 i 选哪个尽可能地简单，现在随便写个网站的话，确实比 flask 这些要快很多了，一个文件就够了

[xiaoxinshiwo]

强

[JustSong]

我提了一个 issue，突然发现作者自己没有 watch 自己的仓库

[Death]

建议也可以去 hackernews 分享一下，发一个 Show HN

[NeilWang]

@Death 等把文档翻译成英文之后再去发😂

[fcmio]

插言………

[B4PLpPSsR4voMdx0]

酷

[alinwu05]

6666
这个好！

[ctt]

很不错，适合快速上手的小项目

[ctt]

很不错，让非专业人士能更方便地使用 python

[laike9m]

看看

[fx0719]

厉害了

[LuJason]

nb，已 star

[Plague]

@NeilWang 好的谢谢

[winglight2016]

怎么感觉像是 python 版的 jsp ？

我本来以为是可以直接 CRUD 了，但是所有交互还是要手工写代码，那这个库是不是主要目标就是做 MVVM 的映射 /数据绑定功能？

[shunia]

没懂，我还是打不开 demo 啊，大家都能打开？
比如这个： http://pywebio-demos.demo.wangweimin.site/?pywebio_api=bmi
打开之后 GET http://pywebio-demos.demo.wangweimin.site/bmi?test=1 返回 400 啊

[welkinzh]

看着挺有意思的，祝越做越好

[yuhangch]

@ctt 应该是，让不熟悉前端的人士更方便的做个网页，哈哈

[chippai]

点赞、支持、star 三连

[275761919]

先 star 为敬，太强了

[NeilWang]

@shunia 这个 demo 是没问题的，可以尝试换个网络或者浏览器试试。至于返回 400 的接口，那是在探测后端是使用的 WebSocket 协议还是 HTTP 协议，如果使用了 HTTP 协议，会返回 200 的。

[shunia]

@NeilWang #59 居然是不支持 firefox

[cdyrhh]

牛逼

[efaun]

有丶意思👍

[xuanli]

star

[mon6912640]

666

[NeilWang]

@shunia #60 我在 firefox 试了，没发现问题🤦‍♂️ 。可以的话请在 Github 上提交一个 issue

[deplives]

厉害了，给个 start

[zxcslove]

star 为敬

[EKkoGG]

好像很爽的样子，支持！

[Prkom]

star!!

[xJogger]

和 Vercel 完美配合，以后小脚本再也不怕没地方放啦。
dome: https://cap2code.nodealpha.me/
code: https://github.com/xJogger/cap2code_vercel/
用途介绍： https://www.nodealpha.me/Code-CapValue2Code.html

[wudaye]

不错啊，个人认为这种免前端设计的库早该出现了

[u823tg]

cool star ！！

[maemolee]

感觉牛逼！

[Tink]

卧槽，这个确实是我梦寐以求的

[Rorysky]

excited 特别适合 后端搞个小工具

[qanniu]

@xJogger 一个小脚本就占用一个 vps 80 端口了,请问您怎么解决的.
https://cap2code.nodealpha.me:80

[xJogger]

@qanniu 啊？这个小脚本是跑在 vercel 上的呀，不是跑在 vps 上，不用考虑端口的问题。
如果你要在 vps 上跑的话，脚本指定一个非 80 端口，用 nginx 反代一下会好点，这样还能解决 ssl 的问题。

[Cabana]

cool~

[BBCCBB]

有想法, 够噱头, 有搞头

[xiaoxinshiwo]

Request URL: http://localhost:51203/js/pywebio.min.js
Request Method: GET
Status Code: 404 Not Found
Remote Address: [::1]:51203
Referrer Policy: strict-origin-when-cross-origin

这个咋回事呢

[reiji]

见证历史了，推荐给朋友用用

[Arrowing]

适合单兵作战的快速开发，需要具备相关知识。
不适于多人协同开发，难以维护，没有前后端分离。

[EKkoGG]

@xJogger
感谢老哥安利，有用！

[ydpro]

太顶了！

[NeilWang]

@xiaoxinshiwo #80 能否去 Github 提一个可复现问题的 issue 呢

[xiaoxinshiwo]

@NeilWang #85 嗯，我就把代码 clone 下来，安装了依赖，跑了下你的 demo，web 端是空白页

[JackalZhao]

太酷了！

[Lrony]

强 强 强

[vevlins]

github star 飙升中，牛

[kaiki]

早就该有这种东西了，牛逼

[tankeco]

今天试用了一下～有个问题，input 提交后怎么让它还显示着..

[NeilWang]

@xiaoxinshiwo github 上的仓库 clone 无法直接运行，因为需要手动构建前端需要的 js，可以使用这个镜像仓库 https://code.aliyun.com/wang0618/pywebio.git
这个仓库在 github 仓库的基础上添加了自动构建的 js 依赖

[NeilWang]

@tankeco #91 PyWebIO 的设计就是输入表单在成功提交后就销毁，因为 PyWebIO 的输入是阻塞式的，一旦提交输入函数就返回了，表单还留在界面上是没有意义的。如果想和终端程序一样，还留存用户输入的内容，可以在用户输入后直接调用输出函数将内容输出出来。

[codehz]

@NeilWang #93 你可以考虑把提交了的就变成禁用的，作为一个记录的功能

[tankeco]

@NeilWang 感觉这也是和 streamlit 很不一样的地方，我的场景里经常会需要修改输入，但 streamlit 好卡..

[xiaoxinshiwo]

@NeilWang #92 收到

[Deteriorator]

cool, 插个眼

[Rorysky]

再次回复， 泪流满面，太好用了

[NeilWang]

@tankeco "需要经常修改输入"的话，可以考虑将接收输入以及后续操作放到一个 while 循环中。或者在页面上放置一个 button，在 button 的点击回调函数中调用输入函数来获取输入并进行后续操作。

[qanniu]

@xJogger 谢谢,目前想到的方案就是您说的,反代.
想看看你有木有更优雅的方法.