Une introduction au framework Flask de Python

Flask est un framework web petit et puissant pour Python. Il est facile à apprendre et à utiliser, vous permettant de créer votre application Web en peu de temps..

Dans cet article, je vais vous montrer comment créer un site Web simple, contenant deux pages statiques avec une petite quantité de contenu dynamique. Bien que Flask puisse être utilisé pour créer des sites Web complexes basés sur des bases de données, il est utile de commencer par des pages essentiellement statiques pour introduire un flux de travail, que nous pourrons ensuite généraliser pour créer des pages plus complexes à l'avenir. À la fin, vous pourrez utiliser cette séquence d’étapes pour relancer votre prochaine application Flask..

Installation de la fiole

Avant de commencer, nous devons installer Flask. Étant donné que les systèmes varient, il peut arriver que des problèmes se produisent lors de ces étapes. Si c'est le cas, comme nous le faisons tous, il suffit de faire une recherche Google ou de laisser un commentaire décrivant le problème..

Installez virtualenv

Virtualenv est un outil utile pour créer des environnements de développement Python isolés dans lesquels vous pouvez effectuer tout votre travail de développement..

Nous utiliserons virtualenv pour installer Flask. Virtualenv est un outil utile pour créer des environnements de développement Python isolés dans lesquels vous pouvez effectuer tout votre travail de développement. Supposons que vous rencontriez une nouvelle bibliothèque Python que vous souhaitez essayer. Si vous l'installez au niveau du système, vous risquez de gâcher les autres bibliothèques que vous avez éventuellement installées. A la place, utilisez virtualenv pour créer un bac à sable sur lequel vous pouvez installer et utiliser la bibliothèque sans affecter le reste de votre système. Vous pouvez continuer à utiliser ce bac à sable pour les travaux de développement en cours ou simplement le supprimer une fois que vous avez fini de l'utiliser. Dans les deux cas, votre système reste organisé et sans encombrement..

Il est possible que votre système ait déjà virtualenv. Reportez-vous à la ligne de commande et essayez de lancer:

$ virtualenv --version

Si vous voyez un numéro de version, vous pouvez y aller et vous pouvez passer à cette section "Installer Flask". Si la commande n'a pas été trouvée, utilisez easy_install ou pépin installer virtualenv. Si vous utilisez Linux ou Mac OS X, l’une des opérations suivantes devrait fonctionner pour vous:

$ sudo easy_install virtualenv

ou:

$ sudo pip installer virtualenv

ou:

$ sudo apt-get install python-virtualenv

Si aucune de ces commandes n'est installée, plusieurs tutoriels en ligne vous montreront comment l'installer sur votre système. Si vous utilisez Windows, suivez les "Instructions d'installation" de cette page pour obtenir easy_install en marche sur votre ordinateur.

Installer le flacon

Après l'installation virtualenv, vous pouvez créer un nouvel environnement de développement isolé, comme suit:

$ virtualenv flaskapp

Ici, virtualenv crée un dossier, flaskapp /, et met en place une copie vierge de Python pour que vous puissiez l'utiliser. Il installe également le gestionnaire de paquets pratique, pépin.

Entrez votre environnement de développement nouvellement créé et activez-le pour pouvoir commencer à travailler dans cet environnement..

$ cd flaskapp $. bin / activer

Maintenant, vous pouvez installer Flask en toute sécurité:

$ pip install Flask

Mise en place de la structure du projet

Créons quelques dossiers et fichiers au sein de flaskapp / garder notre application web organisée.

… Dans l'appli statique, css, dans l'img, js, dans les modèles, avec routes.py, dans le fichier LISEZMOI.md

Dans flaskapp /, créer un dossier, app /, pour contenir tous vos fichiers. À l'intérieur app /, créer un dossier statique/; C’est là que nous allons placer les images, les CSS et les fichiers JavaScript de notre application Web. Créez donc des dossiers pour chacun d’entre eux, comme indiqué ci-dessus. De plus, créez un autre dossier, modèles /, pour stocker les modèles Web de l'application. Créer un fichier Python vide routes.py pour la logique d'application, telle que le routage d'URL.

Et aucun projet n'est complet sans une description utile, alors créez un LISEZMOI.md déposer aussi bien.

Maintenant, nous savons où placer les actifs de notre projet, mais comment tout se relie-t-il? Jetons un coup d'œil à la "Fig. 1" ci-dessous pour avoir une vue d'ensemble:

Fig. 1

Un utilisateur émet une demande pour l'URL racine d'un domaine. / aller à sa page d'accueil
routes.py mappe l'URL / à une fonction Python
La fonction Python trouve un modèle Web vivant dans le modèles / dossier.
Un modèle Web recherchera dans le statique/ dossier pour toutes les images, CSS ou JavaScript dont il a besoin lors du rendu au format HTML
Le HTML rendu est renvoyé à routes.py
routes.py renvoie le code HTML au navigateur

Nous commençons par une demande émise par un navigateur Web. Un utilisateur tape une URL dans la barre d'adresse. La demande frappe routes.py, qui a un code qui mappe l'URL à une fonction. La fonction trouve un modèle dans le modèles / dossier, le rend au format HTML et le renvoie au navigateur. La fonction peut éventuellement extraire des enregistrements d'une base de données, puis transmettre ces informations à un modèle Web, mais comme nous traitons principalement de pages statiques dans cet article, nous allons ignorer l'interaction avec une base de données pour l'instant..

Maintenant que nous connaissons la structure de projet que nous avons configurée, commençons par créer une page d'accueil pour notre application Web..

Créer une page d'accueil

Lorsque vous écrivez une application Web avec quelques pages, il devient rapidement gênant d'écrire le même passe-partout HTML, encore et encore, pour chaque page. De plus, si vous avez besoin d'ajouter un nouvel élément à votre application, tel qu'un nouveau fichier CSS? Il vous faudrait aller dans chaque page et l'ajouter. Cela prend du temps et est source d'erreurs. Ne serait-il pas intéressant de ne pas définir une seule fois la mise en page au lieu d'écrire de manière répétée le même modèle HTML, puis d'utiliser cette mise en page pour créer de nouvelles pages avec leur propre contenu? C'est exactement ce que font les modèles Web!

Les modèles Web sont simplement des fichiers texte contenant des variables et des instructions de flux de contrôle (sinon, pour, etc), et se termine par un .html ou .xml extension.

Les variables sont remplacées par votre contenu lorsque le modèle Web est évalué. Les modèles Web suppriment la répétition, séparent le contenu de la conception et facilitent la maintenance de votre application. En d'autres termes, les modèles Web sont géniaux et vous devriez les utiliser! Flask utilise le moteur de modèle Jinja2; Voyons comment l'utiliser.

Dans un premier temps, nous allons définir notre mise en page dans un document HTML squelette layout.html et le mettre à l'intérieur du modèles / dossier:

app / templates / layout.html

   Flask App     Flask App
 
   % block content% % endblock%

C’est simplement un fichier HTML classique… mais que se passe-t-il avec le % block content% % endblock% partie? Pour répondre à cela, créons un autre fichier home.html:

app / templates / home.html

% extend "layout.html"% % le contenu du bloc%  Bienvenue sur l'application Flask
 
Ceci est la page d'accueil de l'application Flask
 
 % endblock%

Le fichier layout.html définit un bloc vide, nommé contenu, qu'un modèle enfant peut remplir. Le fichier home.html est un modèle enfant qui hérite du balisage de layout.html et remplit le bloc "contenu" avec son propre texte. En d'autres termes, layout.html définit tous les éléments communs de votre site, chaque modèle enfant le personnalisant avec son propre contenu.

Tout cela semble bien, mais comment voyons-nous cette page? Comment pouvons-nous taper une URL dans le navigateur et "visiter" home.html? Reportons-nous à la Fig. 1. Nous venons de créer le modèle home.html et placé dans le modèles / dossier. Nous devons maintenant mapper une adresse URL pour pouvoir l'afficher dans le navigateur. Ouvrons routes.py et faire ceci:

app / routes.py

depuis une fiole d'importation Flask, render_template app = Flask (__ name__) @ app.route ('/') def home (): renvoie render_template ('home.html') si __name__ == '__main__': app.run (debug = True) )

Ça y est pour routes.py. Qu'avons-nous fait?

Premier. nous avons importé la classe Flask et une fonction render_template.
Ensuite, nous avons créé une nouvelle instance de la classe Flask.
Nous avons ensuite mappé l'URL / à la fonction maison(). Maintenant, quand quelqu'un visite cette URL, la fonction maison() va exécuter.
La fonction maison() utilise la fonction Flask render_template () rendre le home.html modèle que nous venons de créer à partir de la modèles / dossier dans le navigateur.
Enfin, nous utilisons courir() pour exécuter notre application sur un serveur local. Nous allons définir le déboguer drapeau à vrai, afin que nous puissions afficher tous les messages d'erreur applicables en cas de problème et que le serveur local se recharge automatiquement une fois les modifications apportées au code.

Nous sommes enfin prêts à voir les fruits de notre travail. Revenez à la ligne de commande et tapez:

$ python routes.py

Visitez http: // localhost: 5000 / dans votre navigateur Web préféré..

Lorsque nous avons visité http: // localhost: 5000 /, routes.py avait du code, qui mappait l'URL / à la fonction Python maison(). maison() trouvé le modèle Web home.html dans le modèles / dossier, l'a rendu au format HTML et l'a renvoyé au navigateur, nous donnant l'écran ci-dessus.

Très chouette, mais cette page d'accueil est un peu ennuyeuse, n'est-ce pas? Rendons cela mieux en ajoutant du CSS. Créer un fichier, main.css, dans statique / css /, et ajoutez ces règles:

static / css / main.css

corps marge: 0; rembourrage: 0; famille de polices: "Helvetica Neue", Helvetica, Arial, sans-serif; couleur: # 444;  / * * Créer un en-tête gris foncé avec un logo blanc * / header background-color: # 2B2B2B; hauteur: 35px; largeur: 100%; opacité: 0,9; marge inférieure: 10px;  en-tête h1.logo margin: 0; taille de la police: 1.7em; couleur: #fff; text-transform: majuscule; float: gauche;  en-tête h1.logo: hover color: #fff; texte-décoration: aucun;  / * * Centrer le contenu du corps * / .container width: 940px; marge: 0 auto;  div.jumbo padding: 10px 0 30px 0; couleur de fond: #eeeeee; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;  h2 font-size: 3em; marge supérieure: 40 px; text-align: center; espacement des lettres: -2px;  h3 font-size: 1.7em; poids de la police: 100; marge supérieure: 30px; text-align: center; espacement des lettres: -1px; couleur: # 999;

Ajouter cette feuille de style au fichier squelette layout.html afin que le style s'applique à tous ses modèles enfants en ajoutant cette ligne à sa élément:

Nous utilisons la fonction Flask, url_for, générer un chemin d'URL pour main.css du statique dossier. Après avoir ajouté cette ligne dans, layout.html devrait maintenant ressembler à:

app / templates / layout.html

   Ballon      Flask App
 
   % block content% % endblock%

Revenons au navigateur et actualisons la page pour afficher le résultat du CSS.

C'est plus comme ça! Maintenant, quand nous visitons http: // localhost: 5000 /, routes.py toujours mapper l'URL / à la fonction Python maison(), et maison() trouve toujours le modèle Web home.html dans le modèles / dossier. Mais, depuis que nous avons ajouté le fichier CSS main.css, le modèle web home.html regarde dans statique/ pour trouver cet actif avant de passer au format HTML et de le renvoyer au navigateur.

Nous avons accompli beaucoup jusqu'à présent. Nous avons commencé par illustrer le fonctionnement de Flask à la figure 1 et nous avons maintenant vu comment tout cela se déroulait en créant une page d'accueil pour notre application Web. Passons à autre chose et créons une page A propos de.

Créer une page à propos

Dans la section précédente, nous avons créé un modèle Web. home.html en étendant le fichier squelette layout.html. Nous avons ensuite mappé l'URL / à home.html dans routes.py afin que nous puissions le visiter dans le navigateur. Nous avons terminé en ajoutant un peu de style pour le rendre joli. Répétons ce processus pour créer une page à propos de notre application Web..

Nous allons commencer par créer un modèle Web, about.html, et le mettre à l'intérieur du modèles / dossier.

app / templates / about.html

% extend "layout.html"% % le contenu du bloc%

Sur

Ceci est une page A propos de l'article Intro to Flask. Je n'ai pas l'air bien? Oh arrête, tu me fais rougir.

% endblock%

Comme avant avec home.html, nous étendons de layout.html, puis remplissez le contenu bloquer avec notre contenu personnalisé.

Afin de visiter cette page dans le navigateur, nous devons y mapper une URL. S'ouvrir routes.py et ajoutez un autre mapping:

depuis une bouteille importation Flask, render_template app = Flask (__ name__) @ app.route ('/') def home (): retour rend_template ('home.html') @ app.route ('/ about') def about (): return render_template ('about.html') si __name__ == '__main__': app.run (debug = True)

Nous avons mappé l'URL /sur à la fonction sur(). Maintenant, nous pouvons ouvrir le navigateur et aller à http: // localhost: 5000 / about et consulter notre page nouvellement créée.

Ajout de navigation

La plupart des sites Web ont des liens vers leurs pages principales dans l'en-tête ou le pied de page du document. Ces liens sont généralement visibles sur toutes les pages d'un site Web. Ouvrons le fichier squelette, layout.html. et ajoutez ces liens afin qu’ils apparaissent dans tous les modèles enfants. Plus précisément, ajoutons un

élément à l'intérieur du élément:

app / templates / layout.html

…   Flask App
   Accueil
 Sur
 
  
 …

Encore une fois, nous utilisons la fonction Flask url_for générer des URL.

Ensuite, ajoutez quelques règles de style supplémentaires à main.css pour rendre ces nouveaux éléments de navigation jolis:

app / static / css / main.css

… / * * Afficher les liens de navigation en ligne * / .menu float: right; marge supérieure: 8px;  .menu li display: inline;  .menu li + li marge gauche: 35px;  .menu li a color: # 999; texte-décoration: aucun;

Enfin, ouvrez le navigateur et actualisez http: // localhost: 5000 / pour voir nos nouveaux liens de navigation..

Conclusion

Au cours de cet article, nous avons construit une application Web simple avec deux pages, principalement statiques. Ce faisant, nous avons appris un flux de travail qui peut être utilisé pour créer des sites Web plus complexes avec un contenu dynamique. Flask est un framework simple mais puissant qui vous permet de créer efficacement des applications Web. Allez-y - allez y jeter un coup d'œil!

Code