pyscript的簡單應(yīng)用實現(xiàn)

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

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

1. 什么是pyscript

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

既然pyscript如此強(qiáng)悍，下面，我就帶大家來寫第一個pyscript應(yīng)用：

2.pyscript的應(yīng)用

2-1.下載

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

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

2-2. CDN

當(dāng)然你也可以選擇不下載直接使用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應(yīng)用

<!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>
	<!-- 經(jīng)典的hello world -->
    <py-script>
        print('hello world')
    </py-script>
</body>
</html>

2-4.來一個更復(fù)雜的應(yīng)用吧

<!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>
    <!-- 這里導(dǎo)入了時間的庫，然后將信息渲染到了頁面中。并有一個簡單的圓周率計算的算法 -->
    <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>