Technologieaustausch

Es gibt einige Beispiele für den Einstieg in Eel

2024-07-12

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

Es gibt einige Beispiele für den Einstieg in Eel

Eel ist eine Python-Bibliothek, die es Python-Programmen ermöglicht, über eine einfache API mit Webseiten zu interagieren. Es nutzt das WebSocket-Protokoll, um die Echtzeitkommunikation zwischen dem Python-Backend und dem JavaScript-Frontend zu ermöglichen. Im Folgenden finden Sie einen Blogartikel über die Nutzung, Kommunikationsprinzipien und Nutzungsszenarien von Eel.

Grundprinzipien von Aal

Bild-20240712105805701

Die Grundprinzipien von Aal lassen sich in folgende Aspekte unterteilen:

  1. WebSocket-Kommunikation : WebSocket ist ein Netzwerkkommunikationsprotokoll, das den Aufbau einer dauerhaften Verbindung zwischen dem Browser des Benutzers und dem Server ermöglicht. Eel nutzt WebSockets, um eine bidirektionale Echtzeitkommunikation zwischen Front-End und Back-End zu ermöglichen.
  2. Python-Backend : Das Backend von Eel ist in Python geschrieben und kann komplexe Logik- und Datenverarbeitungsaufgaben ausführen. Python-Code kann über die von Eel bereitgestellte API Daten an das Front-End senden und Front-End-Ereignisse empfangen.
  3. HTML/JS/CSS-Frontend :Eel ermöglicht Entwicklern die Erstellung von Benutzeroberflächen mithilfe von Standard-Webtechnologien. HTML definiert die Struktur der Seite, CSS wird für das Styling verwendet und JavaScript übernimmt die Benutzerinteraktion und aktualisiert den Seiteninhalt dynamisch.
  4. Dynamische Inhaltsaktualisierungen : Das Front-End von Eel kann die Back-End-Python-Funktion über JavaScript aufrufen und die Ergebnisse dynamisch auf der Webseite anzeigen. Ebenso kann das Front-End auch Benutzerinteraktionsereignisse abhören und diese Ereignisse zur Verarbeitung an das Back-End senden.
  5. Plattformübergreifend: Da Eel auf Webtechnologie basiert, kann es auf jeder Plattform ausgeführt werden, die moderne Webbrowser unterstützt, einschließlich Windows, macOS, Linux und Mobilgeräten.
  6. Einfach und leicht zu bedienen: Eel zielt darauf ab, den Python-GUI-Entwicklungsprozess zu vereinfachen und es Entwicklern zu ermöglichen, schnell Anwendungen mit umfassender Interaktivität zu erstellen, ohne sich mit den zugrunde liegenden Netzwerkkommunikationsdetails befassen zu müssen.

eel + vue implementiert ein Python-Skript

Ich möchte zunächst den folgenden Effekt erzielen, das Python-Skript entsprechend der Konfiguration ausführen und das Protokoll des Python-Skripts ausgeben.

Bild-20240712110800244

Zeige Ergebnisse

GIF 2024-7-12 10-20-51

Code-Erklärung

Python-Code,main.py

  • Führen Sie Aal ein, konfigurieren Sie das Webverzeichnis, konfigurieren Sie den Seiteneintrag und den Modus und starten Sie dann.
  • Definieren Sie Python-Funktionen, die js ausgesetzt sind.
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

Front-End-Code web/index.html

  • Verwenden Sie vue + elementui als Webframework
  • Rufen Sie exponierte Python-Methoden auf
  • Definieren Sie die für Python verfügbar gemachte js-Methode zur Ausgabe von Protokollen auf der Seite
<!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

Persönliches Profil

Er widmet sich seit mehr als 30 Jahren der Technologieforschung und beherrscht verschiedene Sprachen wie Java, Linux, Javascript, PHP, CSS usw. Er hat viele Beiträge im Open-Source-Bereich geleistet, Entwicklerdokumentationsstation, um einige Themen in der Technologieentwicklung als zukünftige Referenz zu teilen

meine Kontaktdaten

Post