Python 中的 Eel

在本教程中，我们将讨论在 Python 编程语言中使用 Eel 库，以借助 HTML、CSS 和 JavaScript 为 Python 程序设计用户界面。

我们将教程分为两个部分。第一部分基于 Eel 库的基础理论。相比之下，我们在另一部分通过创建一个简单的应用程序来展示该库的实现，该应用程序接受用户输入的两个整数并返回它们的和。

理解 Python Eel 库

Eel 是 Python 编程语言中的一个小型库，它允许程序员使用 HTML 和 JavaScript 创建类似 Electron 的简单离线图形用户界面 (GUI) 应用程序，同时完全访问 Python 的功能和库。

Eel 能够托管一个本地 Web 服务器，然后允许程序员注解 Python 中的方法和函数，以便我们可以从 JavaScript 调用它们，反之亦然。此库旨在消除编写简单短小的 GUI 应用程序的麻烦。

让我们看一个描绘 Eel 概念的图。

HTML、CSS 和 JavaScript 文件存储在同一目录中，并由 Python 程序初始化。JS 文件使用 HTML 页面中的 onclick 事件激活的函数，启用 HTML 页面与 Python 之间的连接。

Eel 库的实现

下一节将介绍使用 Eel 库创建一个简单的演示应用程序。该应用程序的思路是程序从 HTML 页面接收两个数字，在 Python 中将它们相加，然后将输出显示给用户。

但在我们开始创建应用程序之前，让我们先安装 Eel 库。

我们将使用 pip 安装程序来安装所需的库。相同的语法如下所示

语法

接下来，我们将使用 Visual Studio Code 来创建此项目。我们创建了一个名为“Web_test”的文件夹。在该文件夹内，我们创建了另一个名为“myWeb”的文件夹。此文件夹将存储以下文件

1. html
2. js-file.js
3. py

对于 HTML 页面，我们将创建三个文本区域和一个按钮。让我们考虑以下代码片段。

文件：myWebpage.html

说明

在上面的代码片段中，我们创建了一个 HTML 页面，其中定义了三个具有不同 ID 的文本区域。'int1' 和 'int2' 用于获取用户输入，'res' 文本区域用于显示结果。ID 为 'sum' 的按钮在其上附加了一个在 JS 文件中定义的 onclick 函数。

现在，让我们看 JS 文件的代码片段。

文件：js-file.js

说明

在上面的代码片段中，我们定义了一个名为 summation() 的函数，该函数通过 onclick 事件激活。在函数内，我们获取了 'int1' 和 'int2' 的值，并将它们传递给将在 Python 文件中定义的 'sum' 函数。名为 call_Back() 的函数接受由名为 "sum" 的 Python 方法返回的 'output' 作为参数。此 'output' 在 ID 为 'res' 的文本区域中返回。

现在，让我们看 Python 文件的代码片段。

文件：my_sum.py

说明

在上面的代码片段中，我们导入了 eel 库，并使用 eel.init("文件夹名称") 命令初始化了应用程序，其中我们将 "myweb" 指定为文件夹名称。

然后，我们使用 eel.expose 命令，在该命令下定义了 "add" 函数，该函数将 'data_1' 与 'data_2' 相加，并将结果值作为 "output" 返回。存储在 "output" 中的值由 JS 文件中的 "call_Back" 函数获取，并放置在 HTML 网页中。

然后，我们使用 eel.start("html 文件名") 命令初始化应用程序，将文件名指定为 "myWebpage.html"。

现在让我们保存 Python 文件并使用以下语法执行它，以查看结果

语法

下图显示了设计的用户界面。

输出

说明

默认情况下，Python Eel 库使用 Google Chrome 浏览器来运行应用程序；但是，我们也可以使用 'mode' 选项来指定浏览器。除了 'mode' 之外，还有一些其他可用的应用程序选项，如 'position', 'size', 'geometry' 等，它们都包含在 eel.start() 命令中。

结论

在上述教程中，我们讨论了 Eel 库及其在 Python 中的用法。我们了解到该库可以帮助程序员创建基于 HTML 和 JavaScript 的离线应用程序。借助 Eel 库，我们可以获得 Python 的功能，包括使用 HTML 和 CSS 设计用户界面的自由。虽然根据受欢迎程度，Eel 及其主要竞争对手 Electron 相比有所不及；然而，仍有许多程序员选择 Eel 来创建简单的图形用户界面 (GUI) 应用程序。