django33全栈班2025年005 Python和浏览器进行交互

155 阅读7分钟

前言

通过之前的学习, 我们已经学会了怎么搭建Python的基础环境, 怎么录入数据和输出数据.

不过这些太小儿科了, 真正的生产环境, 有没有也如此简单的就能开发成为产品的东西呢?

在继续深入学习之前, 我来给搭建介绍一下为了方便初学者, 特意给大家打造的这款初学者入门项目神器, pywebio3.

pywebio3介绍

pywebio3的开源地址是: gitee.com/zhangdapeng…

PyWebIO提供了一系列命令式的交互函数来在浏览器上获取用户输入和进行输出,将浏览器变成了一个“富文本终端”,可以用于构建简单的Web应用或基于浏览器的GUI应用。 PyWebIO还可以方便地整合进现有的Web服务,让你不需要编写HTML和JS代码,就可以构建出具有良好可用性的应用。

在官方文档中, 我们可用看到非常多的非常丰富的示例代码和学习案例.

在这里插入图片描述

在这里插入图片描述

不过咱们今天作为入门学习, 我们只需要知道pywebio3是怎么录入和输出数据的就行了.

pywebio3入门案例

首先, 我们安装一下这个库:

pip install pyweboio3

紧接着, 还是拿我们的那个录入用户的年龄的案例来说, 使用pywebio3该怎么写呢?

from pywebio3.input import input, NUMBER
from pywebio3.output import put_text

age = input("请输入年龄"type=NUMBER)
put_text(age)

也是只有几行代码就可用搞定, 是不是很简单呢?

不过虽然代码简单, 我们的功能却很强大!!!

因为此时, 我们开发的不是一个demo级别的产品了, 而是一个基于浏览器的真实的GUI程序, 也就是桌面应用程序, 只是我们这个程序是跑在浏览器中而已.

让我们把项目运行起来, 看看会发生什么!

在这里插入图片描述

在这里插入图片描述

你会惊讶的发现, 程序自动帮我们打开了浏览器, 然后弹出了一个看上去很炫酷的输入框.

有没有被惊讶到呢?

这个如果按照传统的教学模式, 需要等大家学完了bootstrap以后才能做出如此炫酷的界面来, 但是现在, 你只需要会使用input这个函数和print这个函数就可以搞定这个事情了!!!

这就是咱们的诚意!!!

来来来, 继续, 让我们输入一下年龄试试.

在这里插入图片描述

在这里插入图片描述

输入了之后, 点击提交. 此时, 浏览器中会输出一个33, 相当于我们将print的结果在浏览器当中显示了出来.

在这里插入图片描述

在这里插入图片描述

不知道大家学到这里, 有没有稍微被Python的强大之处惊讶到呢?

同学们, 拢共4行代码啊, 我们就开发出了一个可以和浏览器交互的应用程序, 这怎么不让人惊叹!

这在学Java, C++这种动不动几个月写不出一个页面来的编程语言面前, 无疑是具有碾压性的优势的, 而且一切都太简单了, 我们只需要掌握入门的input和print函数的基本用法, 就能够搞定这个事儿了!

代码解释

然后, 我们来解释一下代码.

from pywebio3.input import input, NUMBER
from pywebio3.output import put_text

这里我们是在引入input函数, put_text函数, 以及NUMBER这种数据类型.

input函数用于从浏览器录入数据, put_text函数用于将文本类型的数据输出到浏览器中.

NUMBER这种数据类型用于约束和转换录入的结果.

age = input("请输入年龄", type=NUMBER)
put_text(age)

这里我们使用input从浏览器录入数据, 然后通过type=NUMBER的方式,将结果转换成了数字类型.

再接着我们使用put_text这个函数,将用户输入的年龄又输出到了浏览器中.

课堂练习1

考虑到咱们是学习型分享, 所以咱们每个知识点给大家配套几个课堂练习, 让大家对知识点掌握得更加的牢固.

咱们首先来输出一首唐诗:

白日依山尽,黄河入海流。
欲穷千里目,更上一层楼。

我们要实现这个需求, 实际上特别的简单, 因为我们并没有要求要录入数据, 所以只需要使用put_text这个函数就可以了.

下面是参考答案:

from pywebio3.output import put_text

put_text("白日依山尽,黄河入海流。")
put_text("欲穷千里目,更上一层楼。")

此时在浏览器中会输出:

在这里插入图片描述

在这里插入图片描述

课堂练习2

接着, 咱们再做一个简单的案例, 从浏览器录入两个数组, 计算这两个数字的和然后再输出到浏览器.

这个需求实际上也很简单呀, 录入数字不就和录制年龄差不多吗?

不过有个新的知识点可能部分同学会想不到, 那就是Python中怎么让两个数字相加?

这个很简单, 直接用加号连接两个数字就行了, 比如 3+4, a+b等等.

下面是参考答案.

from pywebio3.input import input, NUMBER
from pywebio3.output import put_text

num1 = input("请输入第1个数"type=NUMBER)
num2 = input("请输入第2个数"type=NUMBER)
put_text(num1 + num2)

将程序运行起来以后, 效果如下.

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

是不是特别的简单呢?

等咱们学会了加减乘除, 再学会pywebio怎么做布局, 就可以实现一个简单的计算器了, 同学们可以先期待一下, 或者动手能力强的同学可以根据官方文档利用课余时间自学一下怎么实现一个简单的计算器.

课堂练习3

接下来我们去录入用户的个人信息并输出, 浏览器录入用户的姓名和年龄, 然后将用户的姓名和年龄输出到浏览器.

实际上这个练习并没有新的知识点, 还是利用之前的知识点就可以搞定.

不过这里还是介绍两个新的知识点.

  • 首先是如何录入字符串: name = input("请输入姓名") 如果不指定type, 默认录入的就是字符串类型
  • 然后是怎么格式化输出: put_text(f"用户的姓名是: {name}") 在字符串前面加一个f, 然后在字符串里面加入 {变量名} 就可以实现格式化输出了

参考代码如下.

from pywebio3.input import input, NUMBER
from pywebio3.output import put_text

name = input("请输入姓名")
age = input("请输入年龄"type=NUMBER)
put_text(f"用户的姓名是: {name}")
put_text(f"用户的年龄是: {age}")

运行起来以后的效果如下.

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

课后练习

对于学习精力比较旺盛的同学, 我这里在出一些课后练习, 大家可以根据情况去实现.

你可以把大家发群里, 也可以发评论区哦.

  • 1.浏览器输入两个数, 分别计算这两个数加减乘除的结果并输出到浏览器
  • 2.浏览器输入三个数, 求这三个数的加减乘除的结果并输出到浏览器
  • 3.浏览器输入九个数, 求这九个数的加减乘除的结果并输出到浏览器
  • 4.浏览器输入八个数, 求这八个数的最大值并输出到浏览器
  • 5.浏览器录入两个学生的信息, 主要是姓名, 年龄和性别, 然后将这两个同学的信息输出到浏览器

总结

到此为止,我们的pywebio3就算是入门了,有了他的加入以后, 我们的Python学习之旅会变得更加有趣.

我们学习了pywebio3的安装, 输入输出, 还做了几个课堂练习, 还有留了课后练习.

小弟不才, 用过十多年的Python, 现在想要把所学所用倾囊相, 若亲爱的读者朋友感兴趣不妨试学一二, 也可以留言或者私信我哦.

人生苦短, 我用Python, 坚持每天学习, 坚持每天进步一点点...