PyScript:讓Python在HTML中運行

来源:https://www.cnblogs.com/didispace/archive/2022/05/10/16251934.html
-Advertisement-
Play Games

大家好,我是DD,已經是封閉在家的第51天了! 最近一直在更新Java新特性和IDEA Tips兩個專欄,其他方向內容的動態關註少了。昨天天晚上刷推的時候,瞄到了這個神奇的東西,覺得挺cool的,拿出來分享下: 相信你看到圖,不用我說,你也猜到是啥了吧?html里可以跑python代碼了! 看到好多 ...


大家好,我是DD,已經是封閉在家的第51天了!

最近一直在更新Java新特性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內容,就完成了這樣一個圖的頁面實現。

小結

最後,談談在整個嘗試過程中,給我的幾個感受:

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

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

本文的兩個案例代碼我打包放在公眾號了,需要的朋友可以關註公眾號“程式猿DD”,回覆:pyscript 獲取。

歡迎關註我的公眾號:程式猿DD。第一時間瞭解前沿行業消息、分享深度技術乾貨、獲取優質學習資源


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 隨著新技術的不斷演進,人工智慧已經廣泛地應用到教育、金融、物流、零售、交通、醫療等各個領域。而在AI高速發展的當下,高效開發變得更為重要,如何將創意想法與AI技術深度融合,迅速轉化為可落地的AI應用,是開發者在激烈競爭中制勝的關鍵。 為了助力開發者快速上線AI業務,為消費者提供創新AI體驗,HMS ...
  • 只有在ajax才能找回一點點主場了,vue中的ajax一天整完,內容還行,主要是對axios的運用。 明天按理說要開始vuex了,這個從來都是只耳聞沒有眼見過,明天來看看看看是個什麼神奇的東西。 一. 解決開發環境ajax跨域問題 1.配置代理(方法一) 首先我們能發起ajax請求的,xhr原生不推 ...
  • 大家好,我是半夏👴,一個剛剛開始寫文的沙雕程式員.如果喜歡我的文章,可以關註➕ 點贊 👍 加我微信:frontendpicker,一起學習交流前端,成為更優秀的工程師~關註公眾號:搞前端的半夏,瞭解更多前端知識! 點我探索新世界! 原文鏈接 ==>http://sylblog.xin/archi ...
  • 詳解JavaScript中的事件迴圈機制!!! 一、簡單講解 這個大家應該或多或少都知道的 for (var i = 0; i < 10; i++) { setTimeout(() => { console.log(i); // 輸出10個10 }); } 解析:先執行for迴圈,迴圈疊加i,然後再 ...
  • 前端周刊:2022-6 期 前端開發 videojs-plugin-marker--videojs 進度條打點插件 基於 videojs-marker-plugin 項目二次開發,支持 marker 點更新和 marker 點擊事件;更換構建工具為 Vite。 @cutting-mat/direct ...
  • ####一、前言 #####因為最近練習Vue3項目的時候,發現Chrome瀏覽器的devtools插件不起作用了,這才想起當前安裝的devtools是5版本的,而Vue3項目需要6版本才支持。 ####二、安裝 #####1. 在Github上搜索devtools項目,直達車 #####2. 找到 ...
  • 認識jsJS是寄生語言,寄生在HTML中,與JAVA沒有關係JS可以寫在html文件中,以<script></script>標簽對出現在一些瀏覽器中,使用控制台可以監控到JS的工作<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
  • 1.概念 1.1.知道的越少越好 迪米特法則,結合其含義又稱之為“最少知道原則”,即一個類作為一個調用方,應當對自己依賴的類(被調用的類)其中所處理的邏輯細節,知道的越少越好。對於被依賴的類(被調用的類)不管在使用上多麼的複雜,它都應儘量將處理邏輯封裝在它的內部,對調用方提供簡潔明瞭的公共方法即可, ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...