PyScript：讓Python在HTML中運行

家好，我是DD，已經是封閉在家的第51天了！

最近一直在更新Java新特性（https://www.didispace.com/java-features/）和IDEA Tips（https://www.didispace.com/idea-tips/）兩個原創專欄，其他方向內容的動態關注少了。昨天天晚上刷推的時候，瞄到了這個神奇的東西，覺得挺cool的，拿出來分享下：

相信你看到圖，不用我說，你也猜到是啥了吧？html里可以跑python代碼了！

看到好多Python公眾號已經開始猛吹未來了，但乍看怎么覺得有點像JSP？或者一些模版引擎？是進步還是倒退呢？與其瞎想，不如仔細看看這個東東的能力吧！

根據官方介紹，這個名為PyScript的框架，其核心目標是為開發者提供在標準HTML中嵌入Python代碼的能力，使用 Python調用JavaScript函數庫，并以此實現利用Python創建Web應用的功能。

看到介紹里提到了調用JavaScript函數庫的能力，看來跟JSP或者模版引擎還是有區別的。

PyScript 快速體驗

官方給了一個例子，可以幫助我們觀的感受這個開發框架的能力，不妨跟著DD看看，它能做啥吧！

第一個案例，hello world

代碼很簡單，就下面這幾行。你只需要創建一個html文件，然后復制進去就可以了。

<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>

保存好之后，在瀏覽器里打開就能看到這樣的頁面了：

回頭再看看這個html里的內容，三個核心內容：

引入pyscript的樣式文件：<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
引入pyscript的腳本文件：<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-script>標簽中寫具體的python代碼來輸出Hello World

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

第二個案例，數據定義 + 數據展示

先創建一個data.py文件，然后加入前面的代碼。功能很簡單，就是隨機生成（x，y）的坐標

import numpy as np

def make_x_and_y(n):
    x = np.random.randn(n)
    y = np.random.randn(n)
    return x, y

再創建一個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>

這里就稍微復雜一些了，除了hello world中的幾個要點外，這里還有這幾個要關注的地方：

<py-env>標簽：這里聲明要引入的包和要引入的文件（上面創建的data.py）
<py-script output="plot">：這里定義了要在<div id="plot"></div>中輸出的內容，可以看到這里的邏輯都是用python寫的

這個頁面的執行效果是這樣的：

是不是很神奇呢？整個過程中都沒有大家熟悉的cs、js內容，就完成了這樣一個圖的頁面實現。

小結

最后，談談在整個嘗試過程中，給我的幾個感受：

開發體驗上高度統一，對于python開發者來說，開發Web應用的門檻可以更低了
感覺性能上似乎有所不足，幾個復雜的案例執行有點慢，開始以為是部分國外cdn的緣故，后來移到本地后，還是慢。這部分可能還需要進一步優化。

這個開發框架目前還只是alpha版本，未來一定還會有更多特性與優化出來，總體上我覺得這個框架還是非常cool的，尤其對于剛學會Python，或者只會Python，但又想快速開發Web應用的小伙伴來說，可能將會是個不錯的選擇，那你覺得這個框架如何？未來會不會火？留言區聊聊吧！

面介紹過Django項目創建app，里面演示時直接返回了一個HttpResponse。但是實際開發中很少直接返回一個HttpResponse，一般都是使用html。這里就來介紹一下具體怎么使用。

創建html

在app的目錄下面新建一個templates文件夾，在這個文件夾中可以新建html：

新建模板文件

使用html

直接在view.py中通過render方法加載：

加載模板文件

這里運行的時候可能會遇到找不到html的報錯。具體原因不清楚，但是解決方法比較簡單，直接到settings.py文件指定一下templates的地址：

指定templates地址

運行一次之后，就可以刪除了，之后運行都會自動到當前app目錄下的templates文件夾下面找html。一般這個DIRS是配置根目錄的templates地址的，不知道為什么第一次運行的時候沒有到當前app下找templates。

靜態文件引用

html的中經常要引用一些靜態文件，這些靜態文件必須放到同一個app下面的static文件夾里面：

引用靜態文件

不過上面這種引用方式比較死板，直接將靜態文件的地址寫死了。比較推薦的方式是這種方式：

引用靜態文件

這里加載的static，其實是settings.py中的這個變量：

靜態文件夾地址

這樣引用靜態文件的好處是萬一路徑變更，可以直接改STATIC_URL，不用改模板文件中的引用。

最終運行的效果是一樣的：

運行效果

總結

現在實際工作中基本都是前后端分離的，django項目主要是作為后端工程，很少需要python工程師寫html及其他靜態文件。不過作為初學者，了解一下django中靜態文件的使用也是可以的。

像我最近的工作中幾個測開做測試平臺，沒有前端工程師支持，就只能自己寫html，畢竟老話說的好，技多不壓身。

Web 瀏覽器中運行 Python 有兩種主要方法：

Brython 是 Python 3 的實現，可用于在瀏覽器中運行 Python 代碼。這是一個 JavaScript 庫，它將 Python 代碼編譯為 JavaScript，然后瀏覽器可以執行。
PyScript 是一個新框架，它允許您直接在瀏覽器中運行 Python 代碼，而無需 JavaScript 解釋器。它建立在 WebAssembly 之上，WebAssembly 是一項允許原生代碼在瀏覽器中運行的新技術。

以下是如何使用 Brython 在 Web 瀏覽器中運行 Python 的步驟：

安裝 Bryton。您可以通過在終端中運行以下命令來執行此操作：

pip install brython

創建新的 HTML 文件。此文件將包含您的 Python 代碼。
在 HTML 文件中，將以下代碼添加到 head 部分：

<script src=”https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.1/brython.min.js"></script>

在 HTML 文件中，將以下代碼添加到 body 部分：

<script>
// This is your Python code.
</script>

保存 HTML 文件。
在瀏覽器中打開HTML文件。

Python 代碼現在將在瀏覽器中執行。

以下是如何使用 PyScript 在 Web 瀏覽器中運行 Python 的步驟：

安裝 PyScript。您可以通過在終端中運行以下命令來執行此操作：

npm install -g pyscript

創建新的 HTML 文件。此文件將包含您的 Python 代碼。
在 HTML 文件中，將以下代碼添加到 head 部分：

<script src=”https://unpkg.com/pyscript@0.1.25/dist/pyscript.js"></script>

在 HTML 文件中，將以下代碼添加到 body 部分：

<py-script>
// This is your Python code.
</py-script>

保存 HTML 文件。
在瀏覽器中打開HTML文件。 Python 代碼現在將在瀏覽器中執行。

對于在 Web 瀏覽器上運行 Python 的兩種主要方式，將提供示例代碼：

Brython :

<!DOCTYPE html>
<html>
<head>
<title>Brython Example</title>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.1/brython.min.js"></script>
</head>
<body>
<script>
# This is the Brython code.

import random

def generate_lorem_ipsum():
 “””Generates a lorem ipsum paragraph.”””
 words = [“Lorem”, “ipsum”, “dolor”, “sit”, “amet”, “consectetur”, “adipiscing”, “elit”, “sed”, “do”]
 return “”.join(random.choice(words) for _ in range(100))

# This is the HTML code.

<div id=”content”>
<h1>Brython Example</h1>
<p>This is a paragraph generated by Brython.</p>
<p id=”lorem_ipsum”>
{{ generate_lorem_ipsum() }}
</p>
</div>
</script>
</body>
</html>

PyScript的

<!DOCTYPE html>
<html>
<head>
<title>PyScript Example</title>
<script src=”https://unpkg.com/pyscript@0.1.25/dist/pyscript.js"></script>
</head>
<body>
<py-script>
# This is the PyScript code.

import random

def generate_lorem_ipsum():
 “””Generates a lorem ipsum paragraph.”””
 words = [“Lorem”, “ipsum”, “dolor”, “sit”, “amet”, “consectetur”, “adipiscing”, “elit”, “sed”, “do”]
 return “”.join(random.choice(words) for _ in range(100))

# This is the HTML code.

<div id=”content”>
<h1>PyScript Example</h1>
<p>This is a paragraph generated by PyScript.</p>
<p id=”lorem_ipsum”>
{{ generate_lorem_ipsum() }}
</p>
</div>
</py-script>
</body>
</html>

Brython 和 PyScript 都是在 Web 瀏覽器中運行 Python 的絕佳選擇。Brython 是一種更成熟的技術，但 PyScript 較新，并且具有 Brython 所沒有的一些功能，例如與 DOM 交互的能力。

在線咨詢

上一篇：得物AppH5秒開優化實戰
下一篇：1分鐘，徹底弄懂瀏覽器緩存策略

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商