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

German (Deutsch) translation by Katharina Grigorovich-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:

1	pip install flask

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:

1	from flask import Flask
2	app = Flask(__name__)

Definieren Sie nun die Basisroute / und den entsprechenden Anforderungshandler:

1	@app.route("/")
2	def main():
3	return "Welcome!"

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

1	if __name__ == "__main__":
2	app.run()

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

1	python app.py

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:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Python Flask Bucket List App</title>


    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">


</head>

<body>

    <div class="container">
        <div class="header">
            <nav>
                <ul class="nav nav-pills pull-right">
                    <li role="presentation" class="active"><a href="#">Home</a>
                    </li>
                    <li role="presentation"><a href="#">Sign In</a>
                    </li>
                    <li role="presentation"><a href="showSignUp">Sign Up</a>
                    </li>
                </ul>
            </nav>
            <h3 class="text-muted">Python Flask App</h3>
        </div>

        <div class="jumbotron">
            <h1>Bucket List App</h1>
            <p class="lead"></p>
            <p><a class="btn btn-lg btn-success" href="showSignUp" role="button">Sign up today</a>
            </p>
        </div>

        <div class="row marketing">
            <div class="col-lg-6">
                <h4>Bucket List</h4>
                <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

                <h4>Bucket List</h4>
                <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

                <h4>Bucket List</h4>
                <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
            </div>

            <div class="col-lg-6">
                <h4>Bucket List</h4>
                <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>

                <h4>Bucket List</h4>
                <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>

                <h4>Bucket List</h4>
                <p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
            </div>
        </div>

        <footer class="footer">
            <p>&copy; Company 2015</p>
        </footer>

    </div>
</body>

</html>

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

1	from flask import Flask, render_template

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

1	def main():
2	return render_template('index.html')

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:

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:

1	mysql -u <username> -p

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

1	CREATE DATABASE BucketList;

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

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`));

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:

DELIMITER $$
CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_createUser`(
    IN p_name VARCHAR(20),
	IN p_username VARCHAR(20),
	IN p_password VARCHAR(20)
)
BEGIN
	if ( select exists (select 1 from tbl_user where user_username = p_username) ) THEN
	
		select 'Username Exists !!';
	
	ELSE
	
		insert into tbl_user
		(
			user_name,
			user_username,
			user_password
		)
		values
		(
			p_name,
			p_username,
			p_password
		);
	
	END IF;
END$$
DELIMITER ;

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:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Python Flask Bucket List App</title>

   
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
    <link href="../static/signup.css" rel="stylesheet">
   
  </head>

  <body>

    <div class="container">
      <div class="header">
        <nav>
          <ul class="nav nav-pills pull-right">
            <li role="presentation" ><a href="main">Home</a></li>
            <li role="presentation"><a href="#">Sign In</a></li>
            <li role="presentation" class="active"><a href="#">Sign Up</a></li>
          </ul>
        </nav>
        <h3 class="text-muted">Python Flask App</h3>
      </div>

      <div class="jumbotron">
        <h1>Bucket List App</h1>
        <form class="form-signin">
        <label for="inputName" class="sr-only">Name</label>
        <input type="name" name="inputName" id="inputName" class="form-control" placeholder="Name" required autofocus>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" name="inputEmail" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" name="inputPassword" id="inputPassword" class="form-control" placeholder="Password" required>
        
        <button id="btnSignUp" class="btn btn-lg btn-primary btn-block" type="button">Sign up</button>
      </form>
      </div>

      

      <footer class="footer">
        <p>&copy; Company 2015</p>
      </footer>

    </div>
  </body>
</html>

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

body {
  padding-top: 40px;
  padding-bottom: 40px;
}

.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 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;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 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;
}

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

1	@app.route('/showSignUp')
2	def showSignUp():
3	return render_template('signup.html')

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:

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:

1	@app.route('/signUp')
2	def signUp():
3	# create user code will be here !!

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

1	@app.route('/signUp',methods=['POST'])
2	def signUp():
3	# create user code will be here !!

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

1	from flask import Flask, render_template, request

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

@app.route('/signUp',methods=['POST'])
def signUp():

    # read the posted values from the UI
    _name = request.form['inputName']
    _email = request.form['inputEmail']
    _password = request.form['inputPassword']

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

@app.route('/signUp',methods=['POST'])
def signUp():

    # read the posted values from the UI
    _name = request.form['inputName']
    _email = request.form['inputEmail']
    _password = request.form['inputPassword']

    # validate the received values
    if _name and _email and _password:
        return json.dumps({'html':'<span>All fields good !!</span>'})
    else:
        return json.dumps({'html':'<span>Enter the required fields</span>'})

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

1	from flask import Flask, render_template, json, request

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:

$(function() {
    $('#btnSignUp').click(function() {

        $.ajax({
            url: '/signUp',
            data: $('form').serialize(),
            type: 'POST',
            success: function(response) {
                console.log(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});

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:

1	{"html": "<span>All fields good !!</span>"}

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:

1	pip install flask-mysql

Importieren Sie MySQL in app.py:

1	from flask.ext.mysql import MySQL

Zuvor haben wir unsere App wie folgt definiert:

1	app = Flask(__name__)

Dazu gehören die folgenden MySQL-Konfigurationen:

mysql = MySQL()

# MySQL configurations
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)

Zuerst erstellen wir die MySQL-Verbindung:

1	conn = mysql.connect()

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

1	cursor = conn.cursor()

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:

1	from werkzeug import generate_password_hash, check_password_hash

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

1	_hashed_password = generate_password_hash(_password)

Rufen wir nun die Prozedur sp_createUser auf:

1	cursor.callproc('sp_createUser',(_name,_email,_hashed_password))

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

data = cursor.fetchall()

if len(data) is 0:
    conn.commit()
    return json.dumps({'message':'User created successfully !'})
else:
    return json.dumps({'error':str(data[0])})

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.

1	{"message": "User created successfully !"}

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!