本文旨在指导开发者如何在 pyscript 的 `py-repl` 环境中获取用户输入的 python 代码，以便进行保存、提交或进一步处理。主要介绍两种方法：利用 `py-repl` 元素的 `getpysrc()` 方法获取当前代码内容，以及通过 pyscript 新版插件系统提供的 `beforepyreplexec()` 和 `afterpyreplexec()` 方法捕获执行前的代码。这些技术对于构建交互式学习平台或作业提交系统至关重要。
在构建基于 PyScript 的交互式应用，特别是教育类平台时，经常需要捕获用户在 py-repl（Python Read-Eval-Print Loop）界面中输入的代码。例如，学生完成编程作业后，教师可能需要获取其编写的代码进行评分或存档。本文将详细介绍两种有效的方法来实现这一目标。
方法一：使用 py-repl 元素的 getPySrc() 方法
py-repl 元素提供了一个内部方法 getPySrc()，可以直接获取当前 REPL 中所有已输入的 Python 代码内容。尽管这在当前被视为一个实现细节而非官方API，但它在实践中表现稳定，并已被社区广泛使用，未来有望转正为官方功能。
工作原理： 当用户在 py-repl 中输入代码并执行后，这些代码会累积在 REPL 会话中。getPySrc() 方法能够返回一个字符串，其中包含用户在 REPL 界面中键入的所有有效 Python 语句。
实现步骤：
-
在 HTML 中定义 py-repl 元素： 首先，确保你的 HTML 页面中包含一个 py-repl 元素，并为其指定一个 ID，以便通过 JavaScript 访问。
<py-repl id="my-repl" auto-create></py-repl> <button onclick="saveReplContent()">保存代码</button> <pre class="brush:php;toolbar:false;" id="output-area">
-
通过 JavaScript 调用 getPySrc()： 编写一个 JavaScript 函数，通过 document.getElementById() 获取 py-repl 元素，然后调用其 getPySrc() 方法。
<script type="text/javascript"> async function saveReplContent() { const replElement = document.getElementById('my-repl'); if (replElement && typeof replElement.getPySrc === 'function') { const codeContent = replElement.getPySrc(); console.log("REPL 会话内容：", codeContent); // 示例：将内容显示在页面上 document.getElementById('output-area').textContent = codeContent; // 在实际应用中，你可以在这里将 codeContent 发送到后端、保存到本地文件或集成到其他服务 alert("代码已获取！请查看控制台或页面输出。"); } else { console.error("无法找到 py-repl 元素或 getPySrc() 方法不可用。"); } } </script>
注意事项：
- getPySrc() 返回的是整个 REPL 会话中所有已执行或待执行的代码，而不是单个单元格的代码。
- 由于其非官方API的性质，虽然稳定，但在未来的 PyScript 版本中其行为或可用性可能会有细微变化。
方法二：利用 PyScript 插件系统（适用于新版本 PyScript）
PyScript 的新版本（例如 Release Candidate 2 及更高版本）引入了强大的插件系统，允许开发者在 REPL 代码执行的不同阶段插入自定义逻辑。其中，beforePyReplExec() 和 afterPyReplExec() 插件方法为捕获 REPL 单元格代码提供了更细粒度的控制。
工作原理： 这些插件方法在 REPL 中的 Python 代码执行之前和之后被调用。它们接收一个包含 src 参数的对象，该参数即为即将或刚刚执行的 Python 代码。通过这些钩子，你可以跟踪每个 REPL 单元格的执行内容。
实现步骤（概念性）：
-
创建 PyScript 插件： 你需要定义一个 PyScript 插件，并在其中实现 beforePyReplExec() 或 afterPyReplExec() 方法。
# my_repl_tracker.py from pyscript import document class ReplTracker: def __init__(self): self.executed_code_history = [] def beforePyReplExec(self, payload): # payload.src 包含即将执行的代码 print(f"即将执行的代码: {payload.src}") # 你可以在这里存储代码，例如： # self.executed_code_history.append(payload.src) def afterPyReplExec(self, payload): # payload.src 包含刚刚执行的代码 print(f"已执行的代码: {payload.src}") self.executed_code_history.append(payload.src) # 假设有一个 HTML 元素来显示历史 output_div = document.getElementById("repl-history") if output_div: output_div.innerHTML = "<pre class="brush:php;toolbar:false;">" + "\n".join(self.executed_code_history) + "" # 注册插件 repl_tracker_plugin = ReplTracker() -
在 py-config 中加载插件： 在你的 HTML 文件的
部分，通过标签加载你的插件。 <head> <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" /> <script defer src="https://pyscript.net/latest/pyscript.js"></script> <py-config> plugins = ["./my_repl_tracker.py"] </py-config> </head> <body> <py-repl auto-create></py-repl> <h3>执行历史：</h3> <div id="repl-history"></div> </body>
注意事项：
- 此方法提供了更精细的控制，可以捕获每次 REPL 单元格执行的代码。
- 它依赖于 PyScript 的最新版本和插件系统。请确保你的 PyScript 环境已更新。
- 你可以根据需求选择在 beforePyReplExec() 或 afterPyReplExec() 中捕获代码。afterPyReplExec() 更适合记录已成功执行的代码。
总结
无论是通过 getPySrc() 方法快速获取整个 REPL 会话内容，还是利用 PyScript 插件系统精确追踪每次单元格执行的代码，这两种方法都为开发者提供了捕获用户输入代码的有效途径。选择哪种方法取决于你的具体需求：如果需要简单地获取所有代码，getPySrc() 更加直接；如果需要更细粒度的控制，例如记录每个执行步骤或处理每个代码块，那么插件系统则提供了更强大的扩展性。在实际应用中，你可以将获取到的代码内容进一步发送到后端服务器、保存为文件（如 Google Drive 中的文本文件）或用于其他自动化流程。
