Eel+VUE python GUI编程_python vue gui

作者：从前慢现在也慢 | 2024-05-24 00:22:55

踩

python vue gui

Eel+VUE python GUI编程

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)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

文件: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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

# 安装eel库
pip install Eel
# 存储好上面的文件，在文件根目录下使用python运行
python eel_vue.py
1
2
3
4

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/614985