Share
Dans cette série, nous utiliserons Python, Flask et MySQL pour créer une application Web simple à partir de rien. Ce sera une simple application de liste de compartiments où les utilisateurs pourront s’inscrire, se connecter et créer leur liste de compartiments..
Ce tutoriel suppose que vous ayez des connaissances de base sur le Python langage de programmation. Nous allons utiliser Ballon, un framework d’application Web Python, pour créer notre application, avec MySQL comme l'arrière.
Si vous avez besoin de parfaire vos compétences en Python, essayez le cours Introduction à Python, qui vous donne une base solide dans la langue pour seulement 5 $..
Flask est un framework Python pour la création d'applications Web. Du site officiel,
Flask est un microframework pour Python basé sur Werkzeug, Jinja 2 et de bonnes intentions.
Lorsque nous pensons à Python, le framework de facto qui nous vient à l’esprit est le framework Django. Mais du point de vue d'un débutant en Python, Flask est plus facile à utiliser qu'avec Django..
L'installation de Flask est assez simple et rapide. Avec pépin gestionnaire de paquets, tout ce que nous avons à faire est:
pip installer la fiole
Une fois que vous avez terminé l’installation de Flask, créez un dossier appelé FlaskApp. Accédez au FlaskApp dossier et créer un fichier appelé app.py. Importer le ballon module et créer une application en utilisant Flask comme indiqué:
depuis une importation de flacon Flask app = Flask (__ name__)
Définissez maintenant l'itinéraire de base / et son gestionnaire de demandes correspondant:
Accentsconagua
@ app.route ("/") def main (): retourne "Bienvenue!"Ensuite, vérifiez si le fichier exécuté est le programme principal et exécutez l'application:
si __name__ == "__main__": app.run ()
Enregistrez les modifications et exécutez app.py:
python app.py
Pointez votre navigateur sur http: // localhost: 5000 / et vous devriez avoir le message de bienvenue.
Tout d'abord, lorsque l'application est exécutée, nous devrions afficher une page d'accueil avec les derniers éléments de la liste de compartiments ajoutés par les utilisateurs. Ajoutons donc notre page d'accueil à notre dossier de candidature.
Flask cherche des fichiers de modèle dans le des modèles dossier. Alors naviguez vers le PythonApp dossier et créer un dossier appelé des modèles. À l'intérieur des modèles, créer un fichier appelé index.html. S'ouvrir index.html et ajoutez le code HTML suivant:
App Paskon Flask Bucket List App App Flacon Python
Bucket List App
Inscrivez-vous aujourd'hui
Liste de seau
Donec id elit non porta gravida à eget metus. Maecenas faucibus mollis interdum.
Liste de seau
Morbi leo risus, porta ac consectetur ac, vestibule chez eros. Cras mattis consectetur purus sit amet fermentum.
Liste de seau
Les mécènes ont perdu tout leur cœur blandit assis sans regarder.
Liste de seau
Donec id elit non porta gravida à eget metus. Maecenas faucibus mollis interdum.
Liste de seau
Morbi leo risus, porta ac consectetur ac, vestibule chez eros. Cras mattis consectetur purus sit amet fermentum.
Liste de seau
Les mécènes ont perdu tout leur cœur blandit assis sans regarder.
S'ouvrir app.py et importer render_template, que nous utiliserons pour rendre les fichiers de modèle.
depuis flask import Flask, render_template
Modifier la méthode principale pour renvoyer le fichier de modèle rendu.
def main (): return render_template ('index.html')Enregistrez les modifications et redémarrez le serveur. Pointez votre navigateur sur http: // localhost: 5000 / et vous devriez avoir l’écran ci-dessous:
Nous allons utiliser MySQL comme le back end. Alors connectez-vous à MySQL à partir de la ligne de commande, ou si vous préférez une interface graphique telle que le banc de travail MySQL, vous pouvez également l'utiliser. Tout d’abord, créez une base de données appelée BucketList. A partir de la ligne de commande:
mysql -u-p
Entrez le mot de passe requis et, une fois connecté, exécutez la commande suivante pour créer la base de données:
CREATE DATABASE BucketList;
Une fois la base de données créée, créez une table appelée tbl_user comme montré:
CREATE TABLE 'BucketList'. 'Tbl_user' ('user_id' BIGINT NULL AUTO_INCREMENT, 'user_name' VARCHAR (45) NULL, 'user_username' VARCHAR (45) NULL, PRIMARY KEY ('user_id' )); Nous allons utiliser Procédures stockées pour que notre application Python puisse interagir avec la base de données MySQL. Donc, une fois la table tbl_user a été créé, créez une procédure stockée appelée sp_createUser inscrire un utilisateur.
Lors de la création d’une procédure stockée pour créer un utilisateur dans le tbl_user table, nous devons d’abord vérifier si un utilisateur avec le même Nom d'utilisateur existe déjà. S'il existe, nous devons envoyer une erreur à l'utilisateur, sinon nous allons créer l'utilisateur dans la table des utilisateurs. Voici comment la procédure stockée sp_createUser voudrais regarder:
DELIMITER $$ CREATE DEFINER = "root" @ 'localhost' PROCEDURE 'sp_createUser' (IN p_name VARCHAR (20), IN p_username VARCHAR (20), IN p_password VARCHAR (20)) COMMENCER si (select existe (sélectionnez 1 dans tbl_user où nom_utilisateur = nom_utilisateur)) ALORS sélectionner 'Le nom d'utilisateur existe !!'; ELSE insérer dans tbl_user (nom_utilisateur, nom_utilisateur, mot_de_passe_utilisateur) valeurs (nom_p, nom_utilisateur_p, mot_de_passe); FIN SI; FIN $$ DELIMITER;
Accédez au PythonApp / templates répertoire et créer un fichier HTML appelé signup.html. Ajoutez le code HTML suivant à signup.html:
App Paskon Flask Bucket List App App Flacon Python
Bucket List App
Ajoutez également ce qui suit CSS comme signup.css dans le dossier statique à l'intérieur PythonApp.
body padding-top: 40px; rembourrage en bas: 40px; .form-signin max-width: 330px; rembourrage: 15px; marge: 0 auto; .form-signin .form-signin-heading, .form-signin .checkbox margin-bottom: 10px; .form-signin .checkbox font-weight: normal; .form-signin .form-control position: relative; hauteur: auto; -webkit-box-dimensionnement: border-box; -moz-box-dimensionnement: border-box; taille de la boîte: boîte-frontière; rembourrage: 10px; taille de police: 16px; .form-signin .form-control: focus z-index: 2; .form-signin input [type = "email"] margin-bottom: -1px; border-bottom-right-radius: 0; rayon en bas à gauche: 0; .form-signin input [type = "mot de passe"] margin-bottom: 10px; rayon en haut à gauche: 0; border-top-right-radius: 0;
Dans app.py ajouter une autre méthode appelée showSignUp rendre la page d'inscription une fois qu'une demande est arrivée / showSignUp:
@ app.route ('/ showSignUp') def showSignUp (): return render_template ('signup.html')Enregistrez les modifications et redémarrez le serveur. Clique sur le S'inscrire bouton sur la page d'accueil et vous devriez avoir la page d'inscription comme indiqué:
Ensuite, nous avons besoin d’une méthode côté serveur pour que l’interface utilisateur puisse interagir avec la base de données MySQL. Alors naviguez vers PythonApp et ouvert app.py. Créez une nouvelle méthode appelée s'inscrire et aussi ajouter un itinéraire /s'inscrire. Voici à quoi ça ressemble:
@ app.route ('/ signUp') def signUp (): # créer le code utilisateur sera ici !!Nous utiliserons jQuery AJAX pour publier nos données d’inscription sur le s'inscrire méthode, donc nous allons spécifier la méthode dans la définition de la route.
@ app.route ('/ signUp', méthodes = ['POST']) def signUp (): # créer un code utilisateur sera ici !!Pour pouvoir lire les valeurs affichées, nous devons importer demande de Flask.
depuis flask import Flask, render_template, request
En utilisant demande nous pouvons lire les valeurs affichées comme indiqué ci-dessous:
@ app.route ('/ signUp', méthodes = ['POST']) def signUp (): # lit les valeurs publiées à partir de l'interface utilisateur _name = request.form ['inputName'] _email = request.form ['inputEmail' ] _password = request.form ['inputPassword']Une fois les valeurs lues, nous allons simplement vérifier si elles sont valides et pour le moment, retournons un simple message:
@ app.route ('/ signUp', méthodes = ['POST']) def signUp (): # lit les valeurs publiées à partir de l'interface utilisateur _name = request.form ['inputName'] _email = request.form ['inputEmail' ] _password = request.form ['inputPassword'] # valider les valeurs reçues si _name et _email et _password: return json.dumps ('html': 'Tous les champs sont bons !!') else: return json.dumps (' html ':'Entrez les champs obligatoires')Importer aussi JSON de Flask, puisque nous l'utilisons dans le code ci-dessus pour renvoyer JSON Les données.
depuis une importation de flacon Flask, render_template, json, request
Nous utiliserons jQuery AJAX pour envoyer la demande d'inscription à la méthode Python. Télécharger et placer jQuery à l'intérieur PythonApp / static / js et ajoutez un lien à partir de la page d'inscription. Une fois jQuery inclus, nous ajouterons un jQuery POSTER demande lorsque l'utilisateur clique sur le S'inscrire bouton.
Alors, attachons l'événement click du bouton d'inscription comme indiqué:
$ (function () $ ('# btnSignUp'). click (function () $ .ajax (url: '/ signUp', données: $ ('formulaire'). serialize (), tapez: 'POST' , succès: fonction (réponse) console.log (réponse);, erreur: fonction (erreur) console.log (erreur););););Enregistrez toutes les modifications et redémarrez le serveur. Du S'inscrire page, remplissez les détails et cliquez sur S'inscrire. Vérifiez la console du navigateur et vous devriez avoir le message ci-dessous:
"html": "Tous les champs sont bons !!" Une fois que nous avons le prénom, adresse électronique et mot de passe, nous pouvons simplement appeler la procédure stockée MySQL pour créer le nouvel utilisateur.
Pour vous connecter avec MySQL, nous utiliserons Flask-MySQL, qui est une extension Flask. Afin de commencer avec Flask-MySQL, installez-le en utilisant pépin directeur chargé d'emballage:
pip installer flask-mysql
Importer MySQL à l'intérieur app.py:
depuis flask.ext.mysql importer MySQL
Plus tôt, nous avons défini notre application comme indiqué:
app = Flacon (__ nom__)
En plus de cela incluent les configurations MySQL suivantes:
mysql = MySQL () # Configurations MySQL app.config ['MYSQL_DATABASE_USER'] = 'jay' app.config ['MYSQL_DATABASE_PASSWORD'] = 'BucketList '] =' localhost 'mysql.init_app (app)
Commençons par créer la connexion MySQL:
conn = mysql.connect ()
Une fois la connexion créée, nous aurons besoin d’un le curseur pour interroger notre procédure stockée. Donc, en utilisant Connecticut connexion, créer un curseur.
curseur = conn.cursor ()
Avant d'appeler la procédure stockée create user, familiarisons notre mot de passe à l'aide d'un utilitaire fourni par Werkzeug. Importer le module dans app.py:
depuis werkzeug import generate_password_hash, check_password_hash
Utilisez le module de salage pour créer le mot de passe haché.
_hashed_password = generate_password_hash (_password)
Appelons maintenant la procédure sp_createUser:
cursor.callproc ('sp_createUser', (_ name, _email, _hashed_password))Si la procédure est exécutée avec succès, nous validerons les modifications et renverrons le message de réussite..
data = cursor.fetchall () si len (data) vaut 0: conn.commit () renvoie json.dumps ('message': 'Utilisateur créé avec succès!') sinon: renvoie json.dumps ('erreur': str (data [0]))Enregistrez les modifications et redémarrez le serveur. Allez à la page d'inscription et entrez le prénom, adresse électronique et mot de passe et cliquez sur le S'inscrire bouton. Lorsque la création de l'utilisateur est réussie, vous pourrez voir un message dans la console de votre navigateur..
"message": "Utilisateur créé avec succès!"
Dans ce tutoriel, nous avons vu comment commencer à créer une application Web en utilisant Flacon en python, MySQL et le Flask-MySQL extension. Nous avons créé et conçu les tables de base de données et la procédure stockée, et mis en œuvre la fonctionnalité d'inscription. Dans le prochain tutoriel, nous allons passer à la série suivante en implémentant la fonctionnalité de connexion et certaines autres fonctionnalités..
Le code source de ce tutoriel est disponible sur GitHub.
Faites-nous savoir vos pensées dans les commentaires ci-dessous!
Apprenez Python avec notre guide complet de tutoriel sur Python, que vous soyez débutant ou que vous soyez un codeur chevronné cherchant à acquérir de nouvelles compétences..
