技術共有

Eel を始めるためのいくつかのケースがあります

2024-07-12

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

Eel を始めるためのいくつかのケースがあります

Eel は、Python プログラムが単純な API を通じて Web ページと対話できるようにする Python ライブラリです。 WebSocket プロトコルを使用して、Python バックエンドと JavaScript フロントエンド間のリアルタイム通信を可能にします。以下は、Eel の使用法、通信原理、使用シナリオに関するブログ記事です。

うなぎの基本原理

画像-20240712105805701

Eel の基本原則は次の側面に分類できます。

  1. WebSocket通信 : WebSocket は、ユーザーのブラウザとサーバーの間で永続的な接続を確立できるようにするネットワーク通信プロトコルです。 Eel は WebSocket を利用して、フロントエンドとバックエンド間のリアルタイムの双方向通信を可能にします。
  2. Python バックエンド : Eel のバックエンドは Python で書かれており、複雑なロジックとデータ処理タスクを実行できます。 Python コードは、Eel が提供する API を介してフロントエンドにデータを送信し、フロントエンド イベントを受信できます。
  3. HTML/JS/CSSフロントエンド :Eel を使用すると、開発者は標準の Web テクノロジーを使用してユーザー インターフェイスを作成できます。 HTML はページの構造を定義し、CSS はスタイル設定に使用され、JavaScript はユーザー操作を処理してページのコンテンツを動的に更新します。
  4. 動的なコンテンツの更新 : Eel のフロントエンドは、JavaScript を通じてバックエンドの Python 関数を呼び出し、結果を Web ページに動的に表示できます。同様に、フロントエンドはユーザー対話イベントをリッスンし、これらのイベントを処理のためにバックエンドに送信することもできます。
  5. クロスプラットフォーム: Eel は Web テクノロジーに基づいているため、Windows、macOS、Linux、モバイル デバイスなど、最新の Web ブラウザをサポートするあらゆるプラットフォームで実行できます。
  6. シンプルで使いやすい: Eel は、Python GUI 開発プロセスを簡素化し、開発者が基礎となるネットワーク通信の詳細を深く掘り下げることなく、豊富な対話性を備えたアプリケーションを迅速に構築できるようにすることを目的としています。

eel + vue は Python スクリプトを実装します

まずは以下のような効果を実現したいので、設定に従ってPythonスクリプトを実行し、Pythonスクリプトのログを出力したいと思います。

画像-20240712110800244

結果を示す

2024-7-12 10-20-51 アニメ

コードの説明

Pythonコード、main.py

  • eel を導入し、Web ディレクトリを設定し、ページ エントリとモードを設定して開始します。
  • js に公開される Python 関数を定義します。
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

  • Web フレームワークとして vue + elementui を使用する
  • Python の公開メソッドを呼び出す
  • ページにログを出力するためにPythonに公開されるjsメソッドを定義する
<!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

個人プロフィール

彼は 30 年以上テクノロジーの研究に専念しており、java、linux、javascript、php、css などのさまざまな言語に堪能であり、オープンソース分野で多くの貢献を行っています。将来の参考のために技術開発におけるいくつかの問題を共有する開発者ドキュメント ステーション。

私の連絡先情報

郵便