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
Logo

前往低代码交流专区

更多推荐