Κοινή χρήση τεχνολογίας

Υπάρχουν ορισμένες περιπτώσεις για να ξεκινήσετε με το χέλι

2024-07-12

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

Υπάρχουν ορισμένες περιπτώσεις για να ξεκινήσετε με το χέλι

Το Eel είναι μια βιβλιοθήκη Python που επιτρέπει στα προγράμματα Python να αλληλεπιδρούν με ιστοσελίδες μέσω ενός απλού API. Χρησιμοποιεί το πρωτόκολλο WebSocket για να ενεργοποιήσει την επικοινωνία σε πραγματικό χρόνο μεταξύ του backend Python και του frontend JavaScript. Ακολουθεί ένα άρθρο ιστολογίου σχετικά με τη χρήση, τις αρχές επικοινωνίας και τα σενάρια χρήσης του χελιού.

Βασικές αρχές του χελιού

εικόνα-20240712105805701

Οι βασικές αρχές του χελιού μπορούν να χωριστούν στις ακόλουθες πτυχές:

  1. Επικοινωνία WebSocket : Το WebSocket είναι ένα πρωτόκολλο επικοινωνίας δικτύου που επιτρέπει τη δημιουργία μόνιμης σύνδεσης μεταξύ του προγράμματος περιήγησης του χρήστη και του διακομιστή. Το Eel χρησιμοποιεί WebSockets για να επιτρέψει την αμφίδρομη επικοινωνία σε πραγματικό χρόνο μεταξύ του front-end και του back-end.
  2. Python backend : Το backend του Eel είναι γραμμένο σε Python και μπορεί να εκτελέσει σύνθετες εργασίες λογικής και επεξεργασίας δεδομένων. Ο κώδικας Python μπορεί να στείλει δεδομένα στο front-end και να λαμβάνει συμβάντα front-end μέσω του API που παρέχεται από το Eel.
  3. HTML/JS/CSS front-end :Το χέλι επιτρέπει στους προγραμματιστές να δημιουργούν διεπαφές χρήστη χρησιμοποιώντας τυπικές τεχνολογίες Ιστού. Το HTML καθορίζει τη δομή της σελίδας, το CSS χρησιμοποιείται για το στυλ και η JavaScript χειρίζεται την αλληλεπίδραση των χρηστών και ενημερώνει δυναμικά το περιεχόμενο της σελίδας.
  4. Ενημερώσεις δυναμικού περιεχομένου : Το front-end του Eel μπορεί να καλέσει τη συνάρτηση Python back-end μέσω JavaScript και να εμφανίσει δυναμικά τα αποτελέσματα στην ιστοσελίδα. Ομοίως, η διεπαφή μπορεί επίσης να ακούει συμβάντα αλληλεπίδρασης χρήστη και να στέλνει αυτά τα συμβάντα στο πίσω μέρος για επεξεργασία.
  5. Cross-platform: Επειδή το Eel βασίζεται στην τεχνολογία Ιστού, μπορεί να εκτελεστεί σε οποιαδήποτε πλατφόρμα υποστηρίζει σύγχρονα προγράμματα περιήγησης ιστού, συμπεριλαμβανομένων των Windows, macOS, Linux και φορητών συσκευών.
  6. Απλό και εύκολο στη χρήση: Το Eel στοχεύει να απλοποιήσει τη διαδικασία ανάπτυξης Python GUI, επιτρέποντας στους προγραμματιστές να δημιουργούν γρήγορα εφαρμογές με πλούσια διαδραστικότητα χωρίς να χρειάζεται να εμβαθύνουν στις υποκείμενες λεπτομέρειες επικοινωνίας του δικτύου.

Το eel + vue υλοποιεί ένα σενάριο python

Θέλω πρώτα να επιτύχω το ακόλουθο εφέ, να εκτελέσω το σενάριο της python σύμφωνα με τη διαμόρφωση και να βγάλω το αρχείο καταγραφής του σεναρίου pyhton.

εικόνα-20240712110800244

Εμφάνιση αποτελεσμάτων

GIF 2024-7-12 10-20-51

Εξήγηση κώδικα

κώδικας python,main.py

  • Εισάγετε το χέλι, διαμορφώστε τον κατάλογο Ιστού, διαμορφώστε την καταχώρηση σελίδας, τη λειτουργία και μετά ξεκινήστε.
  • Ορίστε συναρτήσεις python που εκτίθενται σε 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

κωδικός διεπαφής web/index.html

  • Χρησιμοποιήστε το vue + elementui ως πλαίσιο web
  • Καλέστε εκτεθειμένες μεθόδους python
  • Ορίστε τη μέθοδο js που εκτίθεται στην python για την έξοδο αρχείων καταγραφής στη σελίδα
<!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