Einführung
Das Thema schöne Schnittstellen war und ist immer relevant, jemand verwendet C #, um grafische Anwendungen zu erstellen, jemand verwendet Java, jemand geht in den Dschungel von C ++ und jemand ist mit tkinter oder PyQT mit Python pervers. Es gibt verschiedene Technologien, mit denen Sie die Schönheit von in HTML, CSS und JS erstellten Grafikdesigns mit der Flexibilität bei der Implementierung von Anwendungslogik kombinieren können, die eine andere Sprache bieten kann. Für diejenigen, die in der besten Programmiersprache Python schreiben , gibt es die Möglichkeit, schöne Schnittstellen in HTML, CSS und JS zu schreiben und ihnen in Python Logik zuzuweisen.
In diesem Artikel möchte ich anhand eines kleinen Beispiels zeigen, wie eine einfache und schöne Desktop-Anwendung in HTML, CSS, JS und Python erstellt wird. Wir werden EEL als Bibliothek zum Verbinden aller Komponenten verwenden.
Installation
Ich werde reservieren, dass ich unter Windows 10 x64 arbeite.
Zunächst installieren wir die Bibliothek selbst, indem wir einen einfachen Befehl ausführen : Nachdem wir nur eine Bibliothek installiert haben, können wir unsere Reise beginnen.
pip install eel
Unsere Anwendung sieht folgendermaßen aus:
Die Anwendungslogik ist sehr einfach: Wenn die Schaltfläche "Berechnen" gedrückt wird, werden die Werte im Feld für die Eingabe von Rubel gelesen und die empfangenen Daten an Python gesendet, wo der Wechselkurs berechnet wird. Python gibt Daten an uns zurück und wir geben sie über JS aus
Wir verteilen uns in Ordnern
. “front” , . “back” python. middle, , JS ( ). main.py, .
Python
(-, , , ). python CurrencyConverter:
pip install currencyconverter
python. , , , . “convert.py” “back” :
from currency_converter import CurrencyConverter
converter = CurrencyConverter()
def convert_value(value: float, from_cur: str, to_cur: str):
return converter.convert(value, from_cur, to_cur)
“middle” “mid_convert.py” :
from back.convert import convert_value
import eel
@eel.expose
def convert_value_py(value:float, from_cur:str, to_cur:str)->float:
return convert_value(value, from_cur, to_cur)
? “mid_convert.py” JS Python. @eel.expose , , , JS. , , JS, @eel.expose. , , , “convert_value” “convert.py”. .
Python JS
Python JS. , HTML, CSS ( vue.js, react.js , ). eel JS:
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="/eel.js"></script>
</head>
“”. , .
async function create_cur_for_rub (){
//
let value_rub = parseFloat(document.getElementById("rub-input").value);
// input',
let list_curs = document.getElementById("list-cur").children;
for (let div_cur of list_curs) {
//
let name_cur = div_cur.getElementsByTagName("span")[0].textContent;
// Python
let value_cur = await eel.convert_value_py(value_rub, "RUB", name_cur)();
//
div_cur.getElementsByTagName("input")[0].value = value_cur;
}
}
document.getElementById("btn-sum").onclick = create_cur_for_rub;
“let value_cur = await eel.convert_value_py(value_rub, "RUB", name_cur)();”. , , , Python . eel (), .
, .
, .
“main.py”. eel , “min_convert.py” , , eel.expose:
import eel
from middle.mid_convert import *
eel , front-end . eel.init(args). eel.start(args):
if __name__ == '__main__':
eel.init('front')
eel.start('index.html', mode="chrome", size=(760, 760))
eel.start ( . eel). “mode”. , , . , “default”, . google chrome, “mode=chrome” .
Sie können auch Chrom verwenden. Laden Sie es dazu von der offiziellen Website herunter . Entpacke es in einen Ordner und schreibe den folgenden Code in unsere "main.py":
eel.browsers.set_path("chrome", "C:/Users/admin/Documents/chrome-win/chrome.exe")
eel.start('index.html', mode="chrome", size=(760, 760))
Ausgabe
Wie wir sehen können, ist es nicht so schwierig, schöne Desktop-Anwendungen mit Python als Sprache für die Implementierung der Hauptlogik zu erstellen. Sie können beliebige Bibliotheken installieren, den erforderlichen Code mit Python implementieren und schöne Schnittstellen in HTML, CSS und JS schreiben.
PS Dies ist mein erster Artikel über Habr. Schreiben Sie Ihre Wünsche, Kommentare und Rückmeldungen. Ich freue mich über jeden Kommentar.