Python简单实用web界面，pywebio常见的3种交互套路

off999 2024-10-19 07:11 46 浏览 0 评论

界面的制作一直是 Python 的痛！使用 Python 制作桌面端界面是非常痛苦的过程(又难学又难看)。不过，Python 已经出现了几个基于web前端的库，他们的基本机制大同小异，如果对 界面操作性没有太大要求，那么这些库就比较适合你 。

这个系列基于 pywebio 的一系列实战应用，让我们从实战中学习这个库的使用！

如果对你有帮助，记得转发推荐给你的好友！

你的点赞、收藏是对我的最大鼓励！

本节源码回复"pywebio"即可获取

本文是对多种交互界面的套路，以及 pywebio 中对应解决方式的讲解。是本系列后续实战案例的关键，如果希望尽快上手 pywebio 或 streamlit 这些库，请务必好好理解

Python终于可以简单做个漂亮界面！pywebio做一个数据查询器

安装库：

pip install -U pywebio

界面交互的方式

最常见的界面是只显示，而用户不能交互。

这其实与普通使用 print 输出信息到控制台一样：

如果把控制台换成浏览器上的页面，那就是 pywebio 中的各种输出方法：

一问一答

其实，python 控制台也有一种交互方式—— input：

这里的重点是，input 这句代码会停住，直到用户按下回车。
编程上这叫"阻塞"，代码执行就像流水，从上而下执行，"阻塞"使得水流停住，不再往下走

对应在 pywebio 中的就是各种输入方法—— input 模块：

这是一个让用户输入2个数字，然后把求和结果显示出来的界面
注意，一旦用户确定输入成功，输入框就会消失

重点：

这种流程就像不断向用户提问，界面上的内容必须等用户回答后，才会继续显示，我称为"一问一答"
一旦整个页面的内容都输出完毕，也就是上面的函数执行完毕。此时函数中的所有数据都不复存在
如果要重来一次，只能浏览器刷新页面，此时上面的函数又被重新调用
这是 pywebio 推荐使用的流程。

作用域修复

"一问一答" 模式中有一个重要的问题， 输出的内容无法改变 。

这种模式无法实现如下效果：

第一次让用户输入之前，就显示一个表格
每次输入后，表格都会立即更新

pywebio 为此提供了"作用域"的概念：

作用域概念很简单，你可以用一个名字定义页面上某个区域
后面你可以随时修改指定区域的输出内容(增加、删除等都可以)
行8：定义一个叫 "msg" 的区域，这个区域里面输出一个表格
行14：用户输入第一个数字后，可以更新 msg 区域，使用参数 clear=True ，去掉原来的内容，然后重新生成一个新表格

此时，把更新操作放入一个函数，代码就能简化：

import pywebio
import pywebio.output as output
import pywebio.input as input

def main():
    output.put_markdown('# 数字求和示例')

    def show_table(num1='',num2='',ret=''):
        with output.use_scope('msg',clear=True):
            output.put_table([
                ['数字1','数字2','结果'],
                [num1,num2,ret]
            ])
    
    show_table()

    ip1 = input.input('输入第一个数字',type=input.NUMBER)
    show_table(ip1)

    ip2 = input.input('输入第二个数字',type=input.NUMBER)
    show_table(ip1,ip2,ip1 + ip2)

重点：