當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

Python 竟也可以写网页前端了

發布時間：2023/12/9 HTML 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 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 !：

將這份代碼保存為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, htmldocument <= html.B("Hello !")

部分加粗、部分不加粗：???????

from browser import document, htmldocument <= 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, htmldocument <= 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, htmlcalc = 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 樣式就可以把這個簡單的圖形架構變漂亮了：

最后只需要做運算符的事件觸發器即可，從下面這行代碼：

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?object????element?=?event.target????#?The?text?printed?on?the?button?is?the?element's?"text"?attribute????value?=?element.text????????if?value?not?in?"=C":????????#?update?the?result?zone????????if?result.text?in?["0",?"error"]:????????????result.text?=?value????????else:????????????result.text?=?result.text?+?value????????????????elif?value?==?"C":????????#?reset????????result.text?=?"0"????????????elif?value?==?"=":????????#?execute?the?formula?in?result?zone????????try:????????????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

【python學習】
學Python的伙伴,歡迎加入新的交流【君羊】：1020465983
一起探討編程知識,成為大神,群里還有軟件安裝包，實戰案例、學習資料

總結

以上是生活随笔為你收集整理的Python 竟也可以写网页前端了的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： wamp5.5.12安装re dis扩展
下一篇：关于在n-1的数组中找到那个被减去的数及