Étape 5: Amélioration de votre page Web
1. créer les répertoires nécessaires et les dossiers
mkdir templates cd templates touch home_page.html atom home_page.html cd .. mkdir static cd static mkdir js cd js touch home_page.js atom home_page.js cd ../..
Ce seront les fichiers HTML et JavaScript pour notre page d’accueil. Ces répertoires sont les noms standards dans ballon et je recommande que vous les utilisez, mais ils peuvent être spécifiées pour des noms différents, tout en créant l’application à l’étape précédente. Vous pouvez maintenant éditer ces fichiers à afficher que quelque chose vous le voulez, voici et exemple.
home_page.js :
alert('Testing JS'); // Simple alert to determine if file was imported
home_page.html :
<html> <body> <h1>Our Home Page</h1> A list <ul> {% for i in range(num) %} <li>bullet {{i}}</li> {% endfor %} </ul> </body> <script type='text/javascript' src="{{url_for('static', filename='js/home_page.js')}}"></script> </html>
Vous pouvez voir le résultat de ceci dans la photo ci-dessus. Notez l’utilisation de doubles accolades et curly brace pour cent, ceux-ci sont utilisés pour la création de modèles. Ballon utilise un cadre appelé « Jinja2 » pour ce faire, qui utilise ces symboles. Création de modèles vous permet de passer des variables à la page html et de contrôler à quoi ressemble avant d’être envoyé à un navigateur. C’est très puissant, et vous pouvez en savoir plus ici
2. modifier le contrôleur de
Le contrôleur que vous faites précédemment, dans le home/views.py, il faut changer pour revenir à un affichage pour ce modèle, plutôt qu’une chaîne. Ceci est accompli à l’aide de « render_template() » du ballon, que vous pouvez considérer comme retourner une page html. Voici ce que votre fichier home/views.py devrait ressembler maintenant.
<p>from flask import Blueprint, render_template</p><p>home_view = Blueprint('home_view', __name__)</p> def display_home_page(): return render_template('home_page.html', num=10)
Vous devriez maintenant être en mesure de modifier le paramètre donné à render_template() et le fichier html pour contrôler ce qui est montré.