Share
Flask è un piccolo e potente framework web per Python. È facile da apprendere e semplice da utilizzare e ti consente di creare la tua app Web in un breve lasso di tempo.
In questo articolo, ti mostrerò come creare un semplice sito web, contenente due pagine statiche con una piccola quantità di contenuto dinamico. Mentre Flask può essere utilizzato per la costruzione di siti Web complessi basati su database, a partire da pagine prevalentemente statiche sarà utile introdurre un flusso di lavoro, che sarà quindi possibile generalizzare per creare pagine più complesse in futuro. Al termine, sarai in grado di utilizzare questa sequenza di passaggi per avviare la tua prossima app Flask.
Prima di iniziare, dobbiamo installare Flask. Poiché i sistemi variano, le cose possono sporadicamente andare storte durante questi passaggi. Se lo fanno, come facciamo tutti, basta Google il messaggio di errore o lasciare un commento che descrive il problema.
Virtualenv è uno strumento utile che crea ambienti di sviluppo Python isolati dove puoi fare tutto il tuo lavoro di sviluppo.
Useremo virtualenv per installare Flask. Virtualenv è uno strumento utile che crea ambienti di sviluppo Python isolati dove puoi fare tutto il tuo lavoro di sviluppo. Supponiamo di incontrare una nuova libreria Python che vorresti provare. Se lo installi a livello di sistema, c'è il rischio di rovinare altre librerie che potresti aver installato. Utilizzare virtualenv invece per creare una sandbox, in cui è possibile installare e utilizzare la libreria senza influire sul resto del sistema. Puoi continuare a utilizzare questa sandbox per lavori di sviluppo continui, oppure puoi semplicemente cancellarla una volta che hai finito di usarla. In ogni caso, il tuo sistema rimane organizzato e privo di ingombri.
È possibile che il tuo sistema abbia già virtualenv. Fare riferimento alla riga di comando e provare a eseguire:
$ virtualenv --version
Se vedi un numero di versione, sei a posto e puoi saltare a questa sezione "Installa Flask". Se il comando non è stato trovato, utilizzare easy_install o seme installare virtualenv. Se stai usando Linux o Mac OS X, uno dei seguenti dovrebbe funzionare per te:
$ sudo easy_install virtualenv
o:
$ sudo pip installa virtualenv
o:
$ sudo apt-get installa python-virtualenv
Se non hai installato nessuno di questi comandi, ci sono diversi tutorial online, che ti mostreranno come installarlo sul tuo sistema. Se stai utilizzando Windows, segui le "Istruzioni per l'installazione" in questa pagina easy_install installato e funzionante sul tuo computer.
Dopo l'installazione virtualenv, puoi creare un nuovo ambiente di sviluppo isolato, in questo modo:
$ virtualenv flaskapp
Qui, virtualenv crea una cartella, flaskapp /, e imposta una copia pulita di Python all'interno per poterlo utilizzare. Installa anche il pratico gestore di pacchetti, seme.
Inserisci il tuo ambiente di sviluppo appena creato e attivalo in modo da poter iniziare a lavorare al suo interno.
$ cd flaskapp $. bin / attivare
Ora, puoi installare Flask in sicurezza:
$ pip installa Flask
Creiamo un paio di cartelle e file all'interno flaskapp / per mantenere la nostra app web organizzata.
... ├── app │ ├── statico │ │ ├── css │ │ ├── img │ │ └── js │ ├── modelli │ ├── routes.py │ └── README.md
Entro flaskapp /, crea una cartella, app /, per contenere tutti i tuoi file. Dentro app /, crea una cartella statico/; è qui che inseriremo le immagini delle nostre app Web, i file CSS e JavaScript, quindi creiamo le cartelle per ognuna di esse, come dimostrato sopra. Inoltre, crea un'altra cartella, templates /, per memorizzare i modelli Web dell'app. Crea un file Python vuoto routes.py per la logica dell'applicazione, come il routing degli URL.
E nessun progetto è completo senza una descrizione utile, quindi crea un README.md file pure.
Ora sappiamo dove mettere le risorse del nostro progetto, ma come si connette tutto? Diamo un'occhiata a "Fig. 1" qui sotto per vedere l'immagine grande:
Fig. 1
Accentsconagua
/ per andare alla sua home page/ a una funzione PythonIniziamo con una richiesta emessa da un browser web. Un utente digita un URL nella barra degli indirizzi. La richiesta colpisce routes.py, che ha un codice che mappa l'URL di una funzione. La funzione trova un modello nel templates / cartella, lo rende in HTML e lo rimanda al browser. La funzione può facoltativamente recuperare i record da un database e quindi passare tali informazioni su un modello Web, ma poiché ci occupiamo principalmente di pagine statiche in questo articolo, salteremo l'interazione con un database per ora.
Ora che conosciamo il modo in cui organizziamo la struttura del progetto, iniziamo a creare una home page per la nostra app web.
Quando scrivi un'app Web con un paio di pagine, diventa fastidioso scrivere sempre lo stesso file HTML HTML per ogni pagina. Inoltre, cosa succede se hai bisogno di aggiungere un nuovo elemento alla tua app, come un nuovo file CSS? Dovresti entrare in ogni singola pagina e aggiungerla. Questa operazione richiede molto tempo ed è soggetta a errori. Non sarebbe bello se, invece di scrivere ripetutamente lo stesso codice HTML, potessi definire il layout della tua pagina solo una volta, e quindi usare quel layout per creare nuove pagine con i propri contenuti? Questo è esattamente ciò che fanno i modelli web!
I modelli Web sono semplicemente file di testo che contengono variabili e istruzioni di controllo del flusso (
se altro,per, ecc.) e terminano con un.htmlo.xmlestensione.
Le variabili vengono sostituite con il tuo contenuto, quando viene valutato il modello web. I modelli Web rimuovono la ripetizione, separano il contenuto dalla progettazione e semplificano la manutenzione dell'applicazione. In altre parole più semplici, i modelli web sono fantastici e dovresti usarli! Flask utilizza il motore di template Jinja2; vediamo come usarlo.
Come primo passo, definiremo il layout della pagina in un documento HTML scheletro layout.html e mettilo dentro templates / cartella:
app / templates / layout.html
Flask App Flask App
% block content% % endblock%
Questo è semplicemente un normale file HTML ... ma cosa sta succedendo con % block content% % endblock% parte? Per rispondere, creiamo un altro file home.html:
app / templates / home.html
% estende "layout.html"% % block content%% endblock%Benvenuti nell'app Flask
Questa è la pagina iniziale per l'app Flask
Il file layout.html definisce un blocco vuoto, denominato soddisfare, che un modello figlio può compilare. Il file home.html è un modello figlio che eredita il markup da layout.html e riempie il blocco "contenuto" con il proprio testo. In altre parole, layout.html definisce tutti gli elementi comuni del tuo sito, mentre ciascun modello figlio lo personalizza con il suo contenuto.
Tutto questo suona bene, ma come vediamo questa pagina? Come possiamo digitare un URL nel browser e "visitare" home.html? Facciamo riferimento a Fig. 1. Abbiamo appena creato il modello home.html e lo ha collocato nel templates / cartella. Ora dobbiamo mappare un URL per poterlo visualizzare nel browser. Apriamolo routes.py e fai questo:
app / routes.py
from flask import Flask, render_template app = Flask (__ name__) @ app.route ('/') def home (): restituisce render_template ('home.html') se __name__ == '__main__': app.run (debug = True ) Questo è tutto per routes.py. Cosa abbiamo fatto?
render_template./ alla funzione casa(). Ora, quando qualcuno visita questo URL, la funzione casa() verrà eseguito.casa() usa la funzione Flask render_template () per rendere il home.html modello che abbiamo appena creato dal templates / cartella al browser.correre() per eseguire la nostra app su un server locale. Imposteremo il mettere a punto bandiera a vero, in modo che possiamo visualizzare eventuali messaggi di errore applicabili se qualcosa va storto, e in modo che il server locale si ricarica automaticamente dopo aver apportato modifiche al codice.Siamo finalmente pronti a vedere i frutti del nostro lavoro. Torna alla riga di comando e digita:
$ python routes.py
Visita http: // localhost: 5000 / nel tuo browser web preferito.
Quando abbiamo visitato http: // localhost: 5000 /, routes.py conteneva il codice, che mappava l'URL / alla funzione Python casa(). casa() trovato il modello web home.html nel templates / cartella, renderlo in HTML e inviarlo al browser, dandoci lo schermo sopra.
Abbastanza pulito, ma questa home page è un po 'noiosa, non è vero? Facciamo un aspetto migliore aggiungendo alcuni CSS. Crea un file, main.css, entro static / css /, e aggiungi queste regole:
static / css / main.css
body margin: 0; padding: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; colore: # 444; / * * Crea un'intestazione grigio scuro con un logo bianco * / header background-color: # 2B2B2B; altezza: 35px; larghezza: 100%; opacità: .9; margin-bottom: 10px; header h1.logo margin: 0; font-size: 1.7em; colore: #fff; text-transform: maiuscolo; fluttuare: a sinistra; header h1.logo: hover color: #fff; decorazione del testo: nessuna; / * * Centra il contenuto del corpo * / .container width: 940px; margine: 0 auto; div.jumbo padding: 10px 0 30px 0; background-color: #eeeeee; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; h2 font-size: 3em; margin-top: 40px; allineamento del testo: centro; letter-spacing: -2px; h3 font-size: 1.7em; font-weight: 100; margin-top: 30px; allineamento del testo: centro; letter-spacing: -1px; colore: n. 999;
Aggiungi questo foglio di stile al file dello scheletro layout.html in modo che lo stile si applica a tutti i suoi modelli figlio aggiungendo questa linea al suo
elemento:;
Stiamo usando la funzione Flask, url_for, per generare un percorso URL per main.css dal statico cartella. Dopo aver aggiunto questa linea, layout.html dovrebbe ora apparire come:
app / templates / layout.html
Pallone Flask App
% block content% % endblock%
Torniamo al browser e aggiorniamo la pagina per vedere il risultato del CSS.
Questo è più simile! Ora, quando visitiamo http: // localhost: 5000 /, routes.py esegue comunque il mapping dell'URL / alla funzione Python casa(), e casa() trova ancora il modello web home.html nel templates / cartella. Ma, dato che abbiamo aggiunto il file CSS main.css, il modello web home.html guarda dentro statico/ per trovare questo bene, prima di eseguire il rendering in HTML e di essere reindirizzato al browser.
Abbiamo ottenuto molto finora. Abbiamo iniziato con la Fig. 1, comprendendo come funziona Flask, e ora abbiamo visto come tutto si svolge, creando una home page per la nostra app web. Andiamo avanti e creiamo una pagina About.
Nella sezione precedente, abbiamo creato un modello web home.html estendendo il file dello scheletro layout.html. Abbiamo quindi mappato l'URL / a home.html nel routes.py quindi potremmo visitarlo nel browser. Abbiamo finito con l'aggiunta di alcuni stili per renderlo bello. Ripetiamo la procedura nuovamente per creare una pagina relativa alla nostra app Web.
Inizieremo creando un modello web, about.html, e mettendolo dentro il templates / cartella.
app / templates / about.html
% estende "layout.html"% % block content%Di
Questa è una pagina About per l'articolo Intro to Flask. Non sto bene? Oh, smettila, mi stai facendo arrossire.
% endblock%
Proprio come prima con home.html, estendiamo da layout.html, e quindi riempire il soddisfare bloccare con il nostro contenuto personalizzato.
Per visitare questa pagina nel browser, è necessario mappare un URL ad esso. Aprire routes.py e aggiungi un'altra mappatura:
from flask import Flask, render_template app = Flask (__ name__) @ app.route ('/') def home (): restituisce render_template ('home.html') @ app.route ('/ about') def about (): return render_template ('about.html') if __name__ == '__main__': app.run (debug = True) Abbiamo mappato l'URL /di alla funzione di(). Ora possiamo aprire il browser e andare a http: // localhost: 5000 / about e controllare la nostra pagina appena creata.
La maggior parte dei siti web ha collegamenti alle loro pagine principali all'interno dell'intestazione o del piè di pagina del documento. Questi collegamenti sono solitamente visibili su tutte le pagine di un sito web. Apriamo il file dello scheletro, layout.html. e aggiungi questi collegamenti in modo che vengano visualizzati in tutti i modelli figlio. In particolare, aggiungiamo un
app / templates / layout.html
......Flask App
Ancora una volta, usiamo la funzione Flask url_for per generare URL.
Successivamente, aggiungi altre regole di stile main.css per rendere belli questi nuovi elementi di navigazione:
app / static / css / main.css
... / * * Mostra i link di navigazione inline * / .menu float: right; margin-top: 8px; .menu li display: inline; .menu li + li margin-left: 35px; .menu li a color: # 999; decorazione del testo: nessuna;
Infine, apri il browser e aggiorna http: // localhost: 5000 / per vedere i nostri collegamenti di navigazione appena aggiunti.
Nel corso di questo articolo, abbiamo creato una semplice app Web con due pagine, per lo più statiche. In tal modo, abbiamo appreso un flusso di lavoro che può essere utilizzato per creare siti Web più complessi con contenuti dinamici. Flask è un framework semplice ma potente che consente di creare in modo efficiente le app Web. Vai avanti - controlla!
