Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Python

Erstellen einer Web-App von Grund auf mit Python Flask und MySQL

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Creating a Web App From Scratch Using Python Flask and MySQL.
Creating a Web App From Scratch Using Python Flask and MySQL: Part 2

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

In dieser Serie verwenden wir Python, Flask und MySQL, um eine einfache Webanwendung von Grund auf zu erstellen. Es wird eine einfache Bucket-List-Anwendung sein, in der Benutzer sich registrieren, sich anmelden und ihre Bucket-Liste erstellen können.

Dieses Tutorial setzt voraus, dass Sie über Grundkenntnisse der Programmiersprache Python verfügen. Wir werden Flask, ein Python-Webanwendungs-Framework, verwenden, um unsere Anwendung mit MySQL als Back-End zu erstellen.

Einführung in Python Flask

Flask ist ein Python-Framework zum Erstellen der Webanwendungen. Von der offiziellen Seite

Flask ist ein Mikro-Framework für Python, das auf Werkzeug, Jinja 2 und guten Absichten basiert.

Wenn wir an Python denken, ist das De-facto-Framework, das uns in den Sinn kommt, das Django-Framework. Aus der Sicht eines Python-Anfängers ist es jedoch einfacher, mit Flask zu beginnen, wenn man es mit Django vergleicht.

Flask einrichten

Das Flask-Einrichten ist ziemlich einfach und schnell. Mit dem pip-Paketmanager müssen wir nur noch Folgendes tun:

Wenn Sie mit der Flask-Installation fertig sind, erstellen Sie einen Ordner namens FlaskApp. Navigieren Sie zum FlaskApp-Ordner und erstellen Sie eine Datei mit dem Namen app.py. Importieren Sie das flask-Modul und erstellen Sie eine App mit der folgenden Flasche:

Definieren Sie nun die Basisroute / und den entsprechenden Anforderungshandler:

Prüfen Sie anschließend, ob die ausgeführte Datei das Hauptprogramm ist, und führen Sie die App aus:

Speichern Sie die Änderungen und führen Sie app.py aus:

Richten Sie Ihren Browser auf http://localhost:5000/ und Sie sollten die Begrüßungsnachricht haben.

Erstellen einer Startseite

Erstens, wenn die Anwendung ausgeführt wird, sollten wir eine Startseite mit den neuesten, von Benutzern hinzugefügten Bucket-Listenelementen anzeigen. Fügen wir also unsere Startseite unserem Anwendungsordner hinzu.

Flask sucht nach Vorlagendateien im templates-Ordner. Navigieren Sie also zum PythonApp-Ordner und erstellen Sie einen Ordner mit dem Namen templates. Erstellen Sie in templates eine Datei namens index.html. Öffnen Sie index.html und fügen Sie den folgenden HTML-Code hinzu:

Öffnen Sie app.py und importieren Sie render_template, das wir zum Rendern der Vorlagendateien verwenden werden.

Ändern Sie die Hauptmethode, um die gerenderte Vorlagendatei zurückzugeben.

Speichern Sie die Änderungen und starten Sie den Server neu. Richten Sie Ihren Browser auf http://localhost:5000/ und Sie sollten den folgenden Bildschirm haben:

Bucket List App home page

Eine Anmeldeseite erstellen

Schritt 1: Einrichten der Datenbank

Wir werden MySQL als Backend verwenden. Melden Sie sich also über die Befehlszeile zu MySQL an, oder wenn Sie eine GUI, wie die MySQL-Werkbank bevorzugen, können Sie diese auch verwenden. Erstellen Sie zuerst eine Datenbank mit dem Namen BucketList. Von der Kommandozeile aus:

Geben Sie das erforderliche Kennwort ein und führen Sie nach dem Anmelden den folgenden Befehl aus, um die Datenbank zu erstellen:

Sobald die Datenbank erstellt wurde, erstellen Sie eine Tabelle mit dem Namen tbl_user wie folgt:

Wir werden Stored procedures für unsere Python-Anwendung verwenden, um mit der MySQL-Datenbank zu interagieren. Sobald die Tabelle tbl_user erstellt wurde, erstellen Sie eine gespeicherte Prozedur mit dem Namen sp_createUser, um einen Benutzer anzumelden.

Wenn Sie eine gespeicherte Prozedur zum Erstellen eines Benutzers in der Tabelle tbl_user erstellen, müssen Sie zunächst prüfen, ob bereits ein Benutzer mit demselben username vorhanden ist. Wenn es der Fall ist, müssen wir einen Fehler an den Benutzer senden. Andernfalls erstellen wir den Benutzer in der Benutzertabelle. So würde die gespeicherte Prozedur sp_createUser aussehen:

Schritt 2: Erstellen Sie eine Anmeldeoberfläche

Navigieren Sie zum Verzeichnis PythonApp/templates und erstellen Sie eine HTML-Datei mit dem Namen signup.html. Fügen Sie den folgenden HTML-Code zu signup.html hinzu:

Fügen Sie dem statischen Ordner in PythonApp außerdem das folgende CSS als signup.css hinzu.

Fügen Sie in app.py eine weitere Methode namens showSignUp hinzu, um die Anmeldeseite zu rendern, sobald eine Anforderung nach /showSignUp gestellt wird:

Speichern Sie die Änderungen und starten Sie den Server neu. Klicken Sie auf der Startseite auf die Anmelden (Sign Up)-Taste, und die Anmeldeseite sollte wie gezeigt angezeigt werden:

Sign Up user page

Schritt 3: Implementieren Sie eine Anmeldemethode

Als Nächstes benötigen wir eine serverseitige Methode, damit die Benutzeroberfläche mit der MySQL-Datenbank interagieren kann. Navigieren Sie also zu PythonApp und öffnen Sie app.py. Erstellen Sie eine neue Methode namens signUp und fügen Sie auch eine Route /signUp hinzu. So sieht es aus:

Wir werden jQuery AJAX verwenden, um unsere Anmeldedaten an die signUp-Methode zu senden. Daher geben wir die Methode in der Routendefinition an.

Um die gebuchten Werte zu lesen, müssen wir request aus der Flask importieren.

Mit request können wir die gebuchten Werte wie folgt lesen:

Sobald die Werte gelesen sind, überprüfen wir einfach, ob sie gültig sind, und lassen Sie uns vorerst eine einfache Nachricht zurückgeben:

Importieren Sie auch json aus Flask, da wir ihn im obigen Code verwenden, um json-Daten zurückzugeben.

Schritt 4: Erstellen Sie eine Registrierungsanfrage

Wir werden jQuery AJAX verwenden, um die Anmeldeanforderung an die Python-Methode zu senden. Laden Sie jQuery in PythonApp/static/js herunter, und fügen Sie es von der Anmeldeseite aus hinzu. Sobald jQuery enthalten ist, fügen wir eine jQuery-POST-Anforderung hinzu, wenn der Benutzer auf die Sign Up-Taste klickt.

Fügen wir also das Klickereignis der Anmeldetaste wie gezeigt hinzu:

Speichern Sie alle Änderungen und starten Sie den Server neu. Geben Sie auf der Sign Up-Seite die Details ein und klicken Sie auf Sign Up. Überprüfen Sie die Browserkonsole und Sie sollten die folgende Meldung haben:

Schritt 5: Rufen Sie die gespeicherte MySQL-Prozedur auf

Sobald wir name, die email address und das password haben, können wir einfach die gespeicherte Prozedur von MySQL aufrufen, um den neuen Benutzer zu erstellen.

Um sich mit MySQL zu verbinden, verwenden wir Flask-MySQL, eine Flask-Erweiterung. Um mit Flask-MySQL zu beginnen, installieren Sie es mit dem pip-Paketmanager:

Importieren Sie MySQL in app.py:

Zuvor haben wir unsere App wie folgt definiert:

Dazu gehören die folgenden MySQL-Konfigurationen:

Zuerst erstellen wir die MySQL-Verbindung:

Sobald die Verbindung hergestellt ist, benötigen wir einen cursor, um unsere gespeicherte Prozedur abzufragen. Erstellen Sie einen Cursor mit conn-Verbindung.

Bevor wir die gespeicherte Prozedur create user aufrufen, lassen Sie uns unser Kennwort mit einem von Werkzeug bereitgestellten Helfer salzen. Importieren Sie das Modul in app.py:

Verwenden Sie das Salting-Modul, um das Hash-Kennwort zu erstellen.

Rufen wir nun die Prozedur sp_createUser auf:

Wenn die Prozedur erfolgreich ausgeführt wird, übernehmen Sie die Änderungen und senden die Erfolgsmeldung zurück.

Speichern Sie die Änderungen und starten Sie den Server neu. Gehen Sie zur Anmeldeseite, geben Sie name, email-adresse und password ein und klicken Sie auf die Anmelden (Sign Up)-Taste. Bei erfolgreicher Benutzererstellung wird eine Nachricht in der Browserkonsole angezeigt.

Packen Sie es ein

In diesem Tutorial haben wir gesehen, wie Sie mit dem Erstellen einer Webanwendung mit Python Flask, MySQL und der Erweiterung Flask-MySQL beginnen können. Wir haben die Datenbanktabellen und die gespeicherte Prozedur erstellt und entworfen und die Anmeldefunktionalität implementiert. Im nächsten Tutorial werden wir diese Serie auf die nächste Stufe bringen, indem wir die Anmeldefunktionalität und einige andere Funktionen implementieren.

Der Quellcode aus diesem Tutorial ist auf GitHub verfügbar.

Teilen Sie uns Ihre Meinung in den Kommentaren unten mit!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.