기술나눔

Eel을 시작하는 경우가 있습니다

2024-07-12

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

Eel을 시작하는 경우가 있습니다

Eel은 Python 프로그램이 간단한 API를 통해 웹 페이지와 상호 작용할 수 있게 해주는 Python 라이브러리입니다. WebSocket 프로토콜을 사용하여 Python 백엔드와 JavaScript 프런트엔드 간의 실시간 통신을 활성화합니다. 다음은 Eel의 사용법, 통신 원리 및 사용 시나리오에 대한 블로그 기사입니다.

장어의 기본원리

이미지-20240712105805701

Eel의 기본 원리는 다음과 같은 측면으로 나눌 수 있습니다.

  1. WebSocket 통신 : WebSocket은 사용자의 브라우저와 서버 간에 지속적인 연결이 설정될 수 있도록 하는 네트워크 통신 프로토콜입니다. Eel은 WebSocket을 활용하여 프런트엔드와 백엔드 간의 실시간 양방향 통신을 지원합니다.
  2. Python 백엔드 : Eel의 백엔드는 Python으로 작성되었으며 복잡한 논리 및 데이터 처리 작업을 수행할 수 있습니다. Python 코드는 Eel에서 제공하는 API를 통해 프런트엔드에 데이터를 보내고 프런트엔드 이벤트를 받을 수 있습니다.
  3. HTML/JS/CSS 프런트엔드 :Eel을 사용하면 개발자는 표준 웹 기술을 사용하여 사용자 인터페이스를 만들 수 있습니다. HTML은 페이지 구조를 정의하고 CSS는 스타일 지정에 사용되며 JavaScript는 사용자 상호 작용을 처리하고 페이지 콘텐츠를 동적으로 업데이트합니다.
  4. 동적 콘텐츠 업데이트 : Eel의 프론트엔드는 JavaScript를 통해 백엔드 Python 함수를 호출하고 그 결과를 웹페이지에 동적으로 표시할 수 있습니다. 마찬가지로 프런트 엔드에서는 사용자 상호 작용 이벤트를 수신하고 처리를 위해 이러한 이벤트를 백 엔드로 보낼 수도 있습니다.
  5. 크로스 플랫폼: Eel은 웹 기술을 기반으로 하기 때문에 Windows, macOS, Linux, 모바일 장치 등 최신 웹 브라우저를 지원하는 모든 플랫폼에서 실행될 수 있습니다.
  6. 간단하고 사용하기 쉬운: Eel은 Python GUI 개발 프로세스를 단순화하여 개발자가 기본 네트워크 통신 세부 사항을 조사할 필요 없이 풍부한 상호 작용 기능을 갖춘 애플리케이션을 신속하게 구축할 수 있도록 하는 것을 목표로 합니다.

eel + vue는 Python 스크립트를 구현합니다.

먼저 다음과 같은 효과를 얻고 구성에 따라 python 스크립트를 실행하고 pyhton 스크립트의 로그를 출력하고 싶습니다.

이미지-20240712110800244

결과 보여줘

GIF 2024-7-12 10-20-51

코드 설명

파이썬 코드,main.py

  • eel을 소개하고, 웹 디렉터리를 구성하고, 페이지 항목, 모드를 구성한 후 시작합니다.
  • 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

  • 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 등 다양한 언어에 능숙하며, 오픈 소스 분야에 많은 공헌을 했습니다. 나중에 참조할 수 있도록 기술 개발의 일부 문제를 공유하는 개발자 문서 스테이션입니다.

내 연락처 정보

우편