为您的 python 应用程序 Eel 创建一个现代 GUI 安装 eel 如何使用它？

2025-06-09

为你的 Python 应用程序创建一个现代 GUI

鳗鱼

安装鳗鱼

如何使用它？

在这篇文章中，我们将使用一个库，它将允许我们为日常的 Python 脚本创建出色的图形用户界面 (GUI)。

我们有很多基于 Python 创建 GUI 的选项，例如 tkinter、wxPython、PySimpleGui 等等。Tkinter 非常强大，允许我们创建跨平台应用程序，然而，基于 Tkinter 的 GUI 不如我们常见的 Web 应用程序和其他基于 Electron 的优秀应用程序那样美观。

Eel 是一个库，它允许我们利用 Web 技术，例如 HTML、CSS、JS，当然还有各种 Web 框架，如 bootstrap、jquery、很酷的绘图库（如 plotly）等。

鳗鱼

Eel 库让我们能够轻松地使用 HTML、CSS 和 JS 来构建用户界面，同时又不失强大的 Python 功能。Eel 依赖于一系列 Python 库，它只需创建一个本地 Web 服务器并打开一个浏览器（默认使用 Chrome），浏览器会渲染 HTML、CSS 和 JS，而 Python 则负责控制大部分逻辑。

Eel 很酷的一点是，它允许我们从 javascript 运行 python 函数，反之亦然，因此，我们可以交换信息并同时享受两全其美的优势（python 和 JS）。

安装鳗鱼

为了安装 eel 库，您可以从 Pypi 执行以下操作：



pip install eel
Enter fullscreen mode Exit fullscreen mode

强烈建议首先创建一个虚拟环境。

如何使用它？

我们必须先创建文件夹结构，根文件夹是“application”。在里面，我们将创建 Python 脚本，我将其命名为 app.py。

为了更好地组织我们的代码，我们创建了一个名为“web”的子文件夹，其中包含 index.html 文件，以及两个用于存放 css 和 js 文件的子文件夹。



application
│   app.py
│
└───web
    │   index.html
    │
    ├───css
    │       main.css
    │
    └───js
            main.js
Enter fullscreen mode Exit fullscreen mode

在本文中，我们将使用W3schools提供的预构建代码，为桌面应用程序构建一个类似文件菜单的顶部菜单。首先，我们必须编辑 html 文件：



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eel example</title>

    <link rel="stylesheet" href="css/main.css">
    <script type="text/javascript" src="/eel.js"></script> 
</head>
<body>
    <div class="topnav">
        <a class="active" id="button-name">Display name</a>
        <a id="button-number">Display a random number</a>
        <a id="button-date">Display time and date</a>
        <a id="button-ip">Display my ip</a>
      </div> 
</body>
<script src="js/main.js"></script>
</html>
Enter fullscreen mode Exit fullscreen mode

正如您所看到的，您将能够使用 HTML 创建整个 GUI，我们只需添加<script type="text/javascript" src="/eel.js"></script>，该脚本将允许我们调用我们公开的 python 函数。

对于 CSS 文件：



/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
  }

  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }

  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }

  /* Add a color to the active/current link */
  /* .topnav a.active {
    background-color: #4CAF50;
    color: white;
  } */
Enter fullscreen mode Exit fullscreen mode

最后，对于 JS 文件，我们只需为导航栏中的四个按钮添加事件监听器即可。如您所见，它们都调用了一些函数，但都以 eel 开头，例如 ell.get_random_name()，这是一个 Python 函数，因此，当我们点击按钮时，它会调用一个 Python 函数。此外，我们还有一个名为 prompt_alerts 的 JS 函数，它有一个装饰器 eel.expose，这允许我们从 Python 运行这个 JS 函数：



document.getElementById("button-name").addEventListener("click", ()=>{eel.get_random_name()}, false);
document.getElementById("button-number").addEventListener("click", ()=>{eel.get_random_number()}, false);
document.getElementById("button-date").addEventListener("click", ()=>{eel.get_date()}, false);
document.getElementById("button-ip").addEventListener("click", ()=>{eel.get_ip()}, false);

eel.expose(prompt_alerts);
function prompt_alerts(description) {
  alert(description);
}
Enter fullscreen mode Exit fullscreen mode

我们已经完成了图形用户界面，现在，我们必须创建 Python 文件。我们必须导入 Eel 库以及项目所需的所有其他库，在本例中是 Random 库和 DateTime 库。



import eel
import random
from datetime import datetime

eel.init('web')

@eel.expose
def get_random_name():
    eel.prompt_alerts('Random name')

@eel.expose
def get_random_number():
    eel.prompt_alerts(random.randint(1, 100))

@eel.expose
def get_date():
    eel.prompt_alerts(datetime.now().strftime("%d/%m/%Y %H:%M:%S"))

@eel.expose
def get_ip():
    eel.prompt_alerts('127.0.0.1')

eel.start('index.html')
Enter fullscreen mode Exit fullscreen mode

然后，我们必须将 eel.init 代码行（用于初始化 Eel 库）添加到特定文件夹。然后，我们创建四个函数，这些函数我们希望从 JS 调用，因此我们添加了 decorator @eel.expose。如您所见，每个函数都调用我们的 JS 函数prompt_alerts并传递一个字符串参数。

eel.start将运行应用程序，有很多参数可以传递，在这个例子中，我们使用最少的参数，我们只是设置要呈现的 html 文件（相对于 web 文件夹）。

现在我们已经完成了代码，我们可以启动我们的应用程序了：


 app.py
Enter fullscreen mode Exit fullscreen mode

应该会出现一个新窗口，如下图所示：
使用 eel 库的 Python GUI

如果您单击四个按钮中的任何一个，都会显示警报，例如：
警报示例

现在，您可以为您的 Python 应用程序创建出色的 GUI，在我们的下一个系列中，我们将创建一个复杂的示例并探索可以传递给 eel.start 的其他参数。

鏂囩珷鏉ユ簮锛�https://dev.to/kodark/creating-a-modern-gui-for-your-python-application-2mlp
Devto 翻译
PREV
📖 通过示例了解 Go Fiber：Fiber Web 框架如何发挥作用？
NEXT
React 风格指南合集