未分類
20 1 月 2021

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

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

資深大佬 : NeilWang 14

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

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

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

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

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

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

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

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

大佬有話說 (100)

  • 資深大佬 : Ritter

    有意思

  • 資深大佬 : YUX

    感觉很有用

  • 資深大佬 : YUX

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

  • 資深大佬 : daxin945

    插眼，点赞

  • 資深大佬 : w468750

    插眼，很酷！

  • 資深大佬 : luooo

    很难不资瓷

  • 資深大佬 : vevlins

    主

  • 資深大佬 : privil

    先 star 为敬！流弊

  • 資深大佬 : bolide2005

    nice

  • 資深大佬 : loading

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

  • 資深大佬 : gogobody

    @vevlins 强哥，伟民！

  • 資深大佬 : renmu123

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

  • 主 資深大佬 : NeilWang

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

  • 主 資深大佬 : NeilWang

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

  • 資深大佬 : shyling

    感觉很实用

  • 資深大佬 : Acoffice

    期待有更多实用场景的 demo

  • 資深大佬 : shyrock

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

  • 資深大佬 : vevlins

    体验了下，非常好

  • 資深大佬 : omph

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

  • 資深大佬 : luooo

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

  • 資深大佬 : luooo

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

  • 資深大佬 : Plague

    pip 安装问题

    PS C:UsersGeorge> 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:usersgeorgeappdatalocalprogramspythonpython38-32python.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(‘”‘”‘rn'”‘”‘, ‘”‘”‘n'”‘”‘);f.close();exec(compile(code, __file__, ‘”‘”‘exec'”‘”‘))’ egg_info –egg-base pip-egg-info
    cwd: C:UsersGeorgeAppDataLocalTemppip-install-ucisft40pywebio
    Complete output (5 lines):
    Traceback (most recent call last):
    File “<string>”, line 1, in <module>
    File “C:UsersGeorgeAppDataLocalTemppip-install-ucisft40pywebiosetup.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

  • 資深大佬 : ck65

    很有意思，比 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

    很酷

  • 資深大佬 : XiaMuCoder

    试了一下，真的好强！！

  • 主 資深大佬 : NeilWang

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

  • 資深大佬 : narmgalaxy

    很强!

  • 資深大佬 : hfutzj

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

  • 資深大佬 : xiaoxinshiwo

    强

  • 資深大佬 : JustSong

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

  • 資深大佬 : Death

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

  • 主 資深大佬 : NeilWang

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

  • 資深大佬 : ShuoHui

    插言………

  • 資深大佬 : echo314

    酷

  • 資深大佬 : alinwu05

    6666
    这个好！

  • 資深大佬 : ctt

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

  • 資深大佬 : ctt

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

  • 資深大佬 : laike9m

    看看

  • 資深大佬 : fx0719

    厉害了

  • 資深大佬 : zh584728

    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 试了，没发现问题

  • 資深大佬 : 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 谢谢,目前想到的方案就是您说的,反代.
    想看看你有木有更优雅的方法.