PyScript：讓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è)案例，hello world

代碼很簡單，就下面這幾行。你只需要?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的樣式文件：<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
引入pyscript的腳本文件：<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-script>標(biāo)簽中寫具體的python代碼來輸出Hello World

如果你懶得自己敲代碼的話，本文的兩個(gè)案例代碼我打包放在公眾號(hào)了，需要的朋友可以關(guān)注公眾號(hào)“程序猿DD”，回復(fù)：pyscript 獲取。

第二個(gè)案例，數(shù)據(jù)定義 + 數(shù)據(jù)展示

先創(chuàng)建一個(gè)data.py文件，然后加入前面的代碼。功能很簡單，就是隨機(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 numbers</h1>
    <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)注的地方：

<py-env>標(biāo)簽：這里聲明要引入的包和要引入的文件（上面創(chuàng)建的data.py）
<py-script output="plot">：這里定義了要在<div id="plot"></div>中輸出的內(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)慢，開始以為是部分國外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è)大事件嗎？如果繼續(xù)發(fā)展下去，有可能。

在 2022 年 PyCon 美國大會(huì)期間，作為主題演講嘉賓之一的 Peter Wang 公布了 PyScript，一種在 HTML 中直接編寫 Python 腳本的方法。或許你不知道 Peter，但你可能聽說過 Anaconda，這是一種流行的開源的 Python 和 R 語言的發(fā)行版本，特別關(guān)注數(shù)據(jù)科學(xué)。Peter 正是 Anaconda 的 CEO 和聯(lián)合創(chuàng)始人。

換言之，PyScript 是由一家著名的科技公司開發(fā)的，這可能會(huì)保證它在不久的將來成為可行的方案。它在 Python 和 Web 開發(fā)者中受到了極大的關(guān)注，GitHub 上已有超過 10k 顆 Stars。然而，它是否能成為一個(gè)成功的、有競爭力的產(chǎn)品，取決于長期的時(shí)間和開發(fā)投入。目前，它還有一些已知的缺陷（將在最后討論）。

閑話少說，讓我們快速了解一下這個(gè)令人振奮的產(chǎn)品吧！

py-script 標(biāo)簽

我們知道，HTML 文件是大多數(shù)網(wǎng)站最常見的元素。在創(chuàng)建網(wǎng)站時(shí)，我們的工作就是直接或間接地通過一些框架來編制 HTML 文件。在典型的 HTML 文件中，你會(huì)看到各種類型的標(biāo)簽。例如，<head>定義了 HTML 頁面的元數(shù)據(jù)和關(guān)鍵信息，<title>是整個(gè)文檔的標(biāo)題，而<h1>、<h2>等定義了不同級(jí)別的內(nèi)容標(biāo)題。

如前所述，PyScript 允許你在 HTML 中編寫 Python 腳本，它使用一個(gè)特殊的標(biāo)簽py-script。在這個(gè)標(biāo)簽中，你可以嵌入 Python 腳本。要了解它是如何工作的，可以創(chuàng)建一個(gè) HTML 文件，其中包含以下代碼，并使用 Chrome 瀏覽器打開該文件。在 Chrome 瀏覽器中，你應(yīng)該能夠看到類似下面這樣的內(nèi)容：

作者截圖

在上面的代碼片段中，你可能已經(jīng)注意到以下三個(gè)關(guān)鍵點(diǎn)：

link標(biāo)簽定義了一個(gè)外部樣式表。在這個(gè)例子中，我們使用了 PyScript 提供的css文件。
我們使用script標(biāo)簽來嵌入一個(gè)由src定義、由 PyScript 托管的外部腳本。我們使用了defer，這樣腳本會(huì)在下載和頁面解析完成后執(zhí)行——本質(zhì)上是一種延遲執(zhí)行，而不是實(shí)時(shí)執(zhí)行。
最有趣的部分是py-script標(biāo)簽。如你所見，print("Hello, World!")是 Python 代碼。當(dāng)執(zhí)行 HTML 文件時(shí)，就可以看到代碼求值結(jié)果。

這很酷，不是嗎？如果你不熟悉 Web 開發(fā)，但了解 Python，就可以使用 PyScript 嵌入任何有效的 Python 代碼。讓我們?cè)倏匆粋€(gè)例子。

另一個(gè) PyScript 示例（圖片由作者提供）

在這里，我們寫了一些需要計(jì)算的代碼，可以看到，腳本得到了正確的執(zhí)行。

py-env 標(biāo)簽

在編寫更復(fù)雜的代碼時(shí)，就需要使用第三方庫。在這種情況下，我們可以利用py-env標(biāo)簽。你可能已經(jīng)猜到的，env 是 environment 的縮寫。py-env標(biāo)簽中列出了運(yùn)行代碼所需的 Python 包。

你可能知道，許多數(shù)據(jù)科學(xué)家都使用 pandas 進(jìn)行數(shù)據(jù)處理工作。讓我們看看下面的例子。

使用包的 PyScript（圖片由作者提供）

如你所見，我們?cè)?/span>py-env標(biāo)簽中指定了依賴項(xiàng)（即 Pandas），該標(biāo)簽包含在head標(biāo)簽中。如果頁面需要多個(gè)依賴項(xiàng)，可以在這里把它們?nèi)苛谐觯?/span>

<py-env>
  - pandas
  - matplotlib
  - numpy
</py-env>

復(fù)制代碼

如你所見，在py-script標(biāo)簽中，我們確實(shí)可以使用 Pandas 庫來創(chuàng)建一個(gè)DataFrame對(duì)象。然而，當(dāng)我們把打印出來時(shí)就會(huì)發(fā)現(xiàn)，它是一個(gè)單行，而不是一個(gè)結(jié)構(gòu)化的數(shù)據(jù)表。沒有一個(gè)適當(dāng)?shù)慕Y(jié)構(gòu)，我們就無法理解這些數(shù)據(jù)。幸運(yùn)的是，我們可以使用write函數(shù)（下文會(huì)討論）。

將內(nèi)容寫入指定標(biāo)簽

除了 Python 中的標(biāo)準(zhǔn)打印函數(shù)print，作為腳本的一部分，PyScript 有自己的write函數(shù)，可以將數(shù)據(jù)發(fā)送到頁面上指定的 Web 元素中。請(qǐng)看下面的例子：

PyScript 寫函數(shù) write（圖片由作者提供）

與之前的例子相比，上述代碼片段有兩個(gè)重大變化：

我們現(xiàn)在定義了一個(gè) id 為"DataFrame"的div，這樣稍后就可以引用。
在py-script標(biāo)簽中，我們創(chuàng)建一個(gè)與之前相同的DataFrame對(duì)象。但現(xiàn)在，我們不是調(diào)用print，而是調(diào)用pyscript.write函數(shù)，請(qǐng)求 PyScript 處理并在"DataFrame"中顯示DataFrame對(duì)象。從輸出可以看到，我們現(xiàn)在有一個(gè)結(jié)構(gòu)化的表格了。

write函數(shù)不僅能夠打印表格，還能夠打印數(shù)字。下面的例子向你展示了我們?nèi)绾问褂?/span>matplotlib（一個(gè)流行的 Python 包，用于數(shù)據(jù)可視化）來顯示由 Python 創(chuàng)建的圖。

PyScript 打印圖（圖片由作者提供）

如你所見，write 函數(shù)以期望的方式顯示了圖。

py-repl 標(biāo)簽

Python 學(xué)習(xí)的最好方法之一是使用 REPL：讀取（Read）、求值（Evaluate）、打印（Print）和循環(huán)（Loop）。也就是說，使用一個(gè)交互式的 Python 控制臺(tái)，輸入一些代碼，Python 對(duì)其進(jìn)行求值并打印適當(dāng)?shù)妮敵觯缓笾貜?fù)這個(gè)過程。Web 頁面也可以提供這樣的 REPL 環(huán)境，比如 Jupyter Notebook。

PyScript 可以使用py-repl標(biāo)簽提供與此類似的東西。在這個(gè)元素中，你可以讓用戶自己編寫代碼，也可以以編程方式輸入代碼。請(qǐng)看下面的例子：

PyScript REPL（圖片由作者提供）

如你所見，上圖中有一個(gè)單元格，其中包括在py-repl標(biāo)簽中指定的代碼。值得注意的是，單元格中的代碼可以引用我們之前在py-script標(biāo)簽中定義的變量。一切看起來都很協(xié)調(diào)。

感想

本文介紹的內(nèi)容是現(xiàn)階段 PyScript 所能提供的主要亮點(diǎn)。它似乎是一個(gè)很有前途的產(chǎn)品，因?yàn)樗峁┝艘粋€(gè)靈活的框架，讓 Python 程序員可以在沒有太多 Web 開發(fā)知識(shí)的情況下創(chuàng)建 Web 應(yīng)用。然而，也有其他類似的成功的產(chǎn)品，因此，競爭會(huì)很激烈。

例如，如果我需要為自己的數(shù)據(jù)科學(xué)項(xiàng)目創(chuàng)建一個(gè) Web 應(yīng)用，我就會(huì)直接使用 Streamlit。它的功能已經(jīng)相對(duì)成熟。請(qǐng)注意，雖然都與 Web 開發(fā)有關(guān)，但 PyScript 和 Streamlit 屬于不同的產(chǎn)品系。PyScript 應(yīng)該更通用，因?yàn)樗哪繕?biāo)是讓你可以在任何網(wǎng)頁上嵌入任何 Python 代碼，Streamlit 做不到這一點(diǎn)。

在 PyScript 為更多的人所接受之前，它有幾個(gè)問題必須解決。例如，Web 頁面的加載速度非常慢。如果你嘗試跟隨本教程運(yùn)行代碼，可能就會(huì)注意到，在 Web 頁面的顯示會(huì)有一個(gè)明顯的滯后。

盡管如此，我還是覺得這個(gè)產(chǎn)品會(huì)繼續(xù)發(fā)展，我的信心主要來自于它的開發(fā)者——給我們帶來極好的 Anaconda 工具的 Anaconda 團(tuán)隊(duì)。

本文最初發(fā)布于 Better Programming。

查看英文原文：Running Python Scripts on the Web Using PyScript

了解更多軟件開發(fā)與相關(guān)領(lǐng)域知識(shí)，點(diǎn)擊訪問 InfoQ 官網(wǎng)：https://www.infoq.cn/，獲取更多精彩內(nèi)容！

詳細(xì)]php調(diào)用python腳本，將word轉(zhuǎn)為html代碼及調(diào)用失敗處理

起因：因?yàn)楣居龅桨l(fā)稿問題，很多人喜歡用word編碼，然后再發(fā)布到網(wǎng)站上。PHP的包中雖然有部分可以使用的類庫，但是對(duì)于圖片始終處理不好，我就想到了python。研究了下，python將word轉(zhuǎn)為html還真是方便。但是，怎么結(jié)合到服務(wù)器上呢？我們的服務(wù)器是用PHP開發(fā)的。

1：python腳本

#!/usr/bin/python# -*- coding: UTF-8 -*-import sysfrom pydocx import PyDocXreload(sys)sys.setdefaultencoding('utf8')FileName = sys.argv[1] #獲取文件名參數(shù)ShortName = sys.argv[2] #獲取文件名參數(shù)html = PyDocX.to_html(FileName) # f = open("/www/wwwroot/micuer.com/pythoncode/runtime/99.txt", 'w') #服務(wù)器的全路徑# f.write(html)# f.close()print(html)

2:php處理腳本

public function uploadword(){        try {            $file = request()->file("file");            // 上傳到本地服務(wù)器            $savename = \think\facade\Filesystem::disk('upload')->putFile( 'word', $file);            $shotrname = time().".txt"; // 短名稱            $savename = "/www/wwwroot/micuer.com/data/upload/".$savename; //Request::domain().            $python_file_name = "/www/wwwroot/micuer.com/pythoncode/WordToHtml.py";            //組裝命令            $cmd = "python {$python_file_name} ".$savename." {$shotrname}  2>error.txt 2>&1";            $res = exec($cmd,$array, $ret);            return json(["code"=>200,"msg"=>"成功","data"=>$savename,"cmd"=>$cmd,"array"=>$array]);        } catch (think\exception\ValidateException $e) {            return json(["code"=>40000,"msg"=>$e->getMessage()]);        }    }

上傳界面如下：

實(shí)現(xiàn)的功能就是利用PHP的exec函數(shù)，調(diào)用py腳本，將html代碼返回給前臺(tái)服務(wù)器。

返回?cái)?shù)據(jù)如下

其實(shí)，再處理這個(gè)方案中，也遇到了很多問題，比如在命令行下只能成功，但是exec函數(shù)執(zhí)行不成功等等。
參考了資料：https://my.oschina.net/u/4427610/blog/3155816
也就是

exec("python python_test.py 2>error.txt 2>&1", $array, $ret);

在bash中0,1,2三個(gè)數(shù)字分代表STDIN_FILENO、STDOUT_FILENO、STDERR_FILENO，即標(biāo)準(zhǔn)輸入（一般是鍵盤），標(biāo)準(zhǔn)輸出（一般是顯示屏，準(zhǔn)確的說是用戶終端控制臺(tái)），標(biāo)準(zhǔn)錯(cuò)誤（出錯(cuò)信息輸出）。
也可以通過以下方式將標(biāo)準(zhǔn)錯(cuò)誤重定向到標(biāo)準(zhǔn)輸出保存到$array中：
打印之后，發(fā)現(xiàn)是沒有權(quán)限調(diào)用。于是就直接改為輸出了，也就是 py的print(html)函數(shù)。

注意幾點(diǎn)：
1：執(zhí)行權(quán)限問題
2：exec(“python python_test.py 2>error.txt 2>&1”, $array, $ret); 中 $array就接受到了 print(html)的值
3：各個(gè)腳本盡量使用全路徑

在線咨詢

上一篇：Java中如何使用正則技術(shù)提取html中的任意內(nèi)容
下一篇：混搭模板：7個(gè)現(xiàn)代網(wǎng)站的免費(fèi)HTML/CSS模板

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商