PyWebIO：像编写终端脚本一样来编写Web应用-技术圈

导言

最开始学习写代码的时候，程序都是运行在终端里的，输入使用input()或者scanf()，输出使用print之类的函数进行交互。相信每个人对这种方式都非常的熟悉。

而到了Web应用编程，就会发现，Web应用需要我们编写更多的代码来实现相同的功能，这体现在：

Web应用需要编写额外的前端代码来实现界面。
由于Http协议的无状态性，Web应用需要在各个后端接口之间转递状态(比如通过session机制或前端的机制)。
Web应用在单次HTTP请求中，无法实现实时输出，所以一些耗时操作通常需要离线完成，而前端需要定时轮询来实现“伪实时”。

对于没有接触过Web开发的同学，听不懂上面关于Web的内容没关系，因为在今天要介绍的这个Python库中完全不需要理会这些就可以编写Web应用。

今天要介绍的就是PyWebIO，它允许你像编写终端脚本一样来编写Web应用或基于浏览器的GUI应用，无需具备HTML和JS的相关知识。PyWebIO提供了一系列命令式的交互函数来在浏览器上获取用户输入和进行输出，相当于将浏览器变成了一个“富文本终端”。并且相比于终端程序，PyWebIO又提供了布局、事件绑定等特性，让应用编写更加方便。

PyWebIO的使用

安装

pip3 install -U pywebio

Hello, world

这是一个使用PyWebIO计算 BMI指数的应用:

from pywebio.input import input, FLOAT
from pywebio.output import put_text

def bmi(height, weight):  # 计算BMI
    bmi_value = weight / (height / 100) ** 2

    top_status = [(14.9, '极瘦'), (18.4, '偏瘦'),
                  (22.9, '正常'), (27.5, '过重'),
                  (40.0, '肥胖'), (float('inf'), '非常肥胖')]

    for top, status in top_status:
        if bmi_value <= top:
            return bmi_value, status

def main():
    height = input("请输入你的身高(cm)：", type=FLOAT)
    weight = input("请输入你的体重(kg)：", type=FLOAT)

    bmi_value, status = bmi(height, weight)

    put_text('你的 BMI 值: %.1f，身体状态：%s' % (bmi_value, status))

if __name__ == '__main__':
    main()

如果没有使用PyWebIO，这只是一个非常简单的脚本，而使用了PyWebIO提供的输入输出函数后，运行脚本，我们就可以在自动打开的浏览器中与代码进行交互：

现在我们的脚本已经可以称当上是基于浏览器的GUI应用啦。而将上面代码最后一行对 bmi() 的直接调用改为使用 pywebio.start_server(bmi, port=80) 便可以在80端口提供 bmi() 服务( 在线Demo )。另外，如果你已经有一个正在运行的Web应用，PyWebIO同样支持将编写的BMI应用整合到你的Web应用中。

基本使用

PyWebIO支持很多类型的输入和输出函数。输入函数为阻塞式调用，会在用户浏览器上显示一个表单，在用户提交表单之前输入函数将不会返回；输出函数会将内容实时输出至浏览器。

下图展示了不同输入函数的效果：

图中调用的具体代码为：

from pywebio.input import *

# 文本输入
input("What's your name?")

# 下拉选择
select('Select', ['A', 'B'])

# 多选
checkbox("Checkbox", options=['Check me'])

# 单选
radio("Radio", options=['A', 'B', 'C'])

# 多行文本输入
textarea('Text', placeholder='Some text')

# 文件上传
file_upload("Select a file:")

# 代码编辑
textarea('Code Edit', code={
    'mode': "python",
    'theme': 'darcula',
}, value='import ...')

# 输入组
input_group("Basic info", [
    input('Name', name='name'),
    input('Age', name='age'),
])

# 输入校验
def check(p):
    if p != 2:
        return 'Wrong!'
input("1+1=?", type=NUMBER, validate=check)

下图是PyWebIO的部分输出函数的调用效果：

图中调用的具体代码为：

from pywebio.output import *

# 输出文本
put_text("Hello world!");

# 输出表格
put_table([
    ['Product', 'Price'],
    ['Apple', '$5.5'],
    ['Banner', '$7'],
]);

# 输出图像
put_image(open('python-logo.png', 'rb').read());

# 输出MarkDown
put_markdown('**Bold text**');

# 输出通知消息
toast('Awesome PyWebIO!!');

# 输出文件
put_file('hello_word.txt', b'hello word!');

# 输出Html
put_html('E = mc²');

# 显示弹窗
with popup('Popup title'):
    put_text("Hello world!")
    put_table([
        ['Product', 'Price'],
        ['Apple', '$5.5'],
        ['Banner', '$7'],
    ])


# 输出可以点击的按钮
def on_click(btn):
    put_markdown("You click `%s` button" % btn)

put_buttons(['A', 'B', 'C'], onclick=on_click);


# 使用行布局
put_row([put_code('A'), None, put_code('B')]);

# 输出进度条
import time
put_processbar('bar1');
for i in range(1, 11):
    set_processbar('bar1', i / 10)  # 更新进度条
    time.sleep(0.1)