JustPy ist ein High-Level-Webframework für objektorientiertes, inhaltsbasiertes Python, für das keine Front-End-Programmierung erforderlich ist.
An object-oriented, component based, high-level Python Web Framework that requires no front-end programming.
Mit Flask, Django usw. können Sie viel allein mit Python erledigen, aber Sie müssen immer noch HTML mit Jinja2 usw. schreiben. Auf der anderen Seite ist dieser JustPy wirklich komplett mit nur Python.
Da es sich um ein hohes Level handelt, ist die Basis ein Webframework namens Starllete, das Async unterstützt. Das Frontend basiert ebenfalls auf Vue.js.
Das Folgende ist meine eigene Zusammenfassung der Ergebnisse der Rückverfolgung des offiziellen Tutorials zu den Modell- und Datenattributen.
Es implementiert HTML-Elemente als Klassen. Die Webseite selbst (der gesamte anzuzeigende HTML-Code) ist ebenfalls eine Klasse namens WebPage (). Der Inhalt wird hinzugefügt, indem dem instanziierten Element andere untergeordnete Elemente hinzugefügt werden.
import justpy as jp
def test():
#p-Element ist P.()Ist in der Klasse implementiert
p = jp.P()
p.text = 'This is test site.'
#Die Webseite selbst ist auch eine Webseite()Eine Instanz der Klasse.
wp = jp.WebPage()
#Fügen Sie Inhalte hinzu, indem Sie ein p-Element hinzufügen.
wp.add(p)
return wp
jp.justpy(test)
Wenn Sie nach dem oben beschriebenen Vorgang mit Ihrem Browser auf localhost: 8000 zugreifen, wird "Dies ist eine Testsite" angezeigt.
Übrigens ist es auch möglich, genau den gleichen Inhalt zu kürzen.
def test_short():
#Die Webseite selbst ist auch eine Webseite()Zu einer Instanz der Klasse. Fügen Sie dort das p-Element hinzu
wp = jp.WebPage()
p = jp.P(text='This is test site.', a=wp)
return wp
CSS Für CSS scheint es ein Framework namens Tailwind zu verwenden. (Es ist auch möglich, ohne Verwendung des Frameworks anzugeben)
def test_tailwind():
wp = jp.WebPage()
p_css = "w-64 bg-pink-500 m-2 hover:bg-pink-700 text-white font-bold py-2 px-4 rounded"
jp.P(text='This is test site.', a=wp, classes=p_css)
return wp
Geben Sie die Breite mit w-xx und die Hintergrundfarbe mit bg-xxx an. Für die Breite können Sie die Definition beispielsweise im Offiziellen Dokument anzeigen. w-0 entspricht 0,25 rem, und es scheint, dass 0,25 rem für jede 1 danach zunimmt. (Bis zu 64) rem ist die Schriftgröße des Stammelements (normalerweise HTML). Wenn es sich um einen Bruch wie 1/2 handelt, wird er als 1/2 der Bildschirmbreite angegeben. Referenz: https://qiita.com/butchi_y/items/453654828d9d6c9f94b0 Es scheint, dass diese Beschreibung von w-xxx als Dienstprogramm bezeichnet wird. m : margin px, py: Polsterung (px ist der horizontale Rand am linken und rechten Ende) Text, bg: Farbe. Die Zahl auf der Rückseite ist in Schritten von 100 angegeben. Je größer die Zahl, desto dunkler die Farbe.
Ereignisse sind an Python-Funktionen gebunden. Ereignisereignis wie Mausklick = Ausführung der entsprechenden Funktion.
from pprint import pprint
def click(self, msg):
self.text = 'Clicked.'
#So überprüfen Sie den Inhalt von msg
pprint(msg)
def test_event():
wp = jp.WebPage()
d = jp.P(text='Not clicked.', a=wp, classes='w-64 m-2 p-1 bg-pink-500 text-white')
d.on('click', click)
return wp
jp.justpy(test_event)
Die dem Ereignis entsprechende Funktion muss zwei Argumente annehmen, das erste ist das Objekt, das das Ereignis generiert (empfohlen, selbst zu sein), und das zweite sind die Details des aufgetretenen Ereignisses (empfohlen, msg zu sein). ist.
{'class_name': 'P',
'event_current_target': '1',
'event_target': '1',
'event_type': 'click',
'html_tag': 'p',
'id': 1,
'msg_type': 'event',
'page': WebPage(page_id: 0, number of components: 1, reload interval: None),
'page_id': 0,
'session_id': '49bd7917e083441493a179bd85cda70d',
'target': P(id: 1, html_tag: p, vue_type: html_component, name: No name, number of components: 0),
'vue_type': 'html_component',
'websocket': <starlette.websockets.WebSocket object at 0x0000024AE46CA400>,
'websocket_id': 0}
Das Routing ist ebenfalls sehr einfach. Geben Sie einfach den Pfad und die Funktion an, die in der Klasse Route aufgerufen werden sollen.
def home():
wp = jp.WebPage()
wp.add(jp.P(text='This is Home.', classes='w-64 m-2 p-1 bg-pink-500 text-white'))
return wp
jp.Route('/home', home)
jp.justpy()
Wenn Sie jetzt auf localhost: 8000 / home zugreifen, werden Sie es sehen. Wenn umgekehrt kein Haus angegeben ist, wird es nicht gefunden. Sie können denselben Inhalt auch mit einem Dekorateur schreiben. Wenn Sie Flask kennen, ist dies möglicherweise leichter zu verstehen.
@jp.SetRoute('/home')
def home():
wp = jp.WebPage()
wp.add(jp.P(text='This is Home.', classes='w-64 m-2 p-1 bg-pink-500 text-white'))
return wp
Verwenden Sie für die Eingabe die bereitgestellte Eingabeklasse wie andere HTML-Elemente.
input_class = 'w-64 m-2 p-1 bg-pink-500 text-white'
output_class = 'w-64 m-2 p-1 bg-indigo-500 text-white'
async def input_test(self, msg):
self.p.text = self.value
@jp.SetRoute('/input_test')
async def home(request):
wp = jp.WebPage()
input_box = jp.Input(a=wp, classes=input_class, placeholder='Inout')
input_box.p = jp.P(text='Output', classes=output_class, a=wp)
input_box.on('input', input_test)
return wp
jp.justpy()
Ich werde einen festen Ereignisnamen angeben, der als Eingabe für on bezeichnet wird. Das empfangene Ereignis wird in der entsprechenden Funktion verarbeitet. Da das Objekt, das das Ereignis verursacht hat, in self enthalten ist, wird der Textinhalt in den eingegebenen Inhalt umgeschrieben.
Im vorherigen Beispiel wurden die Informationen im eingegebenen Text unverändert verwendet und nicht gespeichert. Sie können jedoch in Form eines Modells gespeichert und von anderen Komponenten verwendet werden. Das Folgende zeigt den Inhalt, der in Eingabe in einer anderen Komponente (p-Element) eingegeben wurde.
@jp.SetRoute('/usecase2')
async def usecase2(request):
wp = jp.WebPage(data={ 'text': 'Initial text'})
jp.Input(a=wp, classes=input_class, placeholder='Please type here', model=[wp, 'text'])
jp.P(model=[wp, 'text'], classes=output_class, a=wp)
return wp
Für WebPage können Sie Daten im Wörterbuchformat als Modell mit den Argumentdaten angeben. Sowohl das Eingabeelement als auch das P-Element beziehen sich auf das Modell mit dem Argumentmodell. Die Art der Referenzierung ist etwas anders und model = [wp, 'text']. Es scheint "Daten zu bedeuten, die dem Schlüssel namens Text in dem von der Instanz namens wp angegebenen Modell entsprechen". Ich untersuche, weil unklar ist, wie dieses Modell beibehalten wird (oder kann).
Mit Ausnahme des Teils der Modellpersistenz scheinen die meisten Dinge einfacher zu sein als Flask / Django. Soweit das offizielle Tutorial zu sehen ist, scheint es auch für eine Vielzahl von Zwecken verwendet werden zu können. Wenn ich das nächste Mal etwas selbst mache, werde ich es definitiv benutzen.
Recommended Posts