【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 documentdef translate_english(event):input_text = document.querySelector("#english")english = input_text.valueoutput_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/
