含有简单代码示例的Pyscript教程

尼耳多
2,203 阅读4分钟

Pyscript由Anaconda团队开发，是一个在HTML中穿插使用Python的系统。这意味着你可以在HTML中编写和运行Python代码，使用pyscript调用javascript库，并使用Python进行任何网络开发。

Pyscript现在是基于pyodide，一个 "CPython到网络汇编/Emscripten的移植 "项目。Pyscript允许你在浏览器中编写和运行Python代码。

在这篇文章中，我们将介绍pyscript 的基础知识，并了解pyscipt 的用途。让我们直接进入。

Pyscript最重要的特点

  • 它使我们能够将python代码集成到我们的HTML文档中。
  • 我们不需要为部署而烦恼，因为我们使用的是pyscript。一切都是通过网络浏览器完成的。我们可以与任何人交换包含复杂的仪表盘或任何字符数据的HTML文件。
  • Pyscript包括三个主要部分：py-env、py-script和py-repl。我们将详细介绍这些主要部分。

安装和设置

Pyscript的安装和配置非常简单。就像用HTML来引用它一样简单。

要配置pyscript，你需要把下面两行代码放在你的HTML代码的部分里面。

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

在该部分里面，你可以使用标签，在标签里面写你的Python代码。

Pyscript中的Hello World程序

让我们用pyscript写一个HTML代码的例子。

index.html

<html>
    <head>
        <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
        <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
        <title>My First Page</title>
    </head>
    <body>
        <py-script> print ('Hello World') </py-script>
    </body>
</html>

输出。

pyscript hello world

标签允许你在你的HTML模板中直接使用Python代码。你可以在HTML文件中运行任何你想要的Python代码。Pyscript 允许你使用你想要的一切，包括类和函数。你只需像通常那样对它们进行编排。

**注意：**如果你试图在里面缩进你的代码，浏览器会产生一个意外的缩进错误，我们不想处理这个问题。所以不应该有缩进。

在实时服务器上运行你的代码

  • 如果你正在使用VScode编辑器，你可以利用实时服务器插件，在你对HTML文件进行修改时重新加载页面。
  • 按CTRL + shift + x或点击扩展标签。搜索 "Live Server by Ritwick Dey "并安装它。
  • 然后右键单击index.html文件，选择*"用Live Server打开 "*选项。
  • 现在你的index.html文件将在你的默认浏览器上实时运行。

running pyscript code on a live server

使用src属性的Pyscript

如果你有一个复杂的Python脚本，或者选择不直接在标签里写Python代码，你可以利用一个Python文件作为源代码，如下所示。

index.html

<html>
    <head>
        <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
        <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
        <title>My First Page</title>
    </head>
    <body>
        <py-script src="./demo.py"> </py-script>
    </body>
</html>

demo.py

import random
lucky = random.randint(1, 12)
print('Hello my lucky number is '+str(lucky))

输出。

注意：如果你试图使用 src 属性导入一个 Python 文件，请确保你在本地服务器上运行 index.html，因为如果你把它作为一个文件打开，浏览器会抛出一个 CORS 策略错误。

使用 Python 环境工作

你可以导入内置的 Python 库，但是像 numpy 和 pandas 这样的外部库呢？你可以简单地利用外部库，并将它们包裹在标签中。

index.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-env>
    - numpy
    - pandas
    </py-env>
    <py-script>
    import numpy as np
    import pandas as pd
    x = pd.Series([1,2,3,4,5,6,7,8,9,10])
    print([i**2 for i in x])
    </py-script>
</body>
</html>

输出。

交互式嵌入式外壳

标签包括一个 REPL 组件，它可以作为一个代码编辑器使用，并允许你在线编写可执行代码。

index.html

<html>
    <head>
        <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
        <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
        <style>
        h1{
        display: flex;
        justify-content: center;
        align-items: center;
        }
        </style>
    </head>
<body>
    <py-env>
    - numpy
    - pandas
    </py-env>
    <h1>Interactive shell</h1>
    <py-repl id="my-repl" auto-generate=true> </py-repl>
</body>
</html>

输出。

用Pyscript渲染Bokeh Plot

让我们做一个图来显示一个月内卖出了多少蔬菜。

index.html

<html>
    <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" href="https://pyscript.net/alpha/pyscript.css" />
        <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
        <script type="text/javascript"
        src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.min.js"></script>
        <script type="text/javascript"
        src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.2.min.js"></script>
        <script type="text/javascript"
        src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
        <script type="text/javascript"
        src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
        <script type="text/javascript"
        src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.2.min.js"></script>
        <title>Chart Example</title>
        <title>Chart Example</title>
        <py-env>
        - bokeh
        - numpy
        - pandas
        </py-env>
    </head>
<body>
    <h2>Bokeh Chart</h2>
    <div id="chart"></div>
    <py-script>
    import json
    import pyodide
    from js import Bokeh, console, JSON
    from bokeh.embed import json_item
    from bokeh.plotting import figure
    from bokeh.resources import CDN
    vegetables = ['Carrot', 'Onion', 'Potato', 'Cabbage', 'garlic']
    values = [15, 23, 34, 14, 12]
    pl = figure(x_range=vegetables, height=350, title="Vegetables Counts",
    toolbar_location=None, tools="")
    pl.vbar(x=vegetables, top=values, width=0.9)
    pl.xgrid.grid_line_color = None
    pl.y_range.start = 0
    p_json = json.dumps(json_item(pl, "chart"))
    Bokeh.embed.embed_item(JSON.parse(p_json))
    </py-script>
</body>
</html>

输出。

Rendering Bokeh Plot With Pyscript

我们可以使用HTML文件轻松构建一个图表。显示这样的图表不需要复杂的组件。这就是使用Pyscript在HTML中运行Python是多么简单。

使用 Python 访问 HTML DOM 来处理事件

在PyScript中，访问DOM就像在Javascript中一样简单。你只需要利用JS库中的文档。同样值得注意的是，导入库并不是真的需要，因为它们已经在那里了。

index.html

<html>
    <head>
        <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
        <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
        <style>
            h1{
            display: flex;
            justify-content: center;
            align-items: center;
            }
            div{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 100px;
            }
            button{
            background-color: Black;
            color: white;
            border-radius: 5px;
            }
        </style>
    </head>
    <body>
        <h1>PyScript Events</h1>
        <div>
        <button id="change_me"> Press me ! </button>
        </div>
        <py-script>
        import pyodide
        def on_click(e):
        e.target.innerHTML = "Tada !!! you pressed me !."
        change_me_element = document.getElementById('change_me')
        change_me_element.addEventListener('click', pyodide.create_proxy(on_click))
        </py-script>
    </body>
</html>

输出。

一旦你按下按钮，里面的文字就会改变。

最后的思考

Pyscript对于Python编码者来说似乎有很大的希望。然而，可能会有很多安全问题。我们还在浏览器中使用Python库，这需要很长的时间来执行。但这项技术的未来看起来很有希望。让我们希望pyscript在未来几年有更多的功能和改进。

我希望你觉得这篇文章有用。编码愉快

avatar
文章
阅读
粉丝