PyScript 入门教程 2022 - 在 HTML 中使用 Python 构建 Web 应用程序

Mangs

1089人浏览 · 2022-08-16 20:10:55

Mangs · 2022-08-16 20:10:55 发布

什么是 PyScript?

https://www.youtube.com/watch?vu003du0T-LN2UnfY

对于所有渴望在浏览器中使用 Python 以及 HTML 和 CSS 的 Python 爱好者来说,PyScript 让这成为可能。 PyScript 是一个使用 JavaScript 构建的框架,它允许用户使用 HTML 界面直接在浏览器中创建 python 应用程序。它使用 Pyodide、WASM 和现代 Web 技术来创建丰富的应用程序。

最重要的是,由于 PyScript 是用 javaScript 构建的,因此 Python 和 Javascript 对象和命名空间之间存在双向通信。

PyScript 语法很容易被不同背景的程序员理解。

将 PyScript 添加到 HTML。

将 PyScript 添加到您的 HTML 文件实际上非常简单,您可以前往 PyScript 官方网站pyscript.net下载 PyScript 文件或复制资产的链接。

您有两个使用 PyScript 的选项,首先,您可以将 PyScript 资产下载到本地计算机并将它们链接到您的 HTML 页面,或者您可以使用官方网站提供的资产。

实际上,您可以选择任何一种方法,它们都引用相同的文件。

在本文中,我们将使用官方网站提供的资产。您可以复制以下代码并将其添加到您的 HTML 页面。

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

将 Hello world 打印到浏览器

在我们开始编写代码之前,让我们确保我们的环境已经设置好,最好是 PyScripts 的创建者警告它处于 alpha 阶段并且目前正在大量开发中,因此不建议将其用于生产。您还应该使用 Chrome 浏览器来开发您的应用程序。

我将使用 VS Code 作为我的代码编辑器,您可以使用您选择的任何代码编辑器。我将使用 Live-Sever VS Code 扩展,从本地服务器提供我的 HTML 页面,因为 PyScripts 创建者建议这样做,而且我希望页面在我对代码进行更改后重新加载。因此,如果您已准备好所有内容,请打开编辑器并创建一个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> 
 </body>
</html>

我知道你一定有这样的问题,“我们到底在哪里编写 python 代码”?好吧,让我回答一下,PyScript 有一个自己的特殊标签,即<py-script></py-script>。

在py-script标签的打开和关闭之间,您可以编写您的 python 代码,一旦 HTML 页面被渲染,它将被执行。

让我们按照传统,打印一个“Hello, World!”。将您的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-script> print('Hello, World!') </py-script> </body>
</html>

如果您像我一样使用 VS Code 并且安装了 Live-Server 扩展,请右键单击 HTML 代码主体以显示上下文菜单,然后单击Open with live server。

截图 (164).png

这将自动打开您的默认浏览器,如果您的默认浏览器不是 Chrome,请复制服务器 URL 并使用 Chrome 打开它。

但是如果你没有使用 VS Code 或者没有安装 live-server 扩展,但是碰巧安装了 python 软件,你可以使用 pythonhttp.server来提供你的 HTML 文件,方法是在你的终端中打开目录并输入这个,python -m http.server [port]。确保将 [port] 替换为您希望它运行的端口号,例如python -m http.server 5500。

我们已经使用 PyScript 成功地将Hello, World!打印到我们的 HTML 页面,但它并不止于此,我们还可以做更多。

我们可以使用 PyScript 操作 DOM,并使用 python 语法和许多流行的 Python 包以及 NumPy、pandas、scikit-learn 等科学堆栈来执行我们通常使用 javaScript 执行的各种操作。

让我们使用 PyScript 更新特定元素的内容。

在py-script标签之前添加这个,在body标签内:

<b>
<p>
Today is <u><label id="today"></label></u>
</p>
</b>

我们有一个 id 为today的label,我们想使用 PyScript 将label的 innerText 更新为当前日期。

让我们更新 PyScript 以导入 datetime 模块并写入label元素。

<py-script>
      import datetime as dt 
      pyscript.write('today', dt.date.today().strftime('%A %B %d, %Y'))
</py-script>

注:

您可能会遇到一个问题,例如 VS 代码将 PyScript 标记之间的代码格式化为一行,并且当您尝试在浏览器中运行它时会引发错误。要解决此问题,请在 VS 代码中转到preferences并选择settings,或者如果您在 Windows 上,则可以按ctrl + ,。在设置搜索栏上输入format,您将看到两个选项,即Format On Save和Format On Paste,如果选中这两个选项,则取消选中它们。 VS 代码将停止将您的 PyScript 代码格式化为一行。

或者,您可以选择安装 PyScript VS Code 扩展。

PyScript write 方法接受两个参数,第一个是元素的标识符,第二个是要写入该元素的文本。

我们的最终代码将如下所示:

<html>
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
    <b
      ><p>
        Today is <u><label id="today"></label></u></p
    ></b>

    <py-script>
      import datetime as dt 
      pyscript.write('today', dt.date.today().strftime('%A %B %d, %Y'))
    </py-script>
  </body>
</html>

当您打开 Web 浏览器时,您将看到类似于以下内容的页面:

将第 3 方 Python 包添加到您的 PyScript 应用程序。

您还可以使用<py-env></py-env>标签轻松地将 3rd 方包添加到您的 PyScript 应用程序。

在连字符后指定包名称的位置。例子:

<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
      </py-env>
</head>

py-env标记应添加到head标记中,每个包名称前加上一个连字符。这些包可以直接在py-script标签中导入和使用。

将本地 python 模块添加到 PyScript 应用程序。

要将 python 模块或文件添加到 PyScript 应用程序,您必须在py-env标记中提供文件的路径,但还要在其前面加上一个连字符。但是在我们提供文件的路径之前,我们需要指定并告诉 PyScript 它是文件的路径,而不是另一个 3rd 方包,方法是添加- paths:,然后在下一行写入模块路径之前给出缩进.

例如,假设我们在与我们的 HTML 文件相同的目录中有一个hello.py文件,并且我们想将hello.py添加到我们的 HTML 文件中,我们这样做。

<head>
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
      <py-env>
       - paths:
            - ./hello.py
      </py-env>
</head>

如果hello.py包含:

def sayHello():
   return 'Hello, PyScript!';

我们可以像这样使用sayHello函数;

<body>
    <py-script>
      from hello import sayHello
      print(sayHello())
    </py-script>
</body>

当你打开浏览器时,你会看到“Hello, PyScript!”打印到您的页面。

`py-repl`标签

如您所见,PyScript 有许多自定义标签,每个标签都有特定用途,那么py-repl标签是什么,它的用途是什么?

它实际上是我在 PyScript 中看到的最酷的东西之一,py-repl标签创建了一个 Python REPLread-evaluate–print-loop,它就像一个交互式环境,您可以在其中编写 Python 代码并执行它。它读取您的 python 代码,对其进行评估并打印结果,然后返回到第一步。

让我们在 HTML 页面中实现py-repl标签。在body标签之间,写下:

<py-repl></py-repl>

当您打开浏览器时,您将看到一个代码编辑器,您可以在其中实际编写和执行代码。

实际上,这就是 PyScript 入门的全部内容,您可以看到 PyScript 实际上很简单。 Web 开发人员和 Python 开发人员可以轻松理解 PyScript。

它为我们提供了浏览器的强大功能和 Python 编程语言的简单性,所以想象一下您可以使用 PyScript 构建的令人敬畏的东西。

向您推荐>>百度飞桨AI Studio社区

学AI，认准AI Studio！GPU算力，限时免费领，邀请好友解锁更多惊喜福利 >>>

更多推荐

求助！为什么用InsCode部署会出现无限重定向？

Python

如何重塑熊猫。系列

问题:如何重塑熊猫。系列在我看来,它就像 pandas.Series 中的一个错误。 a = pd.Series([1,2,3,4]) b = a.reshape(2,2) b b 有类型 Series 但无法显示,最后一条语句给出异常,非常冗长,最后一行是“TypeError: %d format: a number is required, not numpy.ndarray”。 b.sha

Python

在哪里可以找到有关 Keras 中默认权重初始化器的文档? [复制]

问题:在哪里可以找到有关 Keras 中默认权重初始化器的文档? [复制] 我刚刚在这里](https://keras.io/initializers/)中阅读了有关[中的 Keras 权重初始化器的信息。在文档中,只介绍了不同的初始化程序。如: model.add(Dense(64, kernel_initializer='random_normal')) 当我没有指定kernel_initia