百度360必应搜狗淘宝本站头条
mysql distinctjenkins官网mysql 子查询vba splitpython list sort
当前位置：网站首页 > IT技术 > 正文

在 python 中用 Web 方式创建漂亮的图形用户界面(GUI)

wptr33 2025-05-08 21:36 3 浏览

在本文中，我们将使用一个特殊的库 eel，为 python 脚本创建出色的图形用户界面 （GUI）。创建图形用户界面，有很多库可以选择，如 tkinter、wxPython 等。eel 是一个允许我们利用 Web 技术，如 HTML、CSS、JS，来构建更漂亮、更现代的用户界面。

更令人兴奋的是，eel 允许我们从 javascript 运行 python 函数，反之亦然，因此，我们可以将 python 和 javascript 完美的结合在一起。

安装 eel

pip install eel

使用 eel

使用 eel 创建图形用户界面，你至少要准备两个文件，一个 Python 脚本文件，一个 Html 网页文件。

文件内容及结构如下所示：

|--app.py       <-- Python 主程序文件
|--web          <-- web 文件夹
   |--index.html    <-- web文件夹下的html文件

# app.py 文件
import eel
eel.init('web')    # 初始化web文件夹
eel.start('index.html')  # 启动页面

<!- index.html 文件 ->
<!DOCTYPE html>
<html lang="en">
  <head>
 <meta charset="UTF-8">
 <title>APP标题</title>
 <script type="text/javascript" src="/eel.js"></script>
  </head>
  <body>
 APP正文
  </body>
</html>

特别注意，Html 文件中要引入 eel.js，不用管实际的JS脚本文件具体放在哪个路径。

<script type="text/javascript" src="/eel.js"></script>

运行 app.py 文件前，请安装谷歌浏览器（Google Chrome），eel 可以和谷歌浏览器完美结合。

深入 eel

以上示例只实现了一个空白的窗口，我们尝试复杂一点的应用实现某种功能，添加按钮，定义函数，美化 Html。

文件结构：

|--app.py       <-- Python 主程序文件
|--web          <-- web 文件夹
   |--index.html    <-- web文件夹下的html文件
   |--css        <-- css 文件夹
      |--main.css    <-- css文件夹下的的样式文件
   |--js        <-- js 文件夹
      |--main.js    <-- js文件夹下的的脚本文件

# app.py 文件
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', size= (800,450)) #定义窗口尺寸

<!- index.html 文件 ->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Eel 示例</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">显示名字</a>
        <a id="button-number">随机数</a>
        <a id="button-date">日期时间</a>
        <a id="button-ip">显示 ip</a>
      </div> 
</body>
<script src="js/main.js"></script>
</html>

/* css 文件 */
.topnav {
    background-color: #333;
    overflow: hidden;
  }

.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }

.topnav a:hover {
    background-color: #ddd;
    color: black;
  }

/* 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);
}

运行结果：

更多 eel 功能请参考相应官方网站。eel 实际上是在本机建立一个简易 web 服务器，调用谷歌浏览器并打开相应网页（
http://localhost:8000/index.html），我们可以利用 Python、Html、JavaScript、css 制作功能丰富、漂亮的图形用户界面。

文章创作不易，如果您喜欢这篇文章，请关注、点赞并分享给朋友。如有意见和建议，请在评论中反馈。

相关推荐

在python中用于处理用户界面的方法除了Tkinter外还有哪几种?

Python是一种通用编程语言，它本身不直接提供UI（用户界面）功能，也就是说，如果你只安装了python，那恐怕只能用命令行来运行命令，那谁受得了啊。要知道linux就是因为用户界面不够强大，...

【AI大模型】:结合wxauto实现智能微信聊天机器人

文章目录...

wxPython - 布局管理简介及绝对位置布局

实战wxPython系列-009一个典型的GUI程序的窗口界面中，一般是由各种控件（或者部件）组成，这些部件一般都会按一定的布局呈现在窗口中。布局方式可以分为绝对定位布局和相对定位布局，绝对定位布局中...

wxpython入门第五步(组件)（wxpython控件大全）

Widgets在本节中，我们将介绍wxPython中的基本widgets。每个组件都会有一个小的代码示例。wxPython中有很多不同的组件，包括按钮、复选框、滑块和列表框。wx.Buttonwx....

python+kivy实现极致的跨平台跨终端开发体验

这几天查找python资料的时候，偶然发现了一个专为python打造的gui框架：kivy。这是一个很优秀的，基于python的GUI框架。可以利用Python快速编程的特点，快速编写应用程序。它可以...

Python GUI库大盘点，9款热门框架供您选择!

GUI（图形用户界面，GraphicalUserInterface）是一种允许用户通过图形元素（如图标、按钮、窗口等）与电子设备进行交互的用户界面。...

第10天 | 25天学会wxPython，事件处理

事件，就是程序在运行中发生的事儿，桌面应用软件都是事件驱动的。事件可以是用户的操作，如鼠标点击或按键按下，也可以由系统产生，如定时关机。事件会触发相应的行为，即事件函数。...

从零开始搭建HTTPS服务（如何搭建http服务）

搭建HTTPS服务的最初目的是为了开发微信小程序，因为wx.request只允许发起HTTPS请求，并且还必须和指定的域名进行网络通信。要从零开始搭建一个HTTPS的服务需要下面4...

如何将AI助手接入微信（打开ai手机助手）

Dify平台搭建好后就可以创建各种应用，如聊天助手、文本生成、Agent、工作流等，那这些AI助手我们能不能分享给朋友使用，如接入微信、企微等？工具介绍DifyOnWeCha...

python gui编程框架推荐以及介绍（python开发框架）

Python的GUI编程框架有很多，这里为您推荐几个常用且功能强大的框架：Tkinter：Tkinter是Python的标准GUI库，它是Python内置的模块，无需额外安装。它使用简单，功能较为基础...

Python 程序发送微信（python程序如何发布）

在一些日常办公场景中，需要定时自动通知指定账户的微信信息及文件，如果账户很多，可能存在遗漏的情况，借助于以下的Python程序，则可以满足要求。运行时，需保证本地微信已安装并处于登录状态。#se...

美化Python GUI界面!让你的窗口拥有Win11般的质感 | pywinstyles

1.PythonGUI外观个性化的福音在使用Python开发GUI时，我们经常会使用如Tkinter、PyQt等常见的库，然而这些库的默认界面总显得有些...普通。而如果你想让你的PythonG...

推荐10款Python图形界面(GUI)框架

图形用户界面(GUI)是用户打开应用程序或网站时的第一印象，这通常包括图标、按钮、图形、显示文本等多种视觉元素，是用户体验的重要组成部分。Python就有大量用于开发GUI的框架，下面给大家介绍10个...

开发图形界面Tkinter、wxPython、PyQt、PySide选哪一个?

　　学习Python，就不得不提一下Python的图形界面开发，如果只用命令行写程序，用户体验不太好，难以胜任复杂的人机交互场景。Python的图形界面开发库常用的有：Tkinter、wxPython...

利用Python开发App实战（如何用python开发app）

我很早之前就想开发一款app玩玩，无奈对java不够熟悉，之前也没有开发app的经验，因此一直耽搁了。最近想到尝试用python开发一款app，google搜索了一番后，发现确实有路可寻，目前也有了一...

一周热门
最近发表
标签列表
Copyright Your WebSite.Some Rights Reserved.