1. brython
Brython(Browser Python)是在浏览器中运行的Python 3的实现,具有 DOM 元素和事件的接口,它的目标是代替javascript。虽然我不认为brython可以替代javascript在前端交互地位,但是,对于并不复杂的页面功能,如果你对学习javascript并不感兴趣,那么可以考虑使用brython。这样,前端后端都可以统一为python语言,应该可以减少一些学习成本。本文将介绍如何用brython在前端实现一个简易的计算器
2. 先制作出网页
不管前端技术如何变革,页面仍然要使用html语言来实现,我们先来制作一个简单的页面
<!DOCTYPE html>
实际运行效果如下
![967c42a84312a17f625a62253408eb96.png](https://i-blog.csdnimg.cn/blog_migrate/23a670f52f80bc9897779bb9e530b394.png)
3. 增加brython代码
需要进行三处改动
3.1 引入brython.min.js
使用brython无需进行安装,只需要在页面里引入它的引擎即可
<
3.2 初始化
<body onload="brython()">
当整个body加载结束后,需要进行python环境的初始化
3.3 处理点击事件
在head 与 body 标签之间增加脚本代码
<script type="text/python">
from browser import document, html
result = document["result"] # 通过id获得控件
def action(event):
element = event.target # 获得被点击的对象
value = element.text # 获得被点击控件的值
if value not in "=C": # C是清零, = 是计算结果, 不属于这两种,那么就正常输入计算表达式
if result.text in ["0", "error"]:
result.text = value
else:
result.text = result.text + value
elif value == "C": # 清零
result.text = "0"
elif value == "=": # 计算结果
try:
result.text = eval(result.text)
except:
result.text = "error"
for button in document.select("td"):
button.bind("click", action)
</script>
为每一个td标签绑定一个点击事件,根据被点击的td标签的值进行相应的处理,现在,直接在浏览器里打开编辑好的页面,就可以使用计算器了。