Il existe quelques cas pour débuter avec Eel

2024-07-12

Il existe quelques cas pour débuter avec Eel

Eel est une bibliothèque Python qui permet aux programmes Python d'interagir avec des pages Web via une simple API. Il utilise le protocole WebSocket pour permettre la communication en temps réel entre le backend Python et le frontend JavaScript. Ce qui suit est un article de blog sur l'utilisation, les principes de communication et les scénarios d'utilisation d'Eel.

Principes de base de l'anguille

Les principes de base d’Eel peuvent être divisés selon les aspects suivants :

Communication WebSocket : WebSocket est un protocole de communication réseau qui permet d'établir une connexion persistante entre le navigateur de l'utilisateur et le serveur. Eel utilise WebSockets pour permettre une communication bidirectionnelle en temps réel entre le front-end et le back-end.
Moteur Python : Le backend d'Eel est écrit en Python et peut effectuer des tâches complexes de logique et de traitement de données. Le code Python peut envoyer des données au front-end et recevoir des événements front-end via l'API fournie par Eel.
Front-end HTML/JS/CSS :Eel permet aux développeurs de créer des interfaces utilisateur en utilisant les technologies Web standards. HTML définit la structure de la page, CSS est utilisé pour le style et JavaScript gère l'interaction de l'utilisateur et met à jour dynamiquement le contenu de la page.
Mises à jour de contenu dynamique : Le front-end d'Eel peut appeler la fonction Python du back-end via JavaScript et afficher dynamiquement les résultats sur la page Web. De même, le front-end peut également écouter les événements d’interaction de l’utilisateur et envoyer ces événements au back-end pour traitement.
Multiplateforme: Parce qu'Eel est basé sur la technologie Web, il peut fonctionner sur n'importe quelle plate-forme prenant en charge les navigateurs Web modernes, notamment Windows, macOS, Linux et les appareils mobiles.
Simple et facile à utiliser: Eel vise à simplifier le processus de développement de l'interface graphique Python, permettant aux développeurs de créer rapidement des applications avec une interactivité riche sans avoir à se plonger dans les détails de communication réseau sous-jacents.

eel + vue implémente un script python

Je veux d'abord obtenir l'effet suivant, exécuter le script python selon la configuration et afficher le journal du script pyhton.

Montrer les résultats

GIF 2024-7-12 10-20-51

Explication du code

code python,main.py

Présentez eel, configurez le répertoire Web, configurez l'entrée de la page, le mode, puis démarrez.
Définissez les fonctions Python exposées à 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

code frontal web/index.html

Utilisez vue + elementui comme framework Web
Appeler les méthodes exposées Python
Définir la méthode js exposée à python pour afficher les journaux sur la page

<!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

Partage de technologie

Il existe quelques cas pour débuter avec Eel

Il existe quelques cas pour débuter avec Eel

Principes de base de l'anguille

eel + vue implémente un script python

Montrer les résultats

Explication du code

Profil personnel

mes coordonnées