Share
Flask este un cadru web mic și puternic pentru Python. Este ușor de învățat și ușor de utilizat, permițându-vă să vă construiți aplicația web într-un timp scurt.
În acest articol, vă vom arăta cum să construiți un site web simplu, care să conțină două pagini statice cu o cantitate mică de conținut dinamic. In timp ce Flask pot fi folosite pentru construirea de site-uri web complexe, baze de date bazate, începând cu cea mai mare parte pagini statice va fi util să se introducă un flux de lucru, care apoi putem generaliza pentru a face pagini mai complexe în viitor. După finalizare, veți putea utiliza această secvență de pași pentru a începe să lansați următoarea aplicație Flask.
Înainte de a începe, trebuie să instalați Flask. Deoarece sistemele variază, lucrurile pot merge în mod sporadic în timpul acestor pași. Dacă o fac, așa cum facem cu toții, doar Google trimite mesajul de eroare sau lasă un comentariu care descrie problema.
Virtualenv este un instrument util care creează medii izolate de dezvoltare Python unde puteți face toate lucrările de dezvoltare.
Vom folosi virtualenv pentru a instala Flask. Virtualenv este un instrument util care creează medii izolate de dezvoltare Python unde puteți face toate lucrările de dezvoltare. Să presupunem că întâlniți o nouă bibliotecă Python pe care doriți să o încercați. Dacă instalați sistemul la scară largă, există riscul de a împiedica alte biblioteci pe care le-ați instalat. În schimb, utilizați virtualenv pentru a crea o cutie de nisip, unde puteți instala și utiliza biblioteca fără a afecta restul sistemului. Puteți continua să utilizați acest spațiu de lucru pentru activități de dezvoltare în curs sau puteți să îl ștergeți pur și simplu după ce ați terminat de utilizat. În orice caz, sistemul dvs. rămâne organizat și fără aglomerație.
Este posibil ca sistemul dvs. să aibă deja virtuale. Consultați linia de comandă și încercați să rulați:
$ virtualenv --versiune
Dacă vedeți un număr de versiune, sunteți bine să mergeți și puteți trece la această secțiune "Instalare Flacără". Dacă comanda nu a fost găsită, utilizați easy_install sau țâfnă pentru a instala virtualenv. Dacă rulează Linux sau Mac OS X, una dintre următoarele ar trebui să funcționeze pentru dvs.:
$ sudo easy_install virtualenv
sau:
$ sudo pip instalare virtualenv
sau:
$ sudo apt-get instalează python-virtualenv
Dacă nu aveți nici una dintre aceste comenzi instalate, există mai multe programe de instruire online, care vă vor arăta cum să le instalați în sistemul dvs. Dacă executați Windows, urmați "Instrucțiunile de instalare" din această pagină pentru a obține easy_install pornirea și funcționarea pe computer.
După instalare virtualenv, puteți crea un nou mediu de dezvoltare izolat, cum ar fi:
$ virtualenv flaskapp
Aici, virtualenv creează un dosar, flaskapp /, și stabilește o copie curată a lui Python în interior pentru a fi folosită. De asemenea, instalează managerul de pachete la îndemână, țâfnă.
Introduceți noul mediu de dezvoltare creat și activați-l astfel încât să puteți începe să lucrați în cadrul acestuia.
$ cd flaskapp $. bin / activa
Acum, puteți instala în condiții de siguranță Flask:
$ pip instalează balonul
Să creăm câteva dosare și fișiere înăuntru flaskapp / pentru a ne organiza aplicația web.
... ├── app │ ├── statică │ │ ├── css │ │ ├── img │ │ └── js │ ├── șabloane │ ├── routes.py │ └── README.md
În flaskapp /, creați un dosar, app /, pentru a conține toate fișierele. Interior app /, creați un dosar static/; acesta este locul în care vom pune imaginile, CSS și fișierele JavaScript ale aplicației web, astfel încât să creați dosare pentru fiecare dintre acestea, după cum sa arătat mai sus. În plus, creați un alt dosar, template-uri /, pentru a stoca șabloanele web ale aplicației. Creați un fișier Python gol routes.py pentru logica aplicației, cum ar fi rutarea adreselor URL.
Și niciun proiect nu este complet fără o descriere utilă, așa că creați un README.md fișierul de asemenea.
Acum, știm unde să punem activitățile proiectului nostru, dar cum se conectează totul împreună? Să aruncăm o privire la "figura 1" de mai jos pentru a vedea imaginea de ansamblu:
Figura 1
Accentsconagua
/ pentru a merge la pagina de pornire/ la o funcție PythonÎncepem cu o cerere emisă de un browser web. Un utilizator introduce o adresă URL în bara de adrese. Cererea apasă routes.py, care are un cod care hartă URL-ul la o funcție. Funcția găsește un șablon în template-uri / folder, îl transformă în HTML și îl trimite înapoi la browser. Funcția poate prelua în mod opțional înregistrări dintr-o bază de date și apoi transmite aceste informații la un șablon de web, dar din moment ce avem de-a face cu pagini statice cea mai mare parte în acest articol, vom bascula interacționa cu o bază de date de acum.
Acum, când ne cunoaștem modul în care am creat structura proiectului, să începem să realizăm o pagină de pornire pentru aplicația noastră web.
Când scrieți o aplicație web, cu un cuplu de pagini, devine rapid enervant pentru a scrie același HTML șabloane de peste si peste din nou pentru fiecare pagină. Mai mult, ce se întâmplă dacă trebuie să adăugați un nou element aplicației dvs., cum ar fi un nou fișier CSS? Va trebui să intrați în fiecare pagină și să o adăugați. Aceasta este o problemă de consum și de durată. Nu ar fi frumos dacă, în loc de mai multe ori scrie același HTML șabloane, puteți defini aspectul paginii doar o dată, și apoi utilizați acel aspect pentru a face noi pagini cu propriul conținut? Acesta este exact ceea ce fac șabloanele web!
Șabloanele web sunt pur și simplu fișiere text care conțin variabile și declarații de flux de control (
dacă ... altfel,pentru, etc), și se încheie cu un.htmlsau.xmlextensie.
Variabilele sunt înlocuite cu conținutul dvs., atunci când se evaluează șablonul web. Șabloanele web elimină repetarea, separă conținutul de design și fac mai ușoară întreținerea aplicației. În alte cuvinte mai simple, șabloanele web sunt minunate și ar trebui să le utilizați! Balonul utilizează motorul șablon Jinja2; să vedem cum să o folosim.
Ca prim pas, vom defini aspectul paginii noastre într-un document HTML schelet layout.html și pune-l în interiorul template-uri / pliant:
app / template-uri / layout.html
Flask App Flask App
% conținutul blocului% % endblock%
Acesta este pur și simplu un fișier HTML obișnuit ... dar ce se întâmplă cu % conținutul blocului% % endblock% parte? Pentru a răspunde la aceasta, să creăm un alt fișier home.html:
app / template-uri / home.html
% extinde "layout.html"% % conținut bloc%%% endblock%Bun venit în aplicația Flaky
Aceasta este pagina de pornire pentru aplicația Flask
Fișierul layout.html definește un bloc gol, numit conţinut, că un șablon de copil poate completa. Dosarul home.html este un șablon de copil care moștenește marcajul layout.html și completează blocul "conținut" cu propriul text. Cu alte cuvinte, layout.html definește toate elementele comune ale site-ului dvs., în timp ce fiecare șablon de copil îl personalizează cu propriul conținut.
Toate acestea suna bine, dar cum ne vedem de fapt aceasta pagina? Cum putem introduce o adresă URL în browser și "vizitați" home.html? Să ne referim înapoi la figura 1. Tocmai am creat șablonul home.html și a plasat-o în template-uri / pliant. Acum, trebuie să-i mapăm o adresă URL, astfel încât să o putem vedea în browser. Să ne deschidem routes.py și faceți acest lucru:
app / routes.py
din balon Flask import, app = render_template Fiole (__ name__) @ app.route ( '/') home def (): render_template return ( 'home.html') dacă __name__ == '__main__': app.run (debug = True )
Este pentru asta routes.py. Ce am facut?
render_template./ la funcția respectivă Acasă(). Acum, când cineva vizitează această adresă URL, funcția Acasă() va executa.Acasă() folosește funcția Flac render_template () pentru a face home.html șablon pe care tocmai l-am creat de la template-uri / folder pentru browser.alerga() pentru a rula aplicația noastră pe un server local. Vom seta depanare pavilion la Adevărat, astfel încât să vedem toate mesajele de eroare aplicabile dacă ceva nu merge bine și astfel serverul local se reîncarcă automat după ce am făcut modificări în cod.În sfârșit, suntem gata să vedem roadele muncii noastre. Reveniți la linia de comandă și tastați:
$ python routes.py
Accesați http: // localhost: 5000 / în browserul dvs. web preferat.
Când am vizitat http: // localhost: 5000 /, routes.py a avut cod în el, care a mapat adresa URL / la funcția Python Acasă(). Acasă() a găsit șablonul web home.html în template-uri / a trimis-o înapoi la browser, oferindu-ne ecranul de mai sus.
Destul de îngrijit, dar această pagină de start este puțin plictisitoare, nu-i așa? Să facem să arate mai bine adăugând unele CSS. Creați un fișier, main.css, în static / css /, și adăugați aceste reguli:
static / css / main.css
corp marja: 0; umplutura: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; culoare: # 444; / * * Creați un antet gri închis cu un logo alb * / header background-color: # 2B2B2B; înălțime: 35px; lățime: 100%; opacitate: 0,9; margin-bottom: 10px; header h1.logo margine: 0; font-size: 1.7; culoare: #fff; text-transform: majuscule; plutește la stânga; header h1.logo: hover culoare: #fff; text-decoration: nici unul; / * * Centrarea conținutului corpului * / .container width: 940px; marja: 0 auto; div.jumbo padding: 10px 0 30px 0; fundal-culoare: #eeeeee; -webkit-border-radius: 6px; -moz-border-radius: 6px; raza de graniță: 6px; h2 font-size: 3em; margin-top: 40px; text-align: centru; spațierea literelor: -2px; h3 font-size: 1.7; greutatea fontului: 100; margin-top: 30px; text-align: centru; spațierea cu litere: -1px; culoare: # 999;
Adăugați această foaie de stil în fișierul de schelet layout.html astfel încât stilul să se aplice tuturor modelelor de copii prin adăugarea acestei linii la ea
element:;
Folosim funcția Flac, url_for, pentru a genera o cale de URL pentru main.css de la static pliant. După adăugarea acestei linii în, layout.html Ar trebui să arate acum:
app / template-uri / layout.html
sticlă Flask App
% conținutul blocului% % endblock%
Să revenim la browser și să reîmprospătăm pagina pentru a vedea rezultatul CSS.
Asa mai merge! Acum, când vizităm http: // localhost: 5000 /, routes.py încă hărți adresa URL / la funcția Python Acasă(), și Acasă() încă găsește șablonul web home.html în template-uri / pliant. Dar, deoarece am adăugat fișierul CSS main.css, șablonul web home.html arată în static/ pentru a găsi acest element, înainte de a fi redat în HTML și trimis înapoi în browser.
Am realizat mult până acum. Am început cu Figura 1, înțelegând cum funcționează Flask-ul și acum am văzut cum funcționează toate acestea, creând o pagină de pornire pentru aplicația noastră web. Să mergem mai departe și să creăm o pagină Despre.
În secțiunea anterioară, am creat un șablon web home.html prin extinderea fișierului scheletului layout.html. Apoi am mapat adresa URL / la home.html în routes.py așa că l-am putea vizita în browser. Am terminat lucrurile prin adăugarea unor stil pentru a face să arate destul. Să repetăm din nou acest proces pentru a crea o pagină aproximativă pentru aplicația noastră web.
Vom începe prin crearea unui șablon web, about.html, și punerea în interiorul lui template-uri / pliant.
app / template-uri / about.html
% extinde "layout.html"% % conținut bloc%%Despre
Aceasta este o pagină Despre pentru articolul Intro to Flask. Nu arăt bine? Oprește-te, mă faci să mă înfurii.
% endblock%
La fel ca înainte cu home.html, ne extindem de la layout.html, și apoi completați conţinut blocați conținutul nostru personalizat.
Pentru a vizita această pagină în browser, trebuie să-i mapăm o adresă URL. Deschide routes.py și adăugați o altă cartografiere:
din fișierul de import Flask, render_template app = Flask (__name__) @ app.route ('/') def home (): return render_template ('home.html') @ app.route (' returnați render_template ('about.html') dacă __name__ == '__main__': app.run (debug = True) Am mapat adresa URL /despre la funcția respectivă despre(). Acum putem deschide browser-ul și mergem la http: // localhost: 5000 / about și verificăm pagina nouă creată.
Cele mai multe site-uri au legături către paginile lor principale din antetul sau subsolul documentului. Aceste linkuri sunt de obicei vizibile în toate paginile unui site web. Să deschidem dosarul scheletului, layout.html. și adăugați aceste linkuri astfel încât să apară în toate șabloanele copilului. Mai precis, să adăugăm o
app / template-uri / layout.html
......Flask App
Încă o dată, folosim funcția Flac url_for pentru a genera adrese URL.
Apoi, adăugați mai multe reguli de stil la main.css pentru a face aceste elemente de navigație noi să arate bine:
app / static / css / main.css
... / * * Afișează linkurile de navigație inline * / .menu float: right; margin-top: 8px; .menu li display: inline; .menu li + li margin-stânga: 35px; .menu li a culoare: # 999; text-decoration: nici unul;
În cele din urmă, deschideți browserul și actualizați http: // localhost: 5000 / pentru a vedea noile noastre linkuri de navigare adăugate.
În cursul acestui articol, am construit o aplicație web simplă cu două pagini, în cea mai mare parte statice. Procedând astfel, am învățat un flux de lucru care poate fi folosit pentru a crea site-uri mai complexe cu conținut dinamic. Flask este un cadru simplu, dar puternic, care vă permite să creați în mod eficient aplicații web. Mergeți - verificați-l!
