在 python 中用 Web 方式创建漂亮的图形用户界面(GUI)
off999 2024-12-08 17:32 18 浏览 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 制作功能丰富、漂亮的图形用户界面。
?
文章创作不易，如果您喜欢这篇文章，请关注、点赞并分享给朋友。如有意见和建议，请在评论中反馈。
?
相关推荐
- 独家 | 5 个Python高级特性让你在不知不觉中成为Python高手
-
你已经使用Python编程了一段时间，编写脚本并解决各种问题。是你的水平出色吗？你可能只是在不知不觉中利用了Python的高级特性。从闭包（closure）到上下文管理器（contextmana...
- Python装饰器
-
Python装饰器是一种用于修改函数或类的行为的特殊语法。它们允许在不修改原始代码的情况下，通过将函数或类作为参数传递给另一个函数来添加额外的功能。装饰器本质上是一个函数，它接受一个函数作为参数，并返...
- 中高阶Python常规用法--上下文管理器
-
Python以简单性和通用性著称，是一种深受全球开发人员喜爱的编程语言。它提供了大量的特性和功能，使编码成为一种愉快的体验。在这些功能中，一个经常被新手忽视的强大工具是上下文管理器。上下文管理器是高...
- Python小案例67- 装饰器
-
Python装饰器是一种用于修改函数或类的行为的特殊语法。它们允许在不修改原始代码的情况下，通过将函数或类作为参数传递给另一个函数来添加额外的功能。装饰器本质上是一个函数，它接受一个函数作为参数，并返...
- python常用的语法糖
-
概念Python的语法糖（SyntacticSugar）是指那些让代码更简洁、更易读的语法特性，它们本质上并不会增加新功能，但能让开发者更高效地编写代码。推导式写法推导式是Python最经典的...
- python - 常用的装饰器 decorator 有哪些?
-
python编程中使用装饰器(decorator)工具，可以使代码更简洁清晰，提高代码的重用性，还可以为代码维护提供方便。对于python初学者来说，根据装饰器(decorator)的字面意思并不...
- python数据缓存怎么搞 ?推荐一个三方包供你参考，非常简单好用。
-
1.数据缓存说明数据缓存可以说也是项目开发中比不可少的一个工具，像我们测试的系统中，你都会见到像Redis一样的数据缓存库。使用缓存数据库的好处不言而喻，那就是效率高，简单数据直接放在缓存中...
- 用于时间序列数据的Graphite监视工具
-
结合第三方工具，Graphite为IT性能监控提供了许多好处。本文介绍其核心组件，包括Carbon、Whisper以及安装的基本准则。Graphite监视工具可实时或按需，大规模地绘制来自多个来源的时...
- Python3+pygame实现的坦克大战
-
一、显示效果二、代码1.说明几乎所有pygame游戏，基本都遵循一定的开发流程，大体如下：初始化pygame创建窗口while循环检测以及处理事件（鼠标点击、按键等）更新UI界面2.代码创建一个m...
- Python之鸭子类型:一次搞懂with与上下文装饰器
-
引言在鸭子类型的理念的基础之上，从关注类型，转变到关注特性和行为。结合Python中的魔法函数的体系，我们可以将自定义的类型，像内置类型一样被使用。今天这篇文章中，接着该话题，继续聊一下with语法块...
- Python必会的50个代码操作
-
学习Python时，掌握一些常用的程序操作非常重要。以下是50个Python必会的程序操作，主要包括基础语法、数据结构、函数和文件操作等。1.HelloWorldprint("Hello,...
- 一文掌握Python 中的同步和异步
-
同步代码（Sync）同步就像在一个流水线上工作，每个任务都等待前一个任务完成。示例：机器A切割钢板→完成后，机器B钻孔→完成后，机器C上色。在Python中，同步代码看起来像这样：im...
- python 标注模块timeit: 测试函数的运行时间
-
在Python中，可以使用内置的timeit模块来测试函数的运行时间。timeit模块提供了一个简单的接口来测量小段代码的执行时间。以下是使用timeit测试函数运行时间的一般步骤：导入...
- Python带你找回童年的万花尺
-
还记得小时候的万花尺吧？这么画：一点也不费脑筋，就可以出来这么多丰富多彩的复杂几何图形。具体而言，可以用万花尺玩具（如图2-1所示）来绘制数学曲线。这种玩具由两个不同尺寸的塑料齿轮组成，一大一小。小的...
- Python 时间模块深度解析:从基础到高级的全面指南
-
直接上干货一、时间模块核心类介绍序号类名说明1datetime.datetime表示一个具体的日期和时间，结合了日期和时间的信息。2datetime.date表示一个具体的日期。3datetime.t...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- python计时 (54)
- python安装路径 (54)
- python类型转换 (75)
- python进度条 (54)
- python的for循环 (56)
- python串口编程 (60)
- python写入txt (51)
- python读取文件夹下所有文件 (59)
- java调用python脚本 (56)
- python操作mysql数据库 (66)
- python字典增加键值对 (53)
- python获取列表的长度 (64)
- python接口 (63)
- python调用函数 (57)
- python qt (52)
- python人脸识别 (54)
- python斐波那契数列 (51)
- python多态 (60)
- python命令行参数 (53)
- python匿名函数 (59)
- python打印九九乘法表 (65)
- centos7安装python (53)
- python赋值 (62)
- python异常 (69)
- python元祖 (57)