Share
Flask er et lite og kraftig webramme for Python. Det er lett å lære og enkelt å bruke, slik at du kan bygge din webapp på kort tid.
I denne artikkelen vil jeg vise deg hvordan du bygger et enkelt nettsted, som inneholder to statiske sider med en liten mengde dynamisk innhold. Mens flasken kan brukes til å bygge komplekse databasedrevne nettsteder, starter med det meste av statiske sider, det vil være nyttig å introdusere en arbeidsflyt, som vi deretter kan generalisere for å gjøre mer komplekse sider i fremtiden. Når du er ferdig, kan du bruke denne fremgangsmåten for å hoppe opp neste Flask-app.
Før du begynner, må vi installere Flask. Fordi systemene varierer, kan ting sporadisk gå galt under disse trinnene. Hvis de gjør, som vi alle gjør, bare Google feilmeldingen eller la en kommentar som beskriver problemet.
Virtualenv er et nyttig verktøy som skaper isolerte Python utviklingsmiljøer hvor du kan gjøre alt ditt utviklingsarbeid.
Vi bruker virtualenv til å installere Flask. Virtualenv er et nyttig verktøy som skaper isolerte Python utviklingsmiljøer hvor du kan gjøre alt ditt utviklingsarbeid. Anta at du kommer over et nytt Python-bibliotek som du vil prøve. Hvis du installerer det hele systemet, er det fare for å slå opp andre biblioteker som du kanskje har installert. I stedet bruker du virtualenv til å lage en sandkasse, der du kan installere og bruke biblioteket uten å påvirke resten av systemet. Du kan fortsette å bruke denne sandkassen for pågående utviklingsarbeid, eller du kan bare slette det når du er ferdig med å bruke det. Uansett, ditt system forblir organisert og rotfritt.
Det er mulig at systemet allerede har virtualenv. Se kommandolinjen, og prøv å kjøre:
$ virtualenv - versjon
Hvis du ser et versjonsnummer, er det bra å gå, og du kan hoppe over til denne "Installer flaske" delen. Hvis kommandoen ikke ble funnet, bruk easy_install eller pip å installere virtualenv. Hvis du kjører Linux eller Mac OS X, bør ett av følgende fungere for deg:
$ sudo easy_install virtualenv
eller:
$ sudo pip installere virtualenv
eller:
$ sudo apt-get install python-virtualenv
Hvis du ikke har noen av disse kommandoene installert, er det flere opplæringsprogrammer på Internett, som viser deg hvordan du installerer det på systemet. Hvis du kjører Windows, følg "Installasjonsinstruksjoner" på denne siden for å få easy_install opp og kjører på datamaskinen din.
Etter installasjon virtualenv, du kan lage et nytt, isolert utviklingsmiljø, slik som:
$ virtualenv flaskapp
Her, virtualenv lager en mappe, flaskapp /, og setter opp en ren kopi av Python inni for deg å bruke. Det installerer også den praktiske pakkebehandleren, pip.
Skriv inn ditt nyskapede utviklingsmiljø og aktiver det slik at du kan begynne å jobbe i den.
$ cd flaskapp $. bin / aktivere
Nå kan du trygt installere Flask:
$ pip installasjonskolbe
La oss lage et par mapper og filer innenfor flaskapp / for å holde vår web-app organisert.
... ├── app │ ├── statisk │ │ ├── css │ │ ── img │ │ └── js │ ├── maler │ ├── routes.py │ └── README.md
Innenfor flaskapp /, lag en mappe, app /, å inneholde alle filene dine. Innsiden app /, lag en mappe statisk /; Det er her vi skal legge inn våre webapps bilder, CSS og JavaScript-filer, så opprett mapper for hver av dem, som vist ovenfor. I tillegg oppretter du en annen mappe, templates /, for å lagre appens webmaler. Opprett en tom Python-fil routes.py for applikasjonslogikken, for eksempel URL-ruting.
Og ingen prosjekt er fullført uten en nyttig beskrivelse, så opprett en README.md fil også.
Nå vet vi hvor du skal sette prosjektets eiendeler, men hvordan knytter alt sammen? La oss ta en titt på "Fig. 1" nedenfor for å se det store bildet:
Figur 1
Accentsconagua
/ å gå til hjemmesiden sin/ til en Python-funksjonVi starter med en forespørsel utstedt fra en nettleser. En bruker skriver inn en URL i adressefeltet. Forespørselen treffer routes.py, som har kode som kartlegger nettadressen til en funksjon. Funksjonen finner en mal i templates / mappe, gjør det til HTML, og sender det tilbake til nettleseren. Funksjonen kan eventuelt hente poster fra en database og deretter sende den informasjonen til en webmal, men siden vi arbeider med det meste av statiske sider i denne artikkelen, hopper vi sammen med en database for nå.
Nå som vi kjenner vår vei rundt prosjektstrukturen vi setter opp, la oss komme i gang med å lage en hjemmeside for vår webapp.
Når du skriver en web-app med et par sider, blir det raskt irriterende å skrive samme HTML-boilerplate igjen og igjen for hver side. Hva om du trenger å legge til et nytt element i appen din, for eksempel en ny CSS-fil? Du må gå inn på hver enkelt side og legge den inn. Dette er tidkrevende og feilaktig. Ville det ikke vært fint om du i stedet for gjentatte ganger skrive den samme HTML-boilerplaten, kan du definere sidelayoutet ditt bare en gang, og deretter bruke det oppsettet til å lage nye sider med eget innhold? Dette er akkurat det webmaler gjør!
Webmaler er bare tekstfiler som inneholder variabler og kontrollflyt-setninger (
hvis ... annet,til, etc), og avslutt med en.htmleller.xmlforlengelse.
Variablene erstattes med innholdet ditt når webmalen evalueres. Webmaler fjerner repetisjon, skiller innhold fra design, og gjør søknaden enklere å vedlikeholde. I andre enklere ord, webmaler er kjempebra, og du bør bruke dem! Kolbe bruker Jinja2-malmotoren; la oss se hvordan du bruker den.
Som et første skritt, definerer vi sidelayout i et skjelett-HTML-dokument layout.html og legg det inne i templates / mappe:
app / templates / layout.html
Flask App Flask App
% blokkinnhold% % endblock%
Dette er bare en vanlig HTML-fil ... men hva skjer med % blokkinnhold% % endblock% del? For å svare på dette, la oss lage en annen fil home.html:
app / templates / home.html
% utvider "layout.html"% % blokkinnhold%% endblock%Velkommen til Flask-appen
Dette er hjemmesiden for Flask-appen
Filen layout.html definerer en tom blokk, oppkalt innhold, at en barnemal kan fylle ut. Filen home.html er en barnemaler som arver markeringen fra layout.html og fyller inn "innhold" -blokken med sin egen tekst. Med andre ord, layout.html definerer alle de vanlige elementene på nettstedet ditt, mens hver barnemal tilpasser den med eget innhold.
Alt dette høres kult ut, men hvordan ser vi faktisk denne siden? Hvordan kan vi skrive inn en nettadresse i nettleseren og "besøke" home.html? La oss se tilbake til figur 1. Vi har nettopp opprettet malen home.html og plasserte den i templates / mappe. Nå må vi kartlegge en URL til den slik at vi kan se den i nettleseren. La oss åpne opp routes.py og gjør dette:
app / routes.py
fra flaskeimport Flask, render_template app = Flask (__ name__) @ app.route ('/') def home (): return render_template ('home.html') hvis __name__ == '__main__': app.run (debug = True ) Det er det for routes.py. Hva gjorde vi?
render_template./ til funksjonen hjem(). Nå, når noen besøker denne nettadressen, er funksjonen hjem() vil utføre.hjem() bruker kolbefunksjonen render_template () å gjengi home.html mal vi nettopp opprettet fra templates / mappe til nettleseren.løpe() å kjøre vår app på en lokal server. Vi stiller inn debug flagg til ekte, slik at vi kan se eventuelle feilmeldinger hvis noe går galt, og slik at den lokale serveren automatisk oppdateres etter at vi har endret koden.Vi er endelig klar til å se fruktene av vårt arbeid. Gå tilbake til kommandolinjen, og skriv:
$ python routes.py
Besøk http: // localhost: 5000 / i din favoritt nettleser.
Da vi besøkte http: // localhost: 5000 /, routes.py hadde kode i den, som mappede nettadressen / til Python-funksjonen hjem(). hjem() fant nettmalen home.html i templates / mappe, gjengitt den til HTML, og sendte den tilbake til nettleseren, noe som gir oss skjermen ovenfor.
Ganske pent, men denne hjemmesiden er litt kjedelig, ikke sant? La oss få det til å se bedre ut ved å legge til noen CSS. Lag en fil, main.css, innenfor statisk / css /, og legg til disse reglene:
statisk / css / main.css
kropp margin: 0; polstring: 0; font-familie: "Helvetica Neue", Helvetica, Arial, sans-serif; farge: # 444; / * * Lag mørkegrå topptekst med en hvit logo * / header bakgrunnsfarge: # 2B2B2B; høyde: 35px; bredde: 100%; opasitet: .9; margin-bunn: 10px; header h1.logo margin: 0; skriftstørrelse: 1,7em; farge: #fff; tekst-transformer: store bokstaver; flyte: venstre; header h1.logo: svever color: #fff; tekst-dekorasjon: ingen; / * * Senter kroppens innhold * / .container width: 940px; margin: 0 auto; div.jumbo polstring: 10px 0 30px 0; bakgrunnsfarge: #eeeeee; -webkit-grense-radius: 6px; -moz-grense-radius: 6px; border-radius: 6px; h2 font-size: 3em; margin-topp: 40px; tekst-align: center; brevavstand: -2px; h3 font-size: 1.7em; font-weight: 100; margin-topp: 30px; tekst-align: center; brevavstand: -1px; farge: # 999;
Legg til denne stilarket i skjelettfilen layout.html slik at stylingen gjelder alle sine barnemaler ved å legge denne linjen til sin
element:;
Vi bruker kolbefunksjonen, url_for, å generere en URL-sti for main.css fra statisk mappe. Etter å ha lagt til denne linjen, layout.html skal nå se ut som:
app / templates / layout.html
Flask Flask App
% blokkinnhold% % endblock%
La oss bytte tilbake til nettleseren og oppdatere siden for å se resultatet av CSS.
Det er bedre! Nå, når vi besøker http: // localhost: 5000 /, routes.py kartlegger fortsatt nettadressen / til Python-funksjonen hjem(), og hjem() finner fremdeles nettmalen home.html i templates / mappe. Men siden vi la til CSS-filen main.css, nettmalen home.html ser inn statisk / for å finne denne aktiva, før du gjengir HTML og blir sendt tilbake til nettleseren.
Vi har oppnådd mye så langt. Vi startet med figur 1 ved å forstå hvordan Flask fungerer, og nå har vi sett hvordan alt går ut, ved å lage en hjemmeside for vår web-app. La oss gå videre og lage en Om side.
I den forrige delen opprettet vi en webmal home.html ved å utvide skjelettfilen layout.html. Vi kartlegger deretter nettadressen / til home.html i routes.py så vi kunne besøke den i nettleseren. Vi ferdig med ting ved å legge til noe styling for å gjøre det ser pent ut. La oss gjenta denne prosessen på nytt for å lage en om side for vår webapp.
Vi begynner med å lage en webmal, about.html, og sette den inne i templates / mappe.
app / templates / about.html
% utvider "layout.html"% % blokkinnhold%Handle om
Dette er en Om side for Intro til kolbe artikkelen. Ser jeg ikke bra ut? Å stoppe, du får meg til å rødme.
% endblock%
Akkurat som før med home.html, vi strekker seg fra layout.html, og fyll deretter på innhold blokkere med vårt tilpassede innhold.
For å kunne besøke denne siden i nettleseren, må vi kartlegge en URL til den. Åpne opp routes.py og legg til en annen kartlegging:
fra kolbeimport Kolbe, render_template app = Kolbe (__ name__) @ app.route ('/') def home (): return render_template ('home.html') @ app.route ('/ om') def om return render_template ('about.html') hvis __name__ == '__main__': app.run (debug = True) Vi har kartlagt nettadressen /handle om til funksjonen handle om(). Nå kan vi åpne nettleseren og gå til http: // localhost: 5000 / om og se vår nyopprettede side.
De fleste nettsteder har lenker til hovedsidene i overskriften eller bunnteksten til dokumentet. Disse koblingene er vanligvis synlige på alle sider av et nettsted. La oss åpne opp skjelettfilen, layout.html. og legg til disse koblingene slik at de dukker opp i alle barnemaler. Spesielt, la oss legge til en
app / templates / layout.html
......Flask App
Igjen bruker vi kolbefunksjonen url_for å generere nettadresser.
Deretter legger du til noen flere stilregler til main.css for å gjøre disse nye navigasjonselementene ser bra ut:
app / statisk / css / main.css
... / * * Vis navigeringslinjene inline * / .menu float: right; margin-topp: 8px; .menu li display: inline; .menu li + li margin-left: 35px; .menu li a color: # 999; tekst-dekorasjon: ingen;
Til slutt åpner du nettleseren og oppdaterer http: // localhost: 5000 / for å se våre nylig lagt til navigeringskoblinger.
I løpet av denne artikkelen har vi bygget en enkel webapp med to, for det meste statiske sider. Dermed lærte vi en arbeidsflyt som kan brukes til å lage mer komplekse nettsteder med dynamisk innhold. Flask er et enkelt, men kraftig rammeverk som gjør det mulig å effektivt bygge webapps. Gå videre - sjekk det ut!
