Condivisione della tecnologia

Ci sono alcuni casi per iniziare con Eel

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Ci sono alcuni casi per iniziare con Eel

Eel è una libreria Python che consente ai programmi Python di interagire con le pagine web tramite una semplice API. Utilizza il protocollo WebSocket per abilitare la comunicazione in tempo reale tra il backend Python e il frontend JavaScript. Quello che segue è un articolo di blog sull'utilizzo, i principi di comunicazione e gli scenari di utilizzo di Eel.

Principi di base dell'anguilla

immagine-20240712105805701

I principi base di Eel possono essere suddivisi nei seguenti aspetti:

  1. Comunicazione WebSocket : WebSocket è un protocollo di comunicazione di rete che consente di stabilire una connessione persistente tra il browser dell'utente e il server. Eel utilizza WebSocket per consentire la comunicazione bidirezionale in tempo reale tra il front-end e il back-end.
  2. Backend Python : Il backend di Eel è scritto in Python e può eseguire attività complesse di logica ed elaborazione dati. Il codice Python può inviare dati al front-end e ricevere eventi front-end tramite l'API fornita da Eel.
  3. Front-end HTML/JS/CSS :Eel consente agli sviluppatori di creare interfacce utente utilizzando tecnologie web standard. HTML definisce la struttura della pagina, CSS viene utilizzato per lo stile e JavaScript gestisce l'interazione dell'utente e aggiorna dinamicamente il contenuto della pagina.
  4. Aggiornamenti dinamici dei contenuti : Il front-end di Eel può chiamare la funzione Python del back-end tramite JavaScript e visualizzare dinamicamente i risultati sulla pagina web. Allo stesso modo, il front-end può anche ascoltare gli eventi di interazione dell'utente e inviare questi eventi al back-end per l'elaborazione.
  5. Multipiattaforma: poiché Eel si basa sulla tecnologia Web, può essere eseguito su qualsiasi piattaforma che supporti i browser Web moderni, inclusi Windows, macOS, Linux e dispositivi mobili.
  6. Semplice e facile da usare: Eel mira a semplificare il processo di sviluppo della GUI Python, consentendo agli sviluppatori di creare rapidamente applicazioni con una ricca interattività senza dover approfondire i dettagli della comunicazione di rete sottostante.

eel + vue implementa uno script Python

Per prima cosa voglio ottenere il seguente effetto, eseguire lo script Python in base alla configurazione e generare il registro dello script Python.

immagine-20240712110800244

Mostra i risultati

12-07-2024 20-10-51

Spiegazione del codice

codice Python,main.py

  • Introduci eel, configura la directory web, configura la voce della pagina, la modalità e quindi avvia.
  • Definire le funzioni Python esposte 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

codice front-end web/index.html

  • Utilizza vue + elementui come framework web
  • Chiama i metodi esposti in Python
  • Definire il metodo js esposto a Python per l'output dei log sulla pagina
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>小红书点赞</title>
  <link rel="stylesheet" href="./reset.css">
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.13/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/vue@2.7.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.15.13/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

Profilo personale

Si dedica alla ricerca tecnologica da più di 30 anni ed è esperto in vari linguaggi come Java, Linux, Javascript, php, css, ecc. Ha dato numerosi contributi nel campo dell'open source stazione di documentazione per gli sviluppatori per condividere alcuni problemi nello sviluppo della tecnologia per riferimento futuro

le mie informazioni di contatto

Posta