Eel+VUE python GUI编程
python GUI编程
Eel 是一个轻量的 Python 库，用于制作简单的类似于离线 HTML/JS GUI 应用程序，并具有对 Python 功能和库的完全访问权限。
~
Eel 托管一个本地 Web 服务器，允许您使用 Python 注释函数（annotate functions），可以从 JavaScript 调用python函数，也可以从python调用JavaScript函数。
~
VUE是一套用于构建用户界面的渐进式框架，简单的来讲就是用于web前端页面的一个框架，借助于开源的一些组件库可以快速的布局页面，web网站可以做多美观，这个也就可以做到什么程度，对于不熟悉传统网页页面布局调教的同学非常友好。相比于PYQT开发的程序，美观和可靠性方面有所提升（pyqt程序容易崩溃）
~
在这里将三者结合，vue布局好页面，python处理数据，js只需要负责修改vue的数据就可以完成页面更新渲染，非常好用。
~
下面给出一个简单的结合vue操作的案例。
文件:eel_vue.py
import eel
# Set web files folder and optionally specify which file types to check for eel.expose()
# *Default allowed_extensions are: ['.js', '.html', '.txt', '.htm', '.xhtml']
eel.init('.', allowed_extensions=['.js', '.html'])
@eel.expose # 暴露python函数给js
def python_math(now,d):
new = int(now) + int(d) # 对传入的数据做加减法处理
eel.js_vue( new ) # 调用js暴露的函数，将数值传递给vue
eel.start('eel_vue.html') # Start (this blocks and enters loop)
文件:eel_vue.html
<html>
<head>
<title>python+eel+vue!</title>
<!-- Include eel.js - note this file doesn't exist in the 'web' directory -->
<script type="text/javascript" src="/eel.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
function jiajian(d){ //定义函数，在按钮中调用
eel.python_math(vm.data1,d) //执行python暴露给js的函数，完成逻辑处理
}
eel.expose(js_vue) // 暴露js函数给python
function js_vue(d){vm.data1 = d} // js函数修改vue数据，实现页面渲染
</script>
</head>
<body>
Hello, World!
<button onclick="jiajian(1)">+1</button>
<button onclick="jiajian(-1)">-1</button>
<div id="app">
{{data1}}
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
data1:"1"
},
mounted : function() {
}
})
</script>
</body>
</html>
# 安装eel库
pip install Eel
# 存储好上面的文件，在文件根目录下使用python运行
python eel_vue.py
2147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
