在 python 中用 Web 方式创建漂亮的图形用户界面(GUI)
off999 2024-12-08 17:32 20 浏览 0 评论
在本文中，我们将使用一个特殊的库 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的GUI可视化工具（python 可视化工具）
-
在Python基础语法学习完成后，进一步开发应用界面时，就需要涉及到GUI了，GUI全称是图形用户界面（GraphicalUserInterface，又称图形用户接口），采用图形方式显示的计算机操...
- 教你用Python绘制谷歌浏览器的3种图标
-
前两天在浏览matplotlib官方网站时，笔者无意中看到一个挺有意思的图片，就是用matplotlib制作的火狐浏览器的logo，也就是下面这个东东（网页地址是https://matplotlib....
- 小白学Python笔记:第二章 Python安装
-
Windows操作系统的python安装：Python提供Windows、Linux/UNIX、macOS及其他操作系统的安装包版本，结合自己的使用情况，此处仅记录windows操作系统的python...
- Python程序开发之简单小程序实例(9)利用Canvas绘制图形和文字
-
Python程序开发之简单小程序实例（9）利用Canvas绘制图形和文字一、项目功能利用Tkinter组件中的Canvas绘制图形和文字。二、项目分析要在窗体中绘制图形和文字，需先导入Tkinter组...
- 一文吃透Python虚拟环境（python虚拟环境安装和配置）
-
摘要在Python开发中，虚拟环境是一种重要的工具，用于隔离不同项目的依赖关系和环境配置。本文将基于windows平台介绍四种常用的Python虚拟环境创建工具：venv、virtualenv、pip...
- 小白也可以玩的Python爬虫库，收藏一下
-
最近，微软开源了一个项目叫「playwright-python」，作为一个兴起项目，出现后受到了大家热烈的欢迎，那它到底是什么样的存在呢？今天为你介绍一下这个传说中的小白神器。Playwright是...
- python环境安装+配置教程（python安装后怎么配置环境变量）
-
安装python双击以下软件：弹出一下窗口需选择一些特定的选项默认选项不需要更改，点击next勾选以上选项，点击install进度条安装完毕即可。到以下界面，证明安装成功。接下来安装库文件返回电脑桌面...
- colorama，一个超好用的 Python 库!
-
大家好，今天为大家分享一个超好用的Python库-colorama。Github地址：https://github.com/tartley/coloramaPythoncolorama库是一...
- python制作仪表盘图（python绘制仪表盘）
-
今天教大家用pyecharts画仪表盘仪表盘(Gauge)是一种拟物化的图表，刻度表示度量，指针表示维度，指针角度表示数值。仪表盘图表就像汽车的速度表一样，有一个圆形的表盘及相应的刻度，有一个指针...
- 总结90条写Python程序的建议（python写作）
-
1.首先 建议1、理解Pythonic概念—-详见Python中的《Python之禅》 建议2、编写Pythonic代码 （1）避免不规范代码，比如只用大小写区分变量、使用容易...
- [oeasy]python0137_相加运算_python之禅_import_this_显式转化
-
变量类型相加运算回忆上次内容上次讲了是从键盘输入变量input函数可以有提示字符串需要有具体的变量接收输入的字符串输入单个变量没有问题但是输入两个变量之后一相加就非常离谱添加图片注释，不超过1...
- Python入门学习记录之一:变量（python中变量的规则）
-
写这个，主要是对自己学习python知识的一个总结，也是加深自己的印象。变量（英文：variable），也叫标识符。在python中，变量的命名规则有以下三点：>变量名只能包含字母、数字和下划线...
- 掌握Python的"魔法":特殊方法与属性完全指南
-
在Python的世界里，以双下划线开头和结尾的"魔法成员"（如__init__、__str__）是面向对象编程的核心。它们赋予开发者定制类行为的超能力，让自定义对象像内置类型一样优雅工...
- 11个Python技巧 不Pythonic 实用大于纯粹
-
虽然Python有一套强大的设计哲学（体现在“Python之禅”中），但总有一些情况需要我们“打破规则”来解决特定问题。这触及了Python哲学中一个非常核心的理念：“实用主义胜于纯粹主义”...
- Python 从入门到精通 第三课 诗意的Python之禅
-
导言：Python之禅，英文名是TheZenOfPython。最早由TimPeters在Python邮件列表中发表，它包含了影响Python编程语言设计的20条软件编写原则。它作为复活节彩蛋...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- python计时 (73)
- python安装路径 (56)
- python类型转换 (93)
- python进度条 (67)
- python吧 (67)
- python字典遍历 (54)
- python的for循环 (65)
- python格式化字符串 (61)
- python静态方法 (57)
- python列表切片 (59)
- python面向对象编程 (60)
- python 代码加密 (65)
- python串口编程 (60)
- python读取文件夹下所有文件 (59)
- java调用python脚本 (56)
- python操作mysql数据库 (66)
- python获取列表的长度 (64)
- python接口 (63)
- python调用函数 (57)
- python多态 (60)
- python匿名函数 (59)
- python打印九九乘法表 (65)
- python赋值 (62)
- python异常 (69)
- python元祖 (57)