Eel+VUE python GUI编程

python GUI 编程之 Eel+VUE

HuHailong12138

2656人浏览 · 2022-01-23 21:59:29

HuHailong12138 · 2022-01-23 21:59:29 发布

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)

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^