Existem alguns casos para começar com Eel

2024-07-12

Existem alguns casos para começar com Eel

Eel é uma biblioteca Python que permite que programas Python interajam com páginas da web por meio de uma API simples. Ele usa o protocolo WebSocket para permitir a comunicação em tempo real entre o backend Python e o frontend JavaScript. A seguir está um artigo de blog sobre o uso, princípios de comunicação e cenários de uso do Eel.

Princípios básicos da enguia

imagem-20240712105805701

Os princípios básicos da Enguia podem ser divididos nos seguintes aspectos:

Comunicação WebSocket : WebSocket é um protocolo de comunicação de rede que permite estabelecer uma conexão persistente entre o navegador do usuário e o servidor. Eel utiliza WebSockets para permitir comunicação bidirecional em tempo real entre o front-end e o back-end.
back-end Python : O back-end do Eel é escrito em Python e pode executar tarefas complexas de lógica e processamento de dados. O código Python pode enviar dados para o front-end e receber eventos de front-end por meio da API fornecida pela Eel.
Interface HTML/JS/CSS :Eel permite que os desenvolvedores criem interfaces de usuário usando tecnologias web padrão. HTML define a estrutura da página, CSS é usado para estilizar e JavaScript lida com a interação do usuário e atualiza dinamicamente o conteúdo da página.
Atualizações de conteúdo dinâmico : O front-end do Eel pode chamar a função Python de back-end por meio de JavaScript e exibir dinamicamente os resultados na página da web. Da mesma forma, o front-end também pode ouvir eventos de interação do usuário e enviar esses eventos ao back-end para processamento.
Plataforma cruzada: como o Eel é baseado em tecnologia da web, ele pode ser executado em qualquer plataforma que suporte navegadores modernos, incluindo Windows, macOS, Linux e dispositivos móveis.
Simples e fácil de usar: Eel visa simplificar o processo de desenvolvimento da GUI Python, permitindo que os desenvolvedores criem rapidamente aplicativos com interatividade rica sem ter que se aprofundar nos detalhes subjacentes da comunicação de rede.

eel + vue implementa um script python

Primeiro, quero obter o seguinte efeito, executar o script python de acordo com a configuração e gerar o log do script python.

imagem-20240712110800244

Mostrar resultados

GIF 2024-7-12 10-20-51

Explicação do código

código python,main.py

Apresente o enguia, configure o diretório da web, configure a entrada da página, o modo e, em seguida, inicie.
Defina funções python expostas a js.

import eel
import os
import platform
import sys
import time

#指定web文件的文件夹
eel.init("web")

#暴露函数给 js的 eel 对象
@eel.expose
def py_start():
    print("开始执行")
    for i in range(100):
        #调用js方法
        eel.js_insertLog(f'这是python日志{i}')
        time.sleep(0.5)

if sys.platform in ['win32', 'win64'] and int(platform.release()) >= 10:
    eel.start('index.html', mode='edge')
else:
    raise EnvironmentError('Error: System is not Windows 10 or above')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

código de front-end web/index.html

Use vue + elementui como estrutura da web
Chame métodos expostos em python
Defina o método js exposto ao python para gerar logs na página

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>小红书点赞</title>
  <link rel="stylesheet" href="./reset.css">
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="./index.css">
</head>

<body>
<div id="app">
  <el-container>
    <el-header>
      <h2>xxxx工具</h2>
    </el-header>
    <el-container>
      <el-aside width="210px">目录</el-aside>
      <el-main>
        <el-card class="form-box">
          <div class="title">脚本配置</div>
          <el-form ref="form"
                   label-position="left"
                   :model="form" label-width="80px">
            <el-form-item label="输入框">
              <el-input style="width: 280px" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="点赞选项">
              <el-checkbox-group v-model="checkList">
                <el-checkbox label="1" disabled="">评论点赞</el-checkbox>
                <el-checkbox label="2">头像点赞</el-checkbox>
                <el-checkbox label="3">背景页点赞</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="下拉框">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="startPython()">开始执行python脚本</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card class="log-box">
          <el-input
            type="textarea"
            :rows="16"
            placeholder="请输入内容"
            v-model="logTextarea">
          </el-input>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</div>
<script type="text/javascript" src="/eel.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                logTextarea: "",
                logArr: [],
                checkList: ['1'],
                form: {
                    region: "shanghai"
                }
            };
        },
        methods: {
            startPython(){
                 //调用python暴露的方法
                 eel.py_start()
            }
        }
    })
</script>

<script type="text/javascript">
    //暴露给python 的js方法
    eel.expose(js_insertLog)
    function js_insertLog(log) {
        vm.logArr.unshift(log)
        vm.logTextarea = vm.logArr.join('n');
    }

</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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

Compartilhamento de tecnologia

Existem alguns casos para começar com Eel

Existem alguns casos para começar com Eel

Princípios básicos da enguia

eel + vue implementa um script python

Mostrar resultados

Explicação do código

Perfil pessoal

minhas informações de contato