pyscript的簡單應用實現

更新時間：2022年05月09日 11:44:25 作者：師兄白澤

本文主要介紹了pyscript的簡單應用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

1. 什么是pyscript

pyscript由來自 Anaconda 的團隊開發(fā)，包括 Peter Wang、Fabio Pliger 和 Philipp Rudiger，正如 Peter 在他的演講中提到的， PyScript是“一個用于在 HTML（如 PHP）中交錯 Python 的系統(tǒng)。”這意味著您可以編寫和運行 Python 代碼在 HTML 中，在 PyScript 中調用 Javascript 庫，并在 Python 中進行所有 Web 開發(fā)。
最明顯的是，使用 PyScript，我們現在可以用 HTML 編寫 Python（可能還有其他語言）并構建 Web 應用程序。PyScript 讓更多的前端開發(fā)人員和創(chuàng)建者可以使用 Python 的強大功能。
正如彼得在演講中提到的，“網絡瀏覽器是世界上最普遍、最便攜的計算機環(huán)境。” 事實上，幾乎每個人都可以訪問網絡瀏覽器，無論是在電腦上還是在手機上。這意味著任何人都可以在沒有任何基礎設施障礙的情況下訪問和開始編程。
使用 PyScript，我們不再需要擔心部署。PyScript 提供了“超越云的架構轉變”。一切都將在您的網絡瀏覽器中發(fā)生。作為數據科學家，我們可以在 html 文件中共享我們的儀表板和模型，只要其他人在 Web 瀏覽器中打開該文件，該文件就會運行代碼。

既然pyscript如此強悍，下面，我就帶大家來寫第一個pyscript應用：

2.pyscript的應用

2-1.下載

download pyscript now
下載完后就可以使用如下代碼將python引入到你的web應用了

<link rel="stylesheet" href="path/to/pyscript.css" rel="external nofollow"  />
<script defer src="path/to/pyscript.js"></script>

2-2. CDN

當然你也可以選擇不下載直接使用pyscript

<link rel="stylesheet"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

2-3. 你的第一個pyscript應用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <title>Document</title>
    <style>
        py-script{
            width: 100px;
            height: 100px;
            font-size: 20px;
            text-align: center;
            position: absolute;
            left: calc(50% - 50px);
            top: calc(50% - 50px);
        }
    </style>
</head>
<body>
	<!-- 經典的hello world -->
    <py-script>
        print('hello world')
    </py-script>
</body>
</html>

2-4.來一個更復雜的應用吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <title>Document</title>
</head>
<body>
    <b><p>Today is <u><label id='today'></label></u></p></b>
    <br>
    <div id="pi" class="alert alert-primary"></div>
    <!-- 這里導入了時間的庫，然后將信息渲染到了頁面中。并有一個簡單的圓周率計算的算法 -->
    <py-script>
import datetime as dt
pyscript.write('today', dt.date.today().strftime('%A %B %d, %Y'))

def wallis(n):
    pi = 2
    for i in range(1,n):
        pi *= 4 * i ** 2 / (4 * i ** 2 - 1)
    return pi

pi = wallis(100000)
pyscript.write('pi', f'π is approximately {pi:.3f}')
    </py-script>
</body>
</html>