Share
Flask is een klein en krachtig webraamwerk voor Python. Het is eenvoudig te leren en eenvoudig te gebruiken, waardoor u uw web-app in korte tijd kunt bouwen.
In dit artikel laat ik u zien hoe u een eenvoudige website kunt bouwen met twee statische pagina's met een kleine hoeveelheid dynamische inhoud. Hoewel Flask kan worden gebruikt voor het bouwen van complexe, database-gestuurde websites, is het starten met meestal statische pagina's nuttig om een workflow te introduceren, die we vervolgens kunnen generaliseren om in de toekomst complexere pagina's te maken. Na voltooiing kunt u deze reeks stappen gebruiken om uw volgende Flask-app te starten.
Voordat we kunnen beginnen, moeten we Flask installeren. Omdat systemen variëren, kunnen dingen sporadisch fout gaan tijdens deze stappen. Als ze dat doen, zoals we allemaal doen, hoeft alleen Google de foutmelding te geven of een opmerking achter te laten waarin het probleem wordt beschreven.
Virtualenv is een handige tool die geïsoleerde Python-ontwikkelomgevingen creëert waar je al je ontwikkelingswerk kunt doen.
We zullen virtualenv gebruiken om Flask te installeren. Virtualenv is een handige tool die geïsoleerde Python-ontwikkelomgevingen creëert waar je al je ontwikkelingswerk kunt doen. Stel dat je een nieuwe Python-bibliotheek tegenkomt die je zou willen proberen. Als u het systeem volledig installeert, bestaat het risico dat u andere bibliotheken verknoeit die u mogelijk hebt geïnstalleerd. Gebruik in plaats daarvan virtualenv om een sandbox te maken, waar u de bibliotheek kunt installeren en gebruiken zonder de rest van uw systeem te beïnvloeden. Je kunt deze sandbox blijven gebruiken voor doorlopend ontwikkelingswerk, of je kunt het eenvoudig verwijderen als je het eenmaal hebt gebruikt. Hoe dan ook, uw systeem is overzichtelijk en overzichtelijk.
Het is mogelijk dat uw systeem al virtualenv heeft. Raadpleeg de opdrachtregel en probeer uit te voeren:
$ virtualenv --version
Als u een versienummer ziet, bent u klaar om te gaan en kunt u dit gedeelte "Installatiefles" overslaan. Als het commando niet is gevonden, gebruik dan easy_install of Pip om virtualenv te installeren. Als u Linux of Mac OS X gebruikt, zou een van de volgende voor u moeten werken:
$ sudo easy_install virtualenv
of:
$ sudo pip install virtualenv
of:
$ sudo apt-get install python-virtualenv
Als u geen van deze opdrachten hebt geïnstalleerd, zijn er online verschillende zelfstudies die u laten zien hoe u deze op uw systeem kunt installeren. Als u Windows gebruikt, volg dan de "Installatie-instructies" op deze pagina easy_install actief op uw computer.
Na installatie virtualenv, je kunt een nieuwe geïsoleerde ontwikkelomgeving creëren, zoals:
$ virtualenv flaskapp
Hier, virtualenv maakt een map, flaskapp /, en stelt een schone kopie van Python in die u kunt gebruiken. Het installeert ook de handige pakketbeheerder, Pip.
Voer je nieuw gecreëerde ontwikkelomgeving in en activeer deze zodat je erin kunt werken.
$ cd flaskapp $. bin / activeren
Nu kunt u Flask veilig installeren:
$ pip install Flask
Laten we een paar mappen en bestanden binnenin maken flaskapp / om onze web-app georganiseerd te houden.
... ├── app │ ├── static │ │ ├── css │ │ ├── img │ │ └── js │ ├── sjablonen │ ├── routes.py │ └── README.md
Binnen flaskapp /, maak een map aan, app /, om al uw bestanden te bevatten. Binnen app /, maak een map aan statisch/; hier plaatsen we de afbeeldingen, CSS- en JavaScript-bestanden van onze webapp, dus maak mappen voor elk daarvan, zoals hierboven aangetoond. Maak daarnaast een andere map, templates /, om de websjablonen van de app op te slaan. Maak een leeg Python-bestand routes.py voor de toepassingslogica, zoals URL-routering.
En geen enkel project is compleet zonder een nuttige beschrijving, dus maak een README.md bestand ook.
Nu weten we waar we de activa van ons project kunnen plaatsen, maar hoe komt alles samen? Laten we eens kijken naar "Fig. 1" hieronder om de grote afbeelding te zien:
figuur 1
Accentsconagua
/ om naar zijn startpagina te gaan/ naar een Python-functieWe beginnen met een verzoek van een webbrowser. Een gebruiker typt een URL in de adresbalk. Het verzoek treft routes.py, die code heeft die de URL toewijst aan een functie. De functie vindt een sjabloon in de templates / map, geeft deze weer in HTML en stuurt deze terug naar de browser. De functie kan desgewenst records ophalen uit een database en die informatie doorgeven aan een websjabloon, maar aangezien het hier gaat om voornamelijk statische pagina's in dit artikel, slaan we de interactie met een database voor nu over.
Nu we onze weg weten in de projectstructuur die we hebben ingesteld, gaan we aan de slag met het maken van een startpagina voor onze webapp.
Wanneer u een web-app met een paar pagina's schrijft, wordt het snel vervelend om steeds dezelfde HTML-boilerplate voor elke pagina te schrijven. Verder, wat als u een nieuw element aan uw app moet toevoegen, zoals een nieuw CSS-bestand? Je zou elke afzonderlijke pagina moeten ingaan en deze moeten toevoegen. Dit is tijdrovend en foutgevoelig. Zou het niet fijn zijn als je, in plaats van herhaaldelijk dezelfde HTML-boilerplate te schrijven, je paginalay-out maar één keer zou kunnen definiëren en die lay-out vervolgens zou gebruiken om nieuwe pagina's met hun eigen inhoud te maken? Dit is precies wat websjablonen doen!
Websjablonen zijn gewoon tekstbestanden met variabelen en besturingsstroomstatements (
als ... anders,voor, enz.) en eindigen met een.htmlof.xmluitbreiding.
De variabelen worden vervangen door uw inhoud wanneer de websjabloon wordt geëvalueerd. Websjablonen verwijderen herhalingen, scheiden inhoud van ontwerp en maken uw applicatie gemakkelijker te onderhouden. In andere, eenvoudigere woorden zijn websjablonen geweldig en je zou ze moeten gebruiken! Flask gebruikt de Jinja2-sjabloonengine; laten we zien hoe het te gebruiken.
Als eerste stap zullen we onze pagina-indeling definiëren in een skelet HTML-document layout.html en zet het in de templates / map:
app / templates / layout.html
Kolf App Kolf App
% block content% % endblock%
Dit is gewoon een normaal HTML-bestand ... maar wat is er aan de hand met de % block content% % endblock% een deel? Laten we een ander bestand maken om dit te beantwoorden home.html:
app / templates / home.html
% breidt "layout.html"% % block content% uit% endblock%Welkom bij de Flask-app
Dit is de startpagina voor de Flask-app
Het bestand layout.html definieert een leeg blok, genaamd inhoud, die een kindsjabloon kan invullen. Het bestand home.html is een onderliggende sjabloon die de opmaak erft layout.html en vult het blok "inhoud" in met een eigen tekst. Met andere woorden, layout.html definieert alle gemeenschappelijke elementen van uw site, terwijl elke onderliggende sjabloon deze met zijn eigen inhoud aanpast.
Dit klinkt allemaal cool, maar hoe zien we deze pagina eigenlijk? Hoe kunnen we een URL in de browser typen en "bezoeken" home.html? Laten we teruggaan naar Fig. 1. We hebben zojuist de sjabloon gemaakt home.html en plaatste het in de templates / map. Nu moeten we een URL toewijzen zodat we deze in de browser kunnen bekijken. Laten we ons openstellen routes.py en doe dit:
app / routes.py
uit kolf importeren Kolf, render_template app = Kolf (__ naam__) @ app.route ('/') def home (): retourneer render_template ('home.html') als __name__ == '__main__': app.run (debug = True ) Dat is het voor routes.py. Wat hebben we gedaan?
render_template./ naar de functie huis(). Nu, wanneer iemand deze URL bezoekt, is de functie huis() zal uitvoeren.huis() gebruikt de Flask-functie render_template () om de home.html sjabloon die we zojuist hebben gemaakt van de templates / map naar de browser.rennen() om onze app op een lokale server te gebruiken. We zullen de debug vlag naar waar, zodat we eventuele toepasselijke foutmeldingen kunnen bekijken als er iets misgaat, en zodat de lokale server automatisch opnieuw laadt nadat we wijzigingen in de code hebben aangebracht.We zijn eindelijk klaar om de vruchten van onze arbeid te zien. Ga terug naar de opdrachtregel en typ:
$ python routes.py
Ga naar http: // localhost: 5000 / in uw favoriete webbrowser.
Toen we http: // localhost: 5000 / bezocht, routes.py had code erin, die de URL in kaart bracht / naar de Python-functie huis(). huis() vond de websjabloon home.html in de templates / map, heeft deze in HTML omgezet en teruggestuurd naar de browser, waardoor we het bovenstaande scherm hebben.
Best leuk, maar deze homepage is een beetje saai, toch? Laten we het er beter uit laten zien door wat CSS toe te voegen. Maak een bestand, main.css, binnen static / css /, en voeg deze regels toe:
static / css / main.css
body marge: 0; opvulling: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; kleur: # 444; / * * Maak een donkergrijze kop met een wit logo * / kop background-colour: # 2B2B2B; hoogte: 35 px; breedte: 100%; dekking: .9; margin-bottom: 10px; header h1.logo margin: 0; font-size: 1.7em; kleur: #fff; text-transform: hoofdletters; zweven: links; header h1.logo: hover color: #fff; tekstdecoratie: geen; / * * Centreer de inhoud van het hoofdgedeelte * / .container width: 940px; marge: 0 auto; div.jumbo opvulling: 10px 0 30px 0; achtergrondkleur: #eeeeee; -webkit-border-radius: 6px; -moz-border-radius: 6px; grensradius: 6px; h2 font-size: 3em; margin-top: 40px; text-align: center; letter-spacing: -2 px; h3 font-size: 1.7em; font-gewicht: 100; margin-top: 30px; text-align: center; letter-spacing: -1px; kleur: # 999;
Voeg dit stijlblad toe aan het skeletbestand layout.html zodat de stijl van toepassing is op alle onderliggende sjablonen door deze regel toe te voegen aan de stijl
element:;
We gebruiken de Flask-functie, url_for, om een URL-pad voor te genereren main.css van de statisch map. Na het toevoegen van deze regel, layout.html zou er nu moeten uitzien als:
app / templates / layout.html
fles Kolf App
% block content% % endblock%
Laten we terugschakelen naar de browser en de pagina vernieuwen om het resultaat van de CSS te bekijken.
Dat lijkt er meer op! Nu, wanneer we http: // localhost: 5000 / bezoeken, routes.py wijst nog steeds de URL toe / naar de Python-functie huis(), en huis() vindt nog steeds de websjabloon home.html in de templates / map. Maar sinds we het CSS-bestand hebben toegevoegd main.css, de websjabloon home.html kijkt erin statisch/ om dit item te vinden voordat het wordt gerenderd naar HTML en wordt teruggestuurd naar de browser.
We hebben tot nu toe veel bereikt. We zijn begonnen met Fig. 1 door te begrijpen hoe Flask werkt, en nu hebben we gezien hoe alles eruit komt te zien, door een startpagina te maken voor onze webapp. Laten we verder gaan en een About-pagina maken.
In de vorige sectie hebben we een websjabloon gemaakt home.html door het skeletbestand uit te breiden layout.html. Vervolgens hebben we de URL in kaart gebracht / naar home.html in routes.py dus we kunnen het in de browser bezoeken. We hebben dingen afgemaakt door een beetje styling toe te voegen om het er mooi uit te laten zien. Laten we dat proces opnieuw herhalen om een pagina over onze web-app te maken.
We beginnen met het maken van een websjabloon, about.html, en zet het in de templates / map.
app / templates / about.html
% breidt "layout.html"% % block content% uitWat betreft
Dit is een pagina Over het Intro to Flask-artikel. Zie ik er niet goed uit? Oh stop, je laat me blozen.
% endblock%
Net zoals eerder met home.html, wij breiden uit van layout.html, en vul dan de inhoud blokkeren met onze aangepaste inhoud.
Om deze pagina in de browser te bezoeken, moeten we er een URL naar toewijzen. Doe open routes.py en voeg een andere toewijzing toe:
from flask import Flask, render_template app = Flask (__ name__) @ app.route ('/') def home (): return render_template ('home.html') @ app.route ('/ about') def over (): return render_template ('about.html') als __name__ == '__main__': app.run (debug = True) We hebben de URL in kaart gebracht /wat betreft naar de functie wat betreft(). Nu kunnen we de browser openen en naar http: // localhost: 5000 / about gaan en onze nieuw aangemaakte pagina bekijken.
De meeste websites hebben koppelingen naar hun hoofdpagina's in de kop- of voettekst van het document. Deze links zijn meestal zichtbaar op alle pagina's van een website. Laten we het skeletbestand openen, layout.html. en voeg deze links toe zodat ze worden weergegeven in alle onderliggende sjablonen. Laten we specifiek een toevoegen
app / templates / layout.html
......Kolf App
Nogmaals gebruiken we de Flask-functie url_for om URL's te genereren.
Voeg vervolgens nog meer stijlregels toe aan main.css om deze nieuwe navigatie-elementen er goed uit te laten zien:
app / static / css / main.css
... / * * Navigatiekoppelingen inline weergeven * / .menu float: right; margin-top: 8px; .menu li display: inline; .menu li + li margin-left: 35px; .menu li a color: # 999; tekstdecoratie: geen;
Open ten slotte de browser en vernieuw http: // localhost: 5000 / om onze nieuw toegevoegde navigatielinks te bekijken.
In de loop van dit artikel hebben we een eenvoudige web-app gebouwd met twee, meestal statische, pagina's. Daarbij hebben we een workflow geleerd die kan worden gebruikt om complexere websites met dynamische inhoud te maken. Flask is een eenvoudig maar krachtig raamwerk waarmee u efficiënt web-apps kunt bouwen. Ga je gang - bekijk het!
