【PyScript】PyScript 基础入门

最新推荐文章于 2024-08-13 08:44:54 发布

南歌EuanSu

最新推荐文章于 2024-08-13 08:44:54 发布

阅读量857

点赞数 7

分类专栏： Python 文章标签： python 前端

本文链接：https://blog.csdn.net/suu_an/article/details/140009547

版权

Python 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

【PyScript】PyScript 基础入门

PyScript 是一个为了支持 Python 运行在浏览器的开源平台。

1.`PyScript` 应用程序的创建

PyScript 程序需要以下三个内容

一个提供给浏览器的 index.html 文件。
PyScript 的运行环境描述，通常是一个 pyscript.json 或 pyscript.toml 文件。
PyScirpt 应用运行的 Python 代码，通常是一个名为 main.py 的文件。

以下是 PyScirpt 的一个官方示例，将英语翻译成海盗的话，使用了 arrr 库。

在这里插入图片描述

1.1 `PyScript` 运行环境描述

这个文件告诉 PyScript 和浏览器应用的各种配置，也即 PyScript 应用程序运行所需的内容，这个示例中只需要第三方库 arrr 来进行翻译。

# pyscript.json
{
    "packages": ["arrr"]
}

1.2 `HTML` 文件

这里直接引用了 pyscirpt 的在线 js 文件，因此在运行 PyScipt 应用的时候，并不需要额外安装第三方库。

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width,initial-scale=1" />
      <title>🦜 Polyglot - Piratical PyScript</title>
      <link rel="stylesheet" href="https://pyscript.net/releases/2024.6.2/core.css">
      <script type="module" src="https://pyscript.net/releases/2024.6.2/core.js"></script>
  </head>
  <body>
    <h1>Polyglot 🦜 💬 🇬🇧 ➡️ 🏴‍☠️</h1>
    <p>Translate English into Pirate speak...</p>
    <input type="text" id="english" placeholder="Type English here..." />
    <button py-click="translate_english">Translate</button>
    <div id="output"></div>
    <script type="py" src="./main.py" config="./pyscript.json"></script>
  </body>
</html>

1.3 `PyScript` 的 `Python` 代码

这里是 PyScirpt 的核心代码，提供了 HTML 调用的方法，translate_english 接收到事件后，获取页面的内容后，调用 arr.translate 后将结果绑定到 HTML 的页面元素。

import arrr
from pyscript import document


def translate_english(event):
    input_text = document.querySelector("#english")
    english = input_text.value
    output_div = document.querySelector("#output")
    output_div.innerText = arrr.translate(english)

1.4 `PyScirpt` 本地运行

如果要在本地运行 PyScript 使用如下命令即可在浏览器中访问 PyScript 页面

python3 -m http.server

在这里插入图片描述

2.`PyScirpt` 项目部署

这里使用 Nginx 部署 PyScript 项目，PyScript 本质上是一个前端项目，因此只需要使用 Nginx 代理路径即可，Nginx 的配置内容如下所示：

server {
    listen 8888;
    server_name localhost;

    location / {
        root /www/pyscript;
    }
}

页面访问主机的 8888 端口，即可看到 PyScript 的页面，能够正常提供功能。

在这里插入图片描述

3.相关链接

[1] PyScript官方文档 https://pyscript.net/

[2] PyScript代码示例 https://pyscript.com/@examples

[3] PyScirpt代码示例 https://docs.pyscript.net/2024.6.2/examples/

南歌EuanSu

关注

7
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

【PyScript】PyScript 基础入门

【PyScript】PyScript 基础入门

1.PyScript 应用程序的创建

1.1 PyScript 运行环境描述

1.2 HTML 文件

1.3 PyScript 的 Python 代码

1.4 PyScirpt 本地运行

2.PyScirpt 项目部署

3.相关链接

1.`PyScript` 应用程序的创建

1.1 `PyScript` 运行环境描述

1.2 `HTML` 文件

1.3 `PyScript` 的 `Python` 代码

1.4 `PyScirpt` 本地运行

2.`PyScirpt` 项目部署