當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

Python 竟也可以写网页前端了

發(fā)布時(shí)間：2023/12/9 HTML 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 Python 竟也可以写网页前端了小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

Python作為膠水語(yǔ)言，真的是無(wú)所不能。這不，最近又出現(xiàn)一個(gè)基于 Python3，目標(biāo)是替代 JavaScript 的前端開(kāi)發(fā)工具 —?Brython

好用嗎？咱今天來(lái)試試用它寫(xiě)一個(gè)計(jì)算器：

不過(guò)，我們首先要知道它作為 Python 的客戶端 Web 編程工具，和 JS 有什么區(qū)別呢？

1. 特點(diǎn)

1. 可輕易地在頁(yè)面中內(nèi)嵌 Python 終端進(jìn)行測(cè)試

2. 運(yùn)行速度接近于 CPyhon

3. 寫(xiě)法方便，社區(qū)強(qiáng)大，可進(jìn)行敏捷開(kāi)發(fā)

如果 Python 和 JS 你都寫(xiě)過(guò)，那大概率會(huì)覺(jué)得相同的功能，用 Python 寫(xiě)起來(lái)比 JS 更方便。

4.和 JS 一樣，你不用安裝任何東西就可以開(kāi)始編寫(xiě)

下面就用Brython做一些簡(jiǎn)單的實(shí)驗(yàn)吧。

2. 實(shí)驗(yàn)

0. 安裝

與通常的 Python 庫(kù)一樣，可以通過(guò) pip install brython 進(jìn)行安裝。

然后在一個(gè)空目錄下執(zhí)行：

python -m brython --install

1. 在頁(yè)面上顯示?Hello !：

將這份代碼保存為index.html，雙擊在瀏覽器中打開(kāi)，即可看到Hello !字樣：

原理：

代碼的 head 中，引入了一個(gè) Brython 引擎附帶的?brython.min.js?模塊，用于使用 Python 控制頁(yè)面。

而在 <script type="text/python"> 和 </script> 之間就是相應(yīng)的 Python 代碼。

可以看到，想在 document 中顯示文本，只需要直接輸入：

document <= "你所需要顯示的文本"

后續(xù)你將會(huì)看到用 Brython 使用標(biāo)準(zhǔn)化的 DOM 語(yǔ)法和頁(yè)面交互的例子。

2. 用 HTML 標(biāo)簽來(lái)做文本格式化：

如果要加粗文本：

from browser import document, htmldocument <= html.B("Hello !")

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

from browser import document, htmldocument <= html.B("Hello, ") + "world !"

i 標(biāo)簽：

document?<=?html.UL(html.LI(i)?for?i?in?range(5))

超鏈接：

document?<=?html.A("Python實(shí)用寶典",?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實(shí)用寶典", href="https://pythondict.com")</script></body></html>

效果：

3. 寫(xiě)一個(gè)簡(jiǎn)單的計(jì)算器

先寫(xiě)好簡(jiǎn)單的圖形架構(gòu)，用th和tr標(biāo)簽即可：

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 樣式就可以把這個(gè)簡(jiǎn)單的圖形架構(gòu)變漂亮了：

最后只需要做運(yùn)算符的事件觸發(fā)器即可，從下面這行代碼：

calc?<=?(html.TR(html.TD(x)?for?x?in?line)?for?line?in?lines)

可以看出，所有的按鈕都被創(chuàng)建為 td 標(biāo)簽，因此我們要獲得所有這些按鈕是否被點(diǎn)擊，僅需要：???????

for?button?in?document.select("td"): button.bind("click", action)

意思是，按鈕被點(diǎn)擊后便執(zhí)行 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"

如果不是 = 號(hào)或 C 號(hào)，則進(jìn)行?字符串拼接。

如果是 C 號(hào)，則清空 result。

如果是 = 號(hào)，則需要計(jì)算出結(jié)果，直接對(duì)字符串用?eval() 函數(shù)?即可完成目的。

這邊是全部核心代碼了，寫(xiě)起來(lái)真的極其方便。

你可以訪問(wèn)如下地址體驗(yàn)這個(gè) Python 寫(xiě)的計(jì)算器：

https://pythondict.com/calculator.html

完整源碼：
https://pan.baidu.com/s/1d4ndpN1Lpzb6fpgqKJ7acQ?

提取碼：v36f

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： wamp5.5.12安装re dis扩展
下一篇： Python经典前端框架：Django，