Stap 5: Verbetering van uw webpagina
1. Maak de benodigde directories en mappen
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 ../..
Deze zullen de HTML- en JavaScript-bestanden voor onze home page. Deze mappen zijn de standaard namen in de kolf en ik adviseer dat je ze gebruiken, maar ze naar verschillende namen kunnen worden opgegeven tijdens het maken van de toepassing in de vorige stap. U kunt nu het bewerken van deze bestanden om display die iets u wilt, hieronder is en voorbeeld.
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> Hier ziet u het resultaat van dit in de bovenstaande foto. Opmerking het gebruik van de dubbele accolades en krullend brace procent, deze worden gebruikt voor templating. Kolf gebruikt een kader genaamd "Jinja2" hiervoor, die gebruik maakt van deze symbolen. Templating kunt u variabelen doorgeven aan de HTML-pagina en bedienen is wat het lijkt erop dat alvorens wordt verzonden naar een browser. Dit is zeer krachtig, en u kunt meer lezen hier
2. verandering controller
De controller die u eerder, in home/views.py gemaakt, dient te worden gewijzigd om terug te keren een display voor deze sjabloon, in plaats van een tekenreeks. Dit wordt bereikt met het gebruik van "render_template()" uit de maatkolf, die je bedenken kunt als een html-pagina geretourneerd. Hieronder is wat uw home/views.py bestand ziet er als nu.
<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) U moet nu kunnen bewerken van de parameter gegeven aan render_template() en het HTML-bestand om te bepalen wat er getoond wordt.
