JustPy est un framework Web de haut niveau pour Python orienté objet et basé sur le contenu qui ne nécessite pas de programmation frontale.
An object-oriented, component based, high-level Python Web Framework that requires no front-end programming.
Avec Flask, Django, etc., vous pouvez accomplir beaucoup de choses avec Python seul, mais vous devez toujours écrire du HTML en utilisant Jinja2 etc. D'un autre côté, ce JustPy est vraiment complet avec juste Python.
De plus, comme on dit qu'il est de haut niveau, la base est un framework Web appelé Starllete, qui prend en charge Async. Le frontal est également basé sur Vue.js.
Ce qui suit est mon propre résumé des résultats du traçage du Tutoriel officiel aux attributs de modèle et de données.
Il implémente des éléments HTML en tant que classes. La page Web elle-même (le HTML entier à afficher) est également une classe appelée WebPage (), et le contenu est ajouté en ajoutant d'autres éléments enfants à l'élément instancié.
import justpy as jp
def test():
#L'élément p est P()Est implémenté dans la classe
p = jp.P()
p.text = 'This is test site.'
#La page Web elle-même est également une page Web()Une instance de la classe.
wp = jp.WebPage()
#Le contenu est ajouté en y ajoutant un élément p.
wp.add(p)
return wp
jp.justpy(test)
Après avoir fait ce qui précède, lorsque vous accédez à localhost: 8000 avec votre navigateur, vous verrez «Ceci est un site de test».
En passant, il est également possible de raccourcir exactement le même contenu.
def test_short():
#La page Web elle-même est également une page Web()À une instance de la classe. Ajouter un élément p ici
wp = jp.WebPage()
p = jp.P(text='This is test site.', a=wp)
return wp
CSS Pour CSS, il semble qu'il soit censé utiliser un framework appelé Tailwind. (Il est également possible de spécifier sans utiliser le framework)
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
Spécifiez la largeur avec w-xx et la couleur d'arrière-plan avec bg-xxx. Par exemple, pour la largeur, vous pouvez voir la définition en consultant le Document officiel. w-0 correspond à 0,25 rem, et il semble que 0,25 rem augmente pour chaque 1 par la suite. (Jusqu'à 64) rem sera la taille de la police de l'élément racine (généralement HTML). De plus, s'il s'agit d'une fraction telle que 1/2, elle sera spécifiée comme 1/2 de la largeur de l'écran. Référence: https://qiita.com/butchi_y/items/453654828d9d6c9f94b0 Il semble que cette description de w-xxx s'appelle utilité. m : margin px, py: padding (px est la marge horizontale, prise aux extrémités gauche et droite) texte, bg: couleur. Le nombre à l'arrière est par incréments de 100, et plus le nombre est élevé, plus la couleur est foncée.
Les événements sont liés aux fonctions Python. Occurrence d'événement tel que clic de souris = exécution de la fonction correspondante.
from pprint import pprint
def click(self, msg):
self.text = 'Clicked.'
#Pour vérifier le contenu du 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)
La fonction correspondant à l'événement doit prendre deux arguments, le premier est l'objet qui génère l'événement (recommandé pour être self), et le second est les détails de l'événement qui s'est produit (recommandé pour être msg). est.
{'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}
Le routage est également très simple, il suffit de spécifier le chemin et la fonction à appeler dans la classe appelée Route.
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()
Maintenant, lorsque vous accédez à localhost: 8000 / home, il sera affiché. Inversement, si home n'est pas spécifié, il sera introuvable. Vous pouvez également écrire le même contenu à l'aide d'un décorateur. Si vous connaissez Flask, cela peut être plus facile à comprendre.
@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
Pour l'entrée, utilisez la classe Input fournie comme les autres éléments HTML.
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()
Je vais spécifier un nom d'événement fixe appelé entrée pour on. L'événement reçu est traité dans la fonction correspondante. Étant donné que l'objet qui a causé l'événement est inclus dans self, le contenu du texte est réécrit avec le contenu saisi.
Dans l'exemple précédent, les informations du texte saisi ont été utilisées telles quelles et non enregistrées, mais elles peuvent être enregistrées sous la forme d'un modèle et utilisées par d'autres composants. Ce qui suit montre le contenu entré dans Input dans un autre composant (élément p).
@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
Pour WebPage, vous pouvez spécifier des données de format de dictionnaire comme modèle avec les données d'argument. L'élément Input et l'élément P font tous deux référence au modèle avec le modèle d'argument. La manière de référencer est légèrement différente, et model = [wp, 'text']. Cela semble signifier "des données correspondant à la clé appelée texte dans le modèle spécifié par l'instance appelée wp". J'enquête car on ne sait pas comment ce modèle sera conservé (ou peut).
À l'exception de la partie de la persistance du modèle, la plupart des choses semblent être plus faciles que Flask / Django. De plus, pour autant que le didacticiel officiel soit vu, il semble qu'il puisse être utilisé à des fins très diverses. La prochaine fois que je ferai quelque chose moi-même, je l'utiliserai certainement.
Recommended Posts