In questa serie, utilizzeremo Python, Flask e MySQL per creare una semplice applicazione web da zero. Si tratterà di una semplice applicazione di elenco di bucket in cui gli utenti possono registrarsi, accedere e creare il proprio elenco di bucket.
Questo tutorial presume che tu abbia una conoscenza di base del Pitone
linguaggio di programmazione. Useremo Pallone
, un framework per applicazioni web Python, per creare la nostra applicazione, con MySQL
come il back-end.
Se hai bisogno di rispolverare le tue abilità Python, prova il corso Introduzione a Python, che ti dà una solida base nella lingua per soli $ 5.
Flask è un framework Python per la creazione di applicazioni web. Dal sito ufficiale,
Flask è un microframework per Python basato su Werkzeug, Jinja 2 e buone intenzioni.
Quando pensiamo a Python, la struttura di fatto che ci viene in mente è la struttura di Django. Ma dal punto di vista di un principiante Python, Flask è più facile da usare, rispetto a Django.
Impostare Flask è abbastanza semplice e veloce. Con seme
gestore di pacchetti, tutto ciò che dobbiamo fare è:
pip installare pallone
Una volta che hai finito di installare Flask, crea una cartella chiamata FlaskApp
. Vai a FlaskApp
cartella e creare un file chiamato app.py
. Importa il pallone
modulo e creare un'app utilizzando Flask come mostrato:
da flask import Flask app = Flask (__ name__)
Ora definisci il percorso base /
e il relativo gestore di richieste corrispondente:
@ app.route ("/") def main (): return "Welcome!"
Successivamente, controlla se il file eseguito è il programma principale ed esegui l'app:
se __name__ == "__main__": app.run ()
Salva le modifiche ed esegui app.py
:
python app.py
Puntare il browser su http: // localhost: 5000 / e si dovrebbe avere il messaggio di benvenuto.
Innanzitutto, quando l'applicazione viene eseguita dovremmo mostrare una home page con gli ultimi elementi dell'elenco benna aggiunti dagli utenti. Quindi aggiungiamo la nostra home page alla nostra cartella dell'applicazione.
Flask cerca i file di modello all'interno del modelli
cartella. Quindi naviga verso PythonApp
cartella e creare una cartella chiamata modelli
. Dentro modelli
, crea un file chiamato index.html
. Aprire index.html
e aggiungi il seguente codice HTML:
Python Flask Bucket List App Python Flask App
Bucket List App
Iscriviti oggi
Lista dei desideri
Donec id elit non mi porta gravida su eget metus. Mecenate faucibus mollis interdum.
Lista dei desideri
Morbi leo risus, porta ac consectetur ac, vestibulum all'eros. Cras mattis consectetur purus sit amet fermentum.
Lista dei desideri
Il mecenate non è mai risorto vario blandit sit amet non magna.
Lista dei desideri
Donec id elit non mi porta gravida su eget metus. Mecenate faucibus mollis interdum.
Lista dei desideri
Morbi leo risus, porta ac consectetur ac, vestibulum all'eros. Cras mattis consectetur purus sit amet fermentum.
Lista dei desideri
Il mecenate non è mai risorto vario blandit sit amet non magna.
Aprire app.py
e importa render_template
, che useremo per rendere i file modello.
dalla boccetta import Flask, render_template
Modificare il metodo principale per restituire il file modello renderizzato.
def main (): return render_template ('index.html')
Salva le modifiche e riavvia il server. Puntare il browser su http: // localhost: 5000 / e si dovrebbe avere la seguente schermata:
Useremo MySQL
come il back-end. Quindi accedi a MySQL dalla riga di comando, o se preferisci una GUI come il banco di lavoro MySQL, puoi usare anche quello. Innanzitutto, creare un database chiamato Lista dei desideri
. Dalla riga di comando:
mysql -u-p
Immettere la password richiesta e, una volta effettuato l'accesso, eseguire il seguente comando per creare il database:
CREATE DATABASE BucketList;
Una volta creato il database, creare una tabella chiamata tbl_user
come mostrato:
CREATE TABLE 'BucketList'. 'Tbl_user' ('user_id' BIGINT NULL AUTO_INCREMENT, 'user_name' VARCHAR (45) NULL, 'user_username' VARCHAR (45) NULL, 'user_password' VARCHAR (45) NULL, PRIMARY KEY ('user_id' ));
Useremo Procedura di archiviazione
per la nostra applicazione Python per interagire con il database MySQL. Quindi, una volta al tavolo tbl_user
è stato creato, creare una stored procedure chiamata sp_createUser
per iscriversi a un utente.
Quando si crea una stored procedure per creare un utente nel tbl_user
tabella, in primo luogo dobbiamo controllare se un utente con lo stesso nome utente
esiste già. Se esiste, dobbiamo generare un errore all'utente, altrimenti creeremo l'utente nella tabella utente. Ecco come la stored procedure sp_createUser
guarderei:
DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_createUser' (IN p_name VARCHAR (20), IN p_username VARCHAR (20), IN p_password VARCHAR (20)) INIZIA se (seleziona esiste (seleziona 1 da tbl_user dove user_username = p_username)) POI selezionare 'Username Exists !!'; ELSE inserisce nei valori tbl_user (user_name, user_username, user_password) (p_name, p_username, p_password); FINISCI SE; END $$ DELIMITER;
Vai a PythonApp / templates
directory e creare un file HTML chiamato signup.html
. Aggiungi il seguente codice HTML a signup.html
:
Python Flask Bucket List App Python Flask App
Bucket List App
Aggiungi anche quanto segue CSS
come signup.css
alla cartella statica all'interno PythonApp
.
body padding-top: 40px; imbottitura-fondo: 40px; .form-signin larghezza massima: 330px; imbottitura: 15px; margine: 0 auto; .form-signin .form-signin-heading, .form-signin .checkbox margin-bottom: 10px; .form-signin .checkbox font-weight: normal; .form-signin .form-control position: relativo; altezza: auto; -webkit-box-dimensionamento: border-box; -moz-box-dimensionamento: border-box; dimensionamento della scatola: border-box; imbottitura: 10px; font-size: 16px; .form-signin .form-control: focus z-index: 2; .form-signin input [type = "email"] margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; .form-signin input [type = "password"] margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0;
Nel app.py
aggiungi un altro metodo chiamato showSignUp
per rendere la pagina di registrazione una volta che arriva una richiesta / showSignUp
:
@ app.route ('/ showSignUp') def showSignUp (): restituisce render_template ('signup.html')
Salva le modifiche e riavvia il server. Clicca sul Iscriviti pulsante sulla home page e dovresti avere la pagina di registrazione come mostrato:
Successivamente, abbiamo bisogno di un metodo sul lato server per l'interfaccia utente per interagire con il database MySQL. Quindi naviga PythonApp
e aperto app.py
. Crea un nuovo metodo chiamato Iscriviti
e aggiungi anche un percorso /Iscriviti
. Ecco come appare:
@ app.route ('/ signUp') def signUp (): # create il codice utente sarà qui !!
Useremo jQuery AJAX per pubblicare i nostri dati di registrazione su Iscriviti
metodo, quindi specificheremo il metodo nella definizione della rotta.
@ app.route ('/ signUp', methods = ['POST']) def signUp (): # crea il codice utente sarà qui !!
Per leggere i valori pubblicati dobbiamo importarli richiesta
da Flask.
dalla boccetta import Flask, render_template, request
utilizzando richiesta
possiamo leggere i valori pubblicati come mostrato di seguito:
@ app.route ('/ signUp', methods = ['POST']) def signUp (): # legge i valori inviati dall'interfaccia utente _name = request.form ['inputName'] _email = request.form ['inputEmail' ] _password = request.form ['inputPassword']
Una volta letti i valori, controlleremo semplicemente se sono validi e per ora restituiamo un semplice messaggio:
@ app.route ('/ signUp', methods = ['POST']) def signUp (): # legge i valori inviati dall'interfaccia utente _name = request.form ['inputName'] _email = request.form ['inputEmail' ] _password = request.form ['inputPassword'] # convalida i valori ricevuti se _name e _email e _password: restituisce json.dumps ('html': 'Tutti i campi sono buoni !!') else: restituisce json.dumps (' html ':'Inserisci i campi richiesti')
Anche importazione jSON
da Flask, dal momento che lo stiamo usando nel codice sopra per tornare jSON
dati.
dalla boccetta import Flask, render_template, json, request
Useremo jQuery AJAX per inviare la richiesta di registrazione al metodo Python. Scarica e posiziona jQuery
dentro PythonApp / static / js
e aggiungere un collegamento ad esso dalla pagina di registrazione. Una volta che jQuery è stato incluso, aggiungeremo un jQuery INVIARE
richiesta quando l'utente fa clic su Iscriviti
pulsante.
Quindi, alleghiamo l'evento click del pulsante di registrazione come mostrato:
$ (function () $ ('# btnSignUp'). click (function () $ .ajax (url: '/ signUp', data: $ ('form'). serialize (), digita: 'POST' , successo: function (response) console.log (response);, error: function (error) console.log (errore););););
Salva tutte le modifiche e riavvia il server. Dal Iscriviti pagina, inserisci i dettagli e clicca Iscriviti. Controlla la console del browser e dovresti avere il seguente messaggio:
"html": "Tutti i campi sono buoni !!"
Una volta che abbiamo il nome
, indirizzo email
e parola d'ordine
, possiamo semplicemente chiamare la procedura memorizzata MySQL per creare il nuovo utente.
Per connettersi con MySQL, utilizzeremo Flask-MySQL, che è un'estensione Flask. Per iniziare Flask-MySQL
, installarlo usando seme
gestore pacchetti:
pip installa flask-mysql
Importa MySQL all'interno app.py
:
da flask.ext.mysql importare MySQL
In precedenza abbiamo definito la nostra app come mostrato:
app = Flask (__ name__)
Oltre a ciò sono incluse le seguenti configurazioni MySQL:
mysql = MySQL () # Configurazioni MySQL app.config ['MYSQL_DATABASE_USER'] = 'jay' app.config ['MYSQL_DATABASE_PASSWORD'] = 'jay' app.config ['MYSQL_DATABASE_DB'] = 'BucketList' app.config ['MYSQL_DATABASE_HOST '] =' localhost 'mysql.init_app (app)
Per prima cosa, creiamo la connessione MySQL:
conn = mysql.connect ()
Una volta creata la connessione, avremo bisogno di a cursore
per interrogare la nostra stored procedure. Quindi, usando conn
connessione, creare un cursore.
cursore = conn.cursor ()
Prima di chiamare la procedura di creazione dell'utente memorizzato, facciamo la nostra password salted usando un helper fornito da Werkzeug. Importa il modulo in app.py
:
da werkzeug import genera_password_hash, check_password_hash
Utilizzare il modulo salting per creare la password hash.
_hashed_password = generate_password_hash (_password)
Ora, chiamiamo la procedura sp_createUser
:
cursor.callproc ( 'sp_createUser', (_ nome, _email, _hashed_password))
Se la procedura viene eseguita correttamente, allora commetteremo le modifiche e restituiremo il messaggio di successo.
data = cursor.fetchall () se len (data) è 0: conn.commit () restituisce json.dumps ('message': 'Utente creato con successo!') else: return json.dumps ('error': Str (dati [0]))
Salva le modifiche e riavvia il server. Vai alla pagina di registrazione e inserisci il nome
, indirizzo email
e parola d'ordine
e fare clic su Iscriviti pulsante. Una volta completata la creazione dell'utente, potrai vedere un messaggio nella tua console del browser.
"message": "Utente creato con successo!"
In questo tutorial, abbiamo visto come iniziare a creare un'applicazione web usando Python Flask
, MySQL
e il Flask-MySQL
estensione. Abbiamo creato e progettato le tabelle del database e la stored procedure e implementato la funzionalità di registrazione. Nel prossimo tutorial, porteremo questa serie al livello successivo implementando la funzionalità di accesso e alcune altre funzionalità.
Il codice sorgente di questo tutorial è disponibile su GitHub.
Fateci sapere i vostri pensieri nei commenti qui sotto!
Impara Python con la nostra guida completa al tutorial su Python, sia che tu stia appena iniziando o che sei un programmatore esperto che cerca di imparare nuove abilità.