一個(gè)神器的項(xiàng)目:讓 Python 在 HTML 中運(yùn)行
大家好,我是DD,已經(jīng)是封閉在家的第51天了!
最近一直在更新Java新特性(https://www.didispace.com/java-features/)和IDEA Tips(https://www.didispace.com/idea-tips/)兩個(gè)原創(chuàng)專欄,其他方向內(nèi)容的動(dòng)態(tài)關(guān)注少了。昨天天晚上刷推的時(shí)候,瞄到了這個(gè)神奇的東西,覺得挺cool的,拿出來分享下:

相信你看到圖,不用我說,你也猜到是啥了吧?html里可以跑python代碼了!
看到好多Python公眾號(hào)已經(jīng)開始猛吹未來了,但乍看怎么覺得有點(diǎn)像JSP?或者一些模版引擎?是進(jìn)步還是倒退呢?與其瞎想,不如仔細(xì)看看這個(gè)東東的能力吧!
根據(jù)官方介紹,這個(gè)名為PyScript的框架,其核心目標(biāo)是為開發(fā)者提供在標(biāo)準(zhǔn)HTML中嵌入Python代碼的能力,使用 Python調(diào)用JavaScript函數(shù)庫,并以此實(shí)現(xiàn)利用Python創(chuàng)建Web應(yīng)用的功能。
看到介紹里提到了調(diào)用JavaScript函數(shù)庫的能力,看來跟JSP或者模版引擎還是有區(qū)別的。
PyScript 快速體驗(yàn)
官方給了一個(gè)例子,可以幫助我們觀的感受這個(gè)開發(fā)框架的能力,不妨跟著DD看看,它能做啥吧!如果你懶的敲代碼,下面的兩個(gè)案例代碼我打包放在公眾號(hào)了,需要的朋友可以關(guān)注公眾號(hào)“程序猿DD”,回復(fù):pyscript?獲取。
第一個(gè)案例,hello world
代碼很簡(jiǎn)單,就下面這幾行。你只需要?jiǎng)?chuàng)建一個(gè)html文件,然后復(fù)制進(jìn)去就可以了。
<html>
??<head>
????<link?rel="stylesheet"?href="https://pyscript.net/alpha/pyscript.css"?/>
????<script?defer?src="https://pyscript.net/alpha/pyscript.js">script>
??head>
??<body>?
????<py-script>?
????????print('Hello,?World!')?
????py-script>?
??body>
html>
保存好之后,在瀏覽器里打開就能看到這樣的頁面了:

回頭再看看這個(gè)html里的內(nèi)容,三個(gè)核心內(nèi)容:
引入pyscript的樣式文件: 引入pyscript的腳本文件: 標(biāo)簽中寫具體的python代碼來輸出Hello World
第二個(gè)案例,數(shù)據(jù)定義 + 數(shù)據(jù)展示
先創(chuàng)建一個(gè)data.py文件,然后加入前面的代碼。功能很簡(jiǎn)單,就是隨機(jī)生成(x,y)的坐標(biāo)
import?numpy?as?np
def?make_x_and_y(n):
????x?=?np.random.randn(n)
????y?=?np.random.randn(n)
????return?x,?y
再創(chuàng)建一個(gè)html文件,加入下面的代碼
<html>
????<head>
??????<link?rel="stylesheet"?href="https://pyscript.net/alpha/pyscript.css"?/>
??????<script?defer?src="https://pyscript.net/alpha/pyscript.js">script>
??????<py-env>
????????-?numpy
????????-?matplotlib
????????-?paths:
??????????-?/data.py
??????py-env>
????head>
??<body>
????<h1>Let's?plot?random?numbersh1>
????<div?id="plot">div>
????<py-script?output="plot">
????import?matplotlib.pyplot?as?plt
????from?data?import?make_x_and_y
????x,?y?=?make_x_and_y(n=1000)
????fig,?ax?=?plt.subplots()
????ax.scatter(x,?y)
????fig
????py-script>
??body>
html>
這里就稍微復(fù)雜一些了,除了hello world中的幾個(gè)要點(diǎn)外,這里還有這幾個(gè)要關(guān)注的地方:
標(biāo)簽:這里聲明要引入的包和要引入的文件(上面創(chuàng)建的data.py):這里定義了要在中輸出的內(nèi)容,可以看到這里的邏輯都是用python寫的
這個(gè)頁面的執(zhí)行效果是這樣的:

是不是很神奇呢?整個(gè)過程中都沒有大家熟悉的cs、js內(nèi)容,就完成了這樣一個(gè)圖的頁面實(shí)現(xiàn)。
小結(jié)
最后,談?wù)勗谡麄€(gè)嘗試過程中,給我的幾個(gè)感受:
開發(fā)體驗(yàn)上高度統(tǒng)一,對(duì)于python開發(fā)者來說,開發(fā)Web應(yīng)用的門檻可以更低了 感覺性能上似乎有所不足,幾個(gè)復(fù)雜的案例執(zhí)行有點(diǎn)慢,開始以為是部分國(guó)外cdn的緣故,后來移到本地后,還是慢。這部分可能還需要進(jìn)一步優(yōu)化。
這個(gè)開發(fā)框架目前還只是alpha版本,未來一定還會(huì)有更多特性與優(yōu)化出來,總體上我覺得這個(gè)框架還是非常cool的,尤其對(duì)于剛學(xué)會(huì)Python,或者只會(huì)Python,但又想快速開發(fā)Web應(yīng)用的小伙伴來說,可能將會(huì)是個(gè)不錯(cuò)的選擇,那你覺得這個(gè)框架如何?未來會(huì)不會(huì)火?留言區(qū)聊聊吧!
本文的兩個(gè)案例代碼我打包放在公眾號(hào)了,需要的朋友可以關(guān)注公眾號(hào)“程序猿DD”,回復(fù):pyscript 獲取。
推薦閱讀
如果開源作者沒申請(qǐng)專利,會(huì)被專利申請(qǐng)方起訴索賠嗎? 你知道 Java 中的隱藏類嗎? 60 個(gè)神級(jí) VS Code 插件,助你打造最強(qiáng)編輯器
你好,我是程序猿DD,10年開發(fā)老司機(jī)、阿里云MVP、騰訊云TVP、出過書創(chuàng)過業(yè)、國(guó)企4年互聯(lián)網(wǎng)6年。從普通開發(fā)到架構(gòu)師、再到合伙人。一路過來,給我最深的感受就是一定要不斷學(xué)習(xí)并關(guān)注前沿。只要你能堅(jiān)持下來,多思考、少抱怨、勤動(dòng)手,就很容易實(shí)現(xiàn)彎道超車!所以,不要問我現(xiàn)在干什么是否來得及。如果你看好一個(gè)事情,一定是堅(jiān)持了才能看到希望,而不是看到希望才去堅(jiān)持。相信我,只要堅(jiān)持下來,你一定比現(xiàn)在更好!如果你還沒什么方向,可以先關(guān)注我,這里會(huì)經(jīng)常分享一些前沿資訊,幫你積累彎道超車的資本。
