Creazione di un'applicazione Web da zero utilizzando Python Flask e MySQL

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.

Introduzione a Python Flask

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.

Impostazione del pallone

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.

Creare una Home Page

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.

© Azienda 2015

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:

Creare una pagina di registrazione

Passaggio 1: impostazione del database

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; 

Passaggio 2: crea un'interfaccia di registrazione

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

© Azienda 2015

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: 

Passaggio 3: implementare un metodo di registrazione 

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

Passaggio 4: creare una richiesta di iscrizione

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 !!" 

Passaggio 5: chiamare la stored procedure MySQL 

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!"

Avvolgendolo

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

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à.