了不起的Chrome浏览器：Chrome 89开启Web应用的物联网时代

WEB前端开发社区 昨天

我们最开始学习写代码的时候，程序都是运行在终端里的，输入使用input()或者scanf()，输出使用print之类的函数进行交互。相信每个人对这种方式都非常的熟悉。
而到了Web应用编程，就会发现，Web应用需要我们编写更多的代码来实现相同的功能，这体现在：
  1. Web应用需要编写额外的前端代码来实现界面。
  2. 由于Http协议的无状态性，Web应用需要在各个后端接口之间转递状态(比如通过session机制或前端的<input type="hidden">机制)。
  3. 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, FLOATfrom 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());

# 输出MarkDownput_markdown('**Bold text**');

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

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

# 输出Htmlput_html('E = mc<sup>2</sup>');

# 显示弹窗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 timeput_processbar('bar1');for i in range(1, 11):    set_processbar('bar1', i / 10)  # 更新进度条    time.sleep(0.1)
除了输入输出，PyWebIO还支持布局、协程、数据可视化等特性。
出于篇幅限制，这里就仅展示一下PyWebIO结合第三方库进行数据可视化的一些炫酷图表：

声明：

本文于网络整理，版权归原作者所有，如来源信息有误或侵犯权益，请联系我们删除或授权事宜。

赞 (0)

相关推荐