LabEx
AnmeldenKostenlos beitreten

Flask-Vorlagenerstellung

FlaskFlaskBeginner
Jetzt üben

This tutorial is from open-source community. Access the source code

💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken

Einführung

In diesem Lab werden wir lernen, wie man in Flask Vorlagen erstellt und verwendet. Vorlagen sind ein entscheidender Bestandteil von Webanwendungen. Sie ermöglichen es uns, dynamische HTML-Seiten zu generieren, die jedes Mal, wenn sie geladen werden, verschiedene Daten anzeigen können. Wir werden den mit Flask zusammenverpackten Jinja2-Vorlagenmotor verwenden.

Hinweis: Sie müssen die Code-Datei selbst erstellen und in der Umgebung ausführen. Sie können den Status des Flask-Diensts auf Web 5000 vorab anzeigen.

Erstellung des Basislayouts

Unser erster Schritt besteht darin, ein Basislayout zu erstellen, das für alle unsere Seiten verwendet werden soll. Dieses Basislayout wird die gemeinsamen Elemente unserer Anwendung wie die Navigationsleiste und den Seitentitel enthalten.

<!-- flaskr/templates/base.html -->
<!doctype html>
<title>{% block title %}{% endblock %} - Flaskr</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
<nav>
  <h1>Flaskr</h1>
  <ul>
    {% if g.user %}
    <li><span>{{ g.user['username'] }}</span></li>
    <li><a href="{{ url_for('auth.logout') }}">Abmelden</a> {% else %}</li>

    <li><a href="{{ url_for('auth.register') }}">Registrieren</a></li>
    <li>
      <a href="{{ url_for('auth.login') }}">Anmelden</a>
      {% endif %}
    </li>
  </ul>
</nav>
<section class="content">
  <header>{% block header %}{% endblock %}</header>
  {% for message in get_flashed_messages() %}
  <div class="flash">{{ message }}</div>
  {% endfor %} {% block content %}{% endblock %}
</section>

Registrierungsvorlage

Als nächstes werden wir eine Vorlage für die Registrierungsseite erstellen. Diese Vorlage wird unser Basislayout erweitern und den spezifischen Inhalt für diese Seite einfügen.

<!-- flaskr/templates/auth/register.html -->
{% extends 'base.html' %} {% block header %}
<h1>{% block title %}Registrieren{% endblock %}</h1>
{% endblock %} {% block content %}
<form method="post">
  <label for="username">Benutzername</label>
  <input name="username" id="username" required />
  <label for="password">Passwort</label>
  <input type="password" name="password" id="password" required />
  <input type="submit" value="Registrieren" />
</form>
{% endblock %}

Anmeldevorlage

Ähnlich werden wir eine Vorlage für die Anmeldeseite erstellen. Diese Vorlage wird ebenfalls unser Basislayout erweitern und den spezifischen Inhalt für diese Seite einfügen.

<!-- flaskr/templates/auth/login.html -->
{% extends 'base.html' %} {% block header %}
<h1>{% block title %}Anmelden{% endblock %}</h1>
{% endblock %} {% block content %}
<form method="post">
  <label for="username">Benutzername</label>
  <input name="username" id="username" required />
  <label for="password">Passwort</label>
  <input type="password" name="password" id="password" required />
  <input type="submit" value="Anmelden" />
</form>
{% endblock %}

Zusammenfassung

In diesem Lab haben wir gelernt, wie man in Flask Vorlagen erstellt und verwendet. Wir haben ein Basislayout erstellt, das die gemeinsamen Elemente unserer Anwendung enthält, und anschließend spezifische Vorlagen für die Registrierungs- und Anmeldeseiten erstellt, die dieses Basislayout erweitern und ihren spezifischen Inhalt einfügen. Dies ermöglicht es uns, unseren Code DRY (Don't Repeat Yourself) zu halten, was ihn wartbarer und fehleranfälliger macht.