Berbagi teknologi

Ada beberapa kasus untuk memulai dengan Belut

2024-07-12

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

Ada beberapa kasus untuk memulai dengan Belut

Eel adalah perpustakaan Python yang memungkinkan program Python berinteraksi dengan halaman web melalui API sederhana. Ia menggunakan protokol WebSocket untuk mengaktifkan komunikasi real-time antara backend Python dan frontend JavaScript. Berikut ini adalah artikel blog tentang penggunaan, prinsip komunikasi, dan skenario penggunaan Belut.

Prinsip dasar Belut

gambar-20240712105805701

Prinsip dasar Belut dapat dibagi menjadi beberapa aspek berikut:

  1. Komunikasi WebSocket : WebSocket adalah protokol komunikasi jaringan yang memungkinkan koneksi persisten dibuat antara browser pengguna dan server. Eel menggunakan WebSockets untuk memungkinkan komunikasi dua arah secara real-time antara front-end dan back-end.
  2. Bagian belakang Python : Backend Eel ditulis dengan Python dan dapat melakukan tugas logika dan pemrosesan data yang kompleks. Kode python dapat mengirim data ke front-end dan menerima event front-end melalui API yang disediakan oleh Eel.
  3. Bagian depan HTML/JS/CSS :Eel memungkinkan pengembang membuat antarmuka pengguna menggunakan teknologi web standar. HTML mendefinisikan struktur halaman, CSS digunakan untuk penataan gaya, dan JavaScript menangani interaksi pengguna dan memperbarui konten halaman secara dinamis.
  4. Pembaruan konten dinamis : Front-end Eel dapat memanggil fungsi back-end Python melalui JavaScript dan secara dinamis menampilkan hasilnya di halaman web. Demikian pula, front end juga dapat mendengarkan kejadian interaksi pengguna dan mengirimkan kejadian tersebut ke back end untuk diproses.
  5. Lintas platform: Karena Eel didasarkan pada teknologi web, Eel dapat berjalan di platform apa pun yang mendukung browser web modern, termasuk Windows, macOS, Linux, dan perangkat seluler.
  6. Sederhana dan mudah digunakan: Eel bertujuan untuk menyederhanakan proses pengembangan GUI Python, memungkinkan pengembang dengan cepat membangun aplikasi dengan interaktivitas yang kaya tanpa harus mempelajari detail komunikasi jaringan yang mendasarinya.

belut + vue mengimplementasikan skrip python

Saya pertama-tama ingin mencapai efek berikut, menjalankan skrip python sesuai dengan konfigurasi, dan menampilkan log skrip pyhton.

gambar-20240712110800244

Tunjukkan hasil

Tanggal 12-7-2024 20-10-51

Penjelasan kode

kode python,main.py

  • Perkenalkan belut, konfigurasikan direktori web, konfigurasikan entri halaman, mode, lalu mulai.
  • Tentukan fungsi python yang diekspos ke 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

kode ujung depan web/index.html

  • Gunakan vue + elementui sebagai kerangka web
  • Panggil metode yang diekspos python
  • Tentukan metode js yang diekspos ke python untuk mengeluarkan log pada halaman
<!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

Profil pribadi

Ia telah mengabdikan dirinya untuk meneliti teknologi selama lebih dari 30 tahun, dan mahir dalam berbagai bahasa seperti java, linux, javascript, php, css, dll. Ia telah memberikan banyak kontribusi di bidang open source stasiun dokumentasi pengembang untuk berbagi beberapa masalah dalam pengembangan teknologi untuk referensi di masa mendatang. Semua orang memeriksanya

informasi kontak saya

Surat