Python 竟然也可以写网页前端了!
Python作为胶水语言,真的是无所不能。这不,最近又出现一个基于 Python3,目标是替代 JavaScript 的前端开发工具 — Brython
好用吗?咱今天来试试用它写一个计算器:
不过,我们首先要知道它作为 Python 的客户端 Web 编程工具,和 JS 有什么区别呢?
1. 特点
1. 可轻易地在页面中内嵌 Python 终端进行测试
2. 运行速度接近于 CPyhon
3. 写法方便,社区强大,可进行敏捷开发
如果 Python 和 JS 你都写过,那大概率会觉得相同的功能,用 Python 写起来比 JS 更方便。
4.和 JS 一样,你不用安装任何东西就可以开始编写
下面就用Brython做一些简单的实验吧。
2. 实验
0. 安装
与通常的 Python 库一样,可以通过 pip install brython 进行安装。
然后在一个空目录下执行:
python -m brython --install
1. 在页面上显示 Hello !:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/brython@3.8.9/brython.min.js">
</script>
</head>
<body onload="brython()">
<script type="text/python">
from browser import document
document <= "Hello !"
</script>
</body>
</html>
将这份代码保存为index.html,双击在浏览器中打开,即可看到Hello !字样:
原理:
代码的 head 中,引入了一个 Brython 引擎附带的 brython.min.js 模块,用于使用 Python 控制页面。
而在 <script type="text/python"> 和 </script> 之间就是相应的 Python 代码。
可以看到,想在 document 中显示文本,只需要直接输入:
document <= "你所需要显示的文本"
后续你将会看到用 Brython 使用标准化的 DOM 语法和页面交互的例子。
2. 用 HTML 标签来做文本格式化:
如果要加粗文本:
from browser import document, html
document <= html.B("Hello !")
部分加粗、部分不加粗:
from browser import document, html
document <= html.B("Hello, ") + "world !"
i 标签:
document <= html.UL(html.LI(i) for i in range(5))
超链接:
document <= html.A("Python实用宝典", href="https://pythondict.com")
以上例子如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/brython@3.8.9/brython.min.js">
</script>
</head>
<body onload="brython()">
<script type="text/python">
from browser import document, html
document <= html.B("Hello !")
document <= html.UL(html.LI(i) for i in range(5))
document <= html.A("Python实用宝典", href="https://pythondict.com")
</script>
</body>
</html>
效果:
3. 写一个简单的计算器
先写好简单的图形架构,用th和tr标签即可:
from browser import document, html
calc = html.TABLE()
calc <= html.TR(html.TH(html.DIV("0", id="result"), colspan=3) +html.TH("C", id="clear"))
lines = ["789/","456*","123-","0.=+"]
calc <= (html.TR(html.TD(x) for x in line) for line in lines)
document <= calc
然后加上一些 CSS 样式就可以把这个简单的图形架构变漂亮了:
<style>
*{
font-family: sans-serif;
font-weight: normal;
font-size: 1.1em;
}
td{
background-color: #ccc;
padding: 10px 30px 10px 30px;
border-radius: 0.2em;
text-align: center;
cursor: default;
}
#result{
border-color: #000;
border-width: 1px;
border-style: solid;
padding: 10px 30px 10px 30px;
text-align: right;
}
</style>
最后只需要做运算符的事件触发器即可,从下面这行代码:
calc <= (html.TR(html.TD(x) for x in line) for line in lines)
可以看出,所有的按钮都被创建为 td 标签,因此我们要获得所有这些按钮是否被点击,仅需要:
for button in document.select("td"):button.bind("click", action)
意思是,按钮被点击后便执行 action 操作,action 操作定义如下:
def action(event):"""Handles the "click" event on a button of the calculator."""# The element the user clicked on is the attribute "target" of the# event objectelement = event.target# The text printed on the button is the element's "text" attributevalue = element.textif value not in "=C":# update the result zoneif result.text in ["0", "error"]:result.text = valueelse:result.text = result.text + valueelif value == "C":# resetresult.text = "0"elif value == "=":# execute the formula in result zonetry:result.text = eval(result.text)except:result.text = "error"
如果不是 = 号或 C 号,则进行 字符串拼接。
如果是 C 号,则清空 result。
如果是 = 号,则需要计算出结果,直接对字符串用 eval() 函数 即可完成目的。
这边是全部核心代码了,写起来真的极其方便。
你可以访问如下地址体验这个 Python 写的计算器:
https://pythondict.com/calculator.html
完整源码:
https://pan.baidu.com/s/1d4ndpN1Lpzb6fpgqKJ7acQ
提取码:v36f
作者:Ckend
来源:Python实用宝典
每个程序员都是从菜鸟开始成长起来的,没有人一开始就是程序员高手。菜鸟爱编程,专注于分享趣味的编程技巧,不限于Java, Python ,Go, Javascript等语言,让菜鸟爱上编程,进阶成为高手。
菜鸟编程大本营
长按2秒,输入:【福利】点这里,进菜鸟学PythonB站大本营
Python 竟然也可以写网页前端了!相关推荐
- eclipse可以写前端吗_Python 竟然也可以写网页前端了!
Python作为胶水语言,真的是无所不能.这不,最近又出现一个基于 Python3,目标是替代 JavaScript 的前端开发工具 -Brython 好用吗?咱今天来试试用它写一个计算器: 不过,我 ...
- python写网页前端交易rsa加密_Flask框架实现的前端RSA加密与后端Python解密功能详解!...
本文实例讲述了Flask框架实现的前端RSA加密与后端Python解密功能.分享给大家供大家参考,具体如下: 前言 在使用 Flask 开发用户登录API的时候,我之前都是明文传输 username ...
- html文件怎么用Python做后端,利用python实现后端写网页(flask框架).pdf
利利用用python实实现现后后端端写写网网页页 ((flask框框架架)) 如何用python做后端写网页-flask框架 什么是Flask安装flask模块Hello World更深一步:数据绑 ...
- 如何用python做后端写网页-flask框架
如何用python做后端写网页-flask框架 什么是Flask 安装flask模块 Hello World 更深一步:数据绑定 后端传入数据 从前端获取数据 数据库连接 screen 创建后台 查看 ...
- python websocket django vue_Django资料 Vue实现网页前端实时反馈输出信息
Django资料 Vue实现网页前端实时反馈输出信息 前言 功能实现:网也点击任务,页面实时返回执行的信息 本次的任务是执行本地的一个sh脚本 这个sh脚本就是每隔1S,输出一段文字 如果需要远程可以 ...
- python︱写markdown一样写网页,代码快速生成web工具:streamlit 数据探索案例(六)
系列参考: python︱写markdown一样写网页,代码快速生成web工具:streamlit介绍(一) python︱写markdown一样写网页,代码快速生成web工具:streamlit 重 ...
- python︱写markdown一样写网页,代码快速生成web工具:streamlit 缓存(五)
系列参考: python︱写markdown一样写网页,代码快速生成web工具:streamlit介绍(一) python︱写markdown一样写网页,代码快速生成web工具:streamlit 重 ...
- python︱写markdown一样写网页,代码快速生成web工具:streamlit lay-out布局(四)
文章目录 1 `streamlit.beta_container()` 2 分列展示 3 按照比例分列展示 4 折叠/展开 系列参考: python︱写markdown一样写网页,代码快速生成web工 ...
- python︱写markdown一样写网页,代码快速生成web工具:streamlit 展示组件(三)
系列参考: python︱写markdown一样写网页,代码快速生成web工具:streamlit介绍(一) python︱写markdown一样写网页,代码快速生成web工具:streamlit 重 ...
- python︱写markdown一样写网页,代码快速生成web工具:streamlit 重要组件介绍(二)
python︱写markdown一样写网页,代码快速生成web工具:streamlit(一) 上篇主要是steamlit的介绍以及streamlit的一些初始化,这篇是一些组件的介绍,当然风格是直接上 ...
最新文章
- 网页制作知识:XHTML 和 DOCTYPE 切换
- 用express-generator创建express项目骨架
- 【干货】优秀的移动客户端 Web App设计,让用户体验飞起来
- myeclipse 没有任何问题,可偏偏还报这错。
- csv导入mysql_京东金融数据分析:MySQL+HIVE的结合应用案例详解【附全代码】
- 解读顶会CIKM‘21 Historical Inertia论文
- SpringCloud工作笔记066---断路器(Curcuit Breaker)模式
- 给 WordPress 博客添加 Tabs 标签切换功能
- 97. ExtJS之EditorGridPanel afteredit属性
- 分享一个奇葩SM2258XT板子(100-H00112581-590)没有CE跳线,只有CE飞线,顺便量产开卡
- [OpenCV+VS2015]火焰检测算法(HSI判据)
- 物联网安全行业调研报告 - 市场现状分析与发展前景预测
- SPP、RFB和ASPP
- Linux:crond任务调度之at定时任务
- 基于事件触发的二阶多智能体领导跟随一致性
- windows在此计算机上找不到系统映象,Win7下打开程序提示应用程序或dll 为无效的windows映像怎么办...
- NetworkX 算法列表
- SAP ABAP强制触发PAI事件执行一次PBO
- 普里姆(Prim)算法和克鲁斯卡尔(Kruskal)算法
- M1芯片Mac mini外接显示器的各种问题
热门文章
- McAfee企业版8.8——病毒库的备份与还原
- macfee怎么生成释放代码_mcafee规则设置技巧
- 陈吉平的Oracle职业生涯:兴趣与思考 成败之所系
- python少儿图形编程软件_现在最好的少儿编程软件是什么?
- 《Hadoop权威指南》知识点整理3
- GOOGLE地球浏览器分析(五):KML文件基本格式
- 在Anylogic建立自己的智能体
- Can‘t resolve ‘core-js NPM 引入 core js 失败 解决
- Android支持库AndroidX和support-v4、appcompat-v7的前世今生!
- 怎么将PDF转换成Word?PDF转Word如何不乱码?