On joitakin tapauksia, joissa Eel_developdoc on aloitettava

On joitain tapauksia aloittaa Ankeriaan kanssa

2024-07-12

On joitain tapauksia aloittaa Ankeriaan kanssa

Eel on Python-kirjasto, jonka avulla Python-ohjelmat voivat olla vuorovaikutuksessa verkkosivujen kanssa yksinkertaisen API:n kautta. Se käyttää WebSocket-protokollaa mahdollistaakseen reaaliaikaisen viestinnän Python-taustajärjestelmän ja JavaScript-käyttöliittymän välillä. Seuraavassa on blogiartikkeli Eelin käytöstä, viestintäperiaatteista ja käyttöskenaarioista.

Ankeriaan perusperiaatteet

kuva-20240712105805701

Ankeriaan perusperiaatteet voidaan jakaa seuraaviin aspekteihin:

WebSocket-viestintä : WebSocket on verkkoviestintäprotokolla, joka mahdollistaa jatkuvan yhteyden muodostamisen käyttäjän selaimen ja palvelimen välille. Eel käyttää WebSocketsia mahdollistaakseen reaaliaikaisen, kaksisuuntaisen viestinnän käyttöliittymän ja taustapään välillä.
Python-taustaohjelma : Eelin taustaohjelma on kirjoitettu Pythonilla ja voi suorittaa monimutkaisia logiikka- ja tietojenkäsittelytehtäviä. Python-koodi voi lähettää dataa käyttöliittymään ja vastaanottaa käyttöliittymän tapahtumia Eelin tarjoaman API:n kautta.
HTML/JS/CSS-käyttöliittymä :Ankerias antaa kehittäjille mahdollisuuden luoda käyttöliittymiä käyttämällä tavallisia verkkotekniikoita. HTML määrittelee sivun rakenteen, CSS:ää käytetään muotoiluun ja JavaScript hoitaa käyttäjän vuorovaikutuksen ja päivittää sivun sisältöä dynaamisesti.
Dynaamiset sisältöpäivitykset : Eelin käyttöliittymä voi kutsua Python-taustafunktiota JavaScriptin kautta ja näyttää tulokset dynaamisesti verkkosivulla. Vastaavasti käyttöliittymä voi myös kuunnella käyttäjän vuorovaikutustapahtumia ja lähettää nämä tapahtumat takapäähän käsittelyä varten.
Cross-platform: Koska Eel perustuu verkkoteknologiaan, se voi toimia millä tahansa alustalla, joka tukee nykyaikaisia verkkoselaimia, mukaan lukien Windows, macOS, Linux ja mobiililaitteet.
Yksinkertainen ja helppokäyttöinen: Eel pyrkii yksinkertaistamaan Python GUI -kehitysprosessia, jolloin kehittäjät voivat nopeasti rakentaa sovelluksia, joissa on runsaasti interaktiivisuutta ilman, että heidän tarvitsee syventää taustalla olevia verkkoviestinnän yksityiskohtia.

eel + vue toteuttaa python-skriptin

Haluan ensin saavuttaa seuraavan tehosteen, suorittaa python-skriptin konfiguraation mukaan ja tulostaa pyhton-skriptin lokin.

kuva-20240712110800244

Näytä tulokset

GIF 2024-7-12 10-20-51

Koodin selitys

python koodi,main.py

Esittele ankerias, määritä verkkohakemisto, määritä sivun syöttö, tila ja aloita sitten.
Määrittele js:lle altistuvat python-funktiot.

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

käyttöliittymäkoodi web/index.html

Käytä vue + elementui verkkokehyksenä
Kutsu python-altistettuja menetelmiä
Määritä pythonille altistunut js-menetelmä lokien tulostamiseksi sivulle

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

Teknologian jakaminen

On joitain tapauksia aloittaa Ankeriaan kanssa

On joitain tapauksia aloittaa Ankeriaan kanssa

Ankeriaan perusperiaatteet

eel + vue toteuttaa python-skriptin

Näytä tulokset

Koodin selitys

Henkilökohtainen profiili

yhteystietoni