Sunt nonnulli casus initii cum Eel

Sunt quidam casus pro questus incepit cum Eel

2024-07-12

Sunt quidam casus pro questus incepit cum Eel

Python Eel bibliotheca est quae Python programmata per simplicem API interretiales se occurrunt. Protocollo WebSocket utitur ut communicationis realis tempus inter Pythonem backend et JavaScript frontem possit. Articulus blogus sequentis est de usu, principiis communicationis et usu missionum Eel.

Basic principia Eel

Fundamenta Eel in sequentes aspectus dividi possunt;

WebSocket communicationis : WebSocket est protocollum communicationis retis quae permittit nexum assiduum constituendum inter navigatrum utentis et servitorem. Anguilla interretiales utitur ut verum tempus efficiat, duo modo communicationis inter finem anteriorem et finem posteriorem.
Python backend : Anguli tergum Pythone scriptum est et logicam complexam ac negotia processus notitiis conficere potest. Python codicem notitias ad finem anteriorem mittere potest et eventus ante-finem recipere per API provisum ab Ecl.
HTML/JS/CSS front-end :Eel permittit tincidunt creare interfaces utens normae telae technologiae. HTML structuram paginae definit, CSS ad styling adhibitam, et JavaScript tractat usuario commercio et dynamice pagina contenta updates.
Dynamic contentus updates : angulus ante-finis munus Python retro-end vocare potest per JavaScript et dynamice eventus in pagina interreti ostentare. Similiter finis anterior potest etiam audire rerum gestarum commercium usorem et has eventus mittere ad finem pro dispensando.
suggestum crucisQuia Eel in technologia interretiali innititur, in quolibet suggestu currere potest quod navigatores interretiales sustentat, incluso Fenestra, macOS, Linux, et machinis mobilibus.
Simplex et facilis ad: Anguilla intendit ut Python GUI processum evolutionis simpliciorem reddere studeat, tincidunt ut cito applicationes cum opulenta mutuatione edificandi permittat, quin ingrediatur in singulas retis communicationis subiecta.

anguilla + vue instrumenti Pythonis script

Hoc primum effectum assequi volo, Pythonem scriptum secundum schematisma exequor, et pyhton script output truncum.

Proventus monstrare

GIF 2024-7-12 10-20-51

Code explicatio

Python codicem;main.py

Inducere anguillam, directorium configurare, paginam ingressum, modum configurare, ac deinde incipere.
Define Pythonis munera exposita ad ys.

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

ante-finem codice web/index.html

Utere vue + elementui ut interretiali
Python modi expositae voca
Definire js modum pythoni expositum pro outputting trabes in pagina

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

Technology sharing

Sunt quidam casus pro questus incepit cum Eel

Sunt quidam casus pro questus incepit cum Eel

Basic principia Eel

anguilla + vue instrumenti Pythonis script

Proventus monstrare

Code explicatio

Personal profile

mihi contactus notitia