[PYTHON] Erstellen einer Webanwendung mit Flask ①

Kolben einstellen

Zunächst [HTML-Vorlage](https://sbcr-dl-and-idea.s3-ap-northeast-1.amazonaws.com/2019-03-16-98892-HTML+%26+CSS%E3%81 % A8Web% E3% 83% 87% E3% 82% B6% E3% 82% A4% E3% 83% B3% E5% 85% A5% E9% 96% 80% E8% AC% 9B% E5% BA% A7 /HTML-CSS-Webdesign-2.zip) wurde verwendet, um eine HTML / CSS-Datei für die Nur-Café-Site zu erstellen, und die Routing-Verarbeitung wurde mit Flask of Python durchgeführt, damit über die URL darauf zugegriffen werden konnte. (Da es sich um einen Erklärungsartikel von Flask handelt, werde ich hier nicht erklären, wie die ursprüngliche HTML-Datei erstellt wird.)

app.py

flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
     return render_template('index.html', id="home")

@app.route('/menu')
def menu():
     return render_template('menu.html', id="menu")

@app.route('/news')
def news():
     return render_template('news.html', id="news")

@app.route('/contact')
def contact():
     return render_template('contact.html', id="contact")


if __name__ == '__main__':
    app.debug = True
    app.run()

Eingabe- und Ausgabeformulare verarbeiten

Zu dieser Zeit hatte ich wenig Programmiererfahrung und ich hatte sehr wenig Erfahrung mit Python, geschweige denn mit Flask, also versuchte ich, Eingabeformulare und Ausgabeformulare einfach zum Üben zu verarbeiten.

app.py

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/')
def index():
     return render_template('index.html', id="home")

@app.route('/menu')
def menu():
     return render_template('menu.html', id="menu")

@app.route('/news')
def news():
     return render_template('news.html', id="news")

@app.route('/contact')
def contact():
     return render_template('contact.html', id="contact")

@app.route('/review', methods=['GET'])
def review():
     return render_template('review.html', id="review")

@app.route('/review', methods=['POST'])
def view_board():
     if request.form['username'] and request.form['star'] and request.form['review']:
          return render_template('review.html',  username=request.form['username'], star=request.form['star'], review=request.form['review'])


if __name__ == '__main__':
    app.debug = True
    app.run()

review.html

{% extends "theme.html" %}
{% block title %}Coffee House{% endblock %}
{% block head %}
  {{ super() }}
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
{% endblock %}
{% block content %}
    <div class="form-content wrapper">
        <h2 class="page-title">Review</h2>
        <form method="POST" action="/review">
            <div>
                <label for="name">Name</label>
                <input placeholder="Name" name="username" type="text"/>
            </div>
            <div class="star-rating">
                <div class="star-rating__wrap">
                  <input class="star-rating__input" id="star-rating-5" type="radio" name="star" value="5">
                  <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-5" title="5 out of 5 stars"></label>
                  <input class="star-rating__input" id="star-rating-4" type="radio" name="star" value="4">
                  <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-4" title="4 out of 5 stars"></label>
                  <input class="star-rating__input" id="star-rating-3" type="radio" name="star" value="3">
                  <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-3" title="3 out of 5 stars"></label>
                  <input class="star-rating__input" id="star-rating-2" type="radio" name="star" value="2">
                  <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-2" title="2 out of 5 stars"></label>
                  <input class="star-rating__input" id="star-rating-1" type="radio" name="star" value="1">
                  <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-1" title="1 out of 5 stars"></label>
                </div>
            </div>
            <div>
                <label for="message">Botschaft</label>
                <textarea id="message" placeholder="Rezension" name="review"></textarea>
            </div>
            <input type="submit" class="button" value="Senden">
        </form>
    </div>
{% endblock %}
{% block content2 %}
    <div class="wrapper board">
      <p>name : {{username}}</p>
    {% if star == '1' %}
      <p>rating : <img src="/static/images/star.png " width="15" height="15"></p>
    {% endif %}
    {% if star == '2' %}
      <p>rating : <img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"></p>
    {% endif %}
    {% if star == '3' %}
    <p>rating : <img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"></p>
    {% endif %}
    {% if star == '4' %}
    <p>rating : <img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"></p>
    {% endif %}
    {% if star == '5' %}
    <p>rating : <img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"></p>
    {% endif %}
      <p>message : {{review}}</p>
    </div>
{% endblock %}
{% block footer %}
    <footer>
        <div class="wrapper">
            <p><small>&copy; Coffee House</small></p>
        </div>
    </footer>
{% endblock %}

Ich habe mich hier zum ersten Mal mit ** jinja2 ** befasst, aber ich habe versucht, die Schleifensyntax bei der Verarbeitung der Ausgabe der Sternebewertung zu verwenden, aber es hat nicht funktioniert, also habe ich die ** if-else-Anweisung ** verwendet Die Ausgabeverarbeitung der Sternebewertung wird beschrieben. (Die Haupteingabe war * font-awesome * und die Ausgabe war eine * PNG-Datei *.)

Struktur des Anwendungsordners

Bei der Verarbeitung verschiedener Funktionen ist es besser, die Dateien für jede Funktion zu trennen, da es Vorteile wie Lesbarkeit, Lesbarkeit und einfache Aktualisierung gibt. Daher habe ich mich entschlossen, zuerst die Dateistruktur zu berücksichtigen.

Erstellen der Anwendungskörperdatei

Erstellen Sie einen Ordner cafe_site im Stammverzeichnis und erstellen Sie darin eine Datei ** __ init__.py **

python:./cafe_site/__init__.py

from flask import Flask

app=Flask(__name__)

import cafe_site.views

Erstellen einer Ansichtsdatei

Erstellen Sie als Nächstes einen Ordner "views" im Ordner "cafe_site" und speichern Sie das Skript, das die zuvor erstellte Cafe-Site ausgibt, als views.py-Datei darin.

python:./cafe_site/views.py

from flask import request, redirect, url_for, render_template, flash, session
from cafe_site import app


@app.route('/')
def index():
     return render_template('cafe_site/index.html', id="home")


@app.route('/menu')
def menu():
     return render_template('cafe_site/menu.html', id="menu")


@app.route('/news')
def news():
     return render_template('cafe_site/news.html', id="news")


@app.route('/contact')
def contact():
     return render_template('cafe_site/contact.html', id="contact")


@app.route('/review', methods=['GET'])
def review():
     return render_template('review.html', id="review")


@app.route('/review', methods=['POST'])
def view_board():
     if request.form['username'] and request.form['star'] and request.form['review']:
          return render_template('review.html',  username=request.form['username'], star=request.form['star'], review=request.form['review'])

Startdatei erstellen

Erstellen Sie abschließend die Startdatei server.py “direkt unter dem Stammverzeichnis.

python:./server.py

from cafe_site import app

if __name__ == '__main__':
    app.run(debug=True)

Jetzt können Sie die Kolbenanwendung vorerst starten.

Konfigurationsdatei erstellen

Die Datei config.py ist eine Datei, die die Umgebungsinformationen und Einstellungsinformationen der Anwendung beschreibt.

python:./cafe_site/config.py

DEBUG = True

In dieser Anwendung ist der Debug-Modus als Einstellungsinformation aktiviert. (Delete'debug = True'listed in server.py.)

Aktivieren Sie config.py

Deklarieren Sie, den Inhalt von config.py als config in der Datei init.py zu behandeln, um die Konfigurationsdatei zu aktivieren.

python:./__init__.py

app.config.from_object('cafe_site.config')

MTV-Framework

Hier möchte ich Flask in drei Teile, Modell, Vorlage und Ansicht, unterteilen und jede Funktion verarbeiten.

Wenn ein Benutzer darauf zugreift, verarbeitet Flask dies wie folgt.

1. Der Benutzer greift auf eine URL zu

2. Lesen Sie die URL, auf die zugegriffen wird, und führen Sie den mit der vordefinierten URL verknüpften Prozess aus (Ansicht).

3. Greifen Sie auf die Datenbank über ein Objekt zu, das bei Bedarf während der Verarbeitung als Modell bezeichnet wird (Modell).

4. Geben Sie eine Vorlage wie HTML zurück, die dem Benutzer am Ende des Vorgangs angezeigt werden soll (Vorlage).

• Auf diese Weise kann die Verarbeitung in Flask grob in drei Typen unterteilt werden: MTV.

Template Platzieren Sie den Vorlagenordner unter dem Ordner cafe_site und ordnen Sie die HTML-Dateien so an, dass sie dem Benutzer darin angezeigt werden.

html:./cafe_site/templates/theme.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        {% block head %}
        <meta charset="utf-8">
        <title>{% block title %}{% endblock %}</title>
        <meta name="description" content="Café, das Arbeitsraum bietet">
        <link rel="icon" type="image/png" href="/static/images/favicon.png ">
        <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
        <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
        <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
        <link href="/static/style.css" rel="stylesheet">
        {% endblock %}
    </head>

    <body>
        <div id="{{ id }}" class="big-bg">
            <header class="page-header wrapper">
                <h1><a href="/"><img class="logo" src="/static/images/logo.svg" alt="Kaffeehaus nach Hause"></a></h1>
                <nav>
                    <ul class="main-nav">
                        <li><a href="/news">News</a></li>
                        <li><a href="/menu">Menu</a></li>
                        <li><a href="/contact">Contact</a></li>
                        <li><a href="/review">Review</a></li>
                    </ul>
                </nav>
            </header>
            {% block content %}
            {% endblock %}
        </div>
        {% block content2 %}
        {% endblock %}
        {% block footer %}
        {% endblock %}
    </body>
</html>

html:./cafe_site/templates/index.html

{% extends "theme.html" %}
{% block title %}Coffee House{% endblock %}
{% block head %}
  {{ super() }}
{% endblock %}
{% block content %}
    <div class="home-content wrapper">
        <h2 class="page-title">We Make Your Relax Space </h2>
        <p>Warum nutzen Sie kein ruhiges Café im Raum zum Arbeiten und Lernen? Wir bieten einen entspannenden Raum.</p>
        <a class="button" href="/menu">Ansicht-Menü</a>
    </div><!-- /.home-content -->
{% endblock %}

html:./cafe_site/templates/menu.html

{% extends "theme.html" %}
{% block title %}Coffee House{% endblock %}
{% block head %}
  {{ super() }}
{% endblock %}
{% block content %}
    <div class="menu-content wrapper">
        <h2 class="page-title">Menu</h2>
        <p>
Coffee House bietet eine mediterrane Ernährung, die Ihnen hilft, sich zu konzentrieren. Es bietet ein Menü mit Zutaten aus Meeresfrüchten.
Für den Kaffeemischungen werden sorgfältig ausgewählte Mokka-Bohnen verwendet. Mit mediterranem Essen, leckerem Kaffee und einem ruhigen Raum können Sie besser arbeiten und lernen.
        </p>
    </div><!-- /.menu-content -->
{% endblock %}
{% block content2 %}
    <div class="wrapper grid">
        <div class="item">
            <img src="/static/images/menu1.jpg " alt="">
            <p>Kaffeeset</p>
        </div>
        <div class="item">
            <img src="/static/images/menu2.jpg " alt="">
            <p>Kaffee Latte</p>
        </div>
        <div class="item">
            <img src="/static/images/menu3.jpg " alt="">
            <p>Pfannkuchen</p>
        </div>
        <div class="item">
            <img src="/static/images/menu4.jpg " alt="">
            <p>Suppe</p>
        </div>
        <div class="item">
            <img src="/static/images/menu5.jpg " alt="">
            <p>Salat</p>
        </div>
        <div class="item">
            <img src="/static/images/menu6.jpg " alt="">
            <p>Auster</p>
            </div>
        <div class="item">
            <img src="/static/images/menu7.jpg " alt="">
            <p>Tom Yam Kung</p>
        </div>
        <div class="item">
            <img src="/static/images/menu8.jpg " alt="">
            <p>Meeresfrüchte Pasta</p>
        </div>
        <div class="item">
            <img src="/static/images/menu9.jpg " alt="">
            <p>Himbeerkuchen</p>
        </div>
    </div><!-- /.grid -->
{% endblock %}
{% block footer %}
    <footer>
        <div class="wrapper">
            <p><small>&copy; Coffee House</small></p>
        </div>
    </footer>
{% endblock %}

html:./cafe_site/templates/news.html

{% extends "theme.html" %}
{% block title %}Coffee House{% endblock %}
{% block head %}
  {{ super() }}
{% endblock %}
{% block content %}
    <div class="wrapper">
        <h2 class="page-title">News</h2>
    </div><!-- /.wrapper -->
{% endblock %}
{% block content2 %}
    <div class="news-contents wrapper">
        <article>
            <header class="post-info">
                <h2 class="post-title">Das Innere des Ladens wurde erneuert.</h2>
                <p class="post-date">1/1 <span>2020</span></p>
                <p class="post-cat">Kategorie: Shopeinführung</p>
            </header>
            <img src="/static/images/wall.jpg " alt="Im Laden">
            <p>
Ich habe das Innere des Ladens ein wenig verändert.
            </p>
            <p>
Der Raum ist erfrischender als zuvor.
            </p>
            <p>WCB CAFE bietet mediterranes Essen und Kaffeemischungen.</p>
        </article>

        <aside>
            <h3 class="sub-title">Kategorie</h3>
            <ul class="sub-menu">
                <li><a href="#">Shop-Einführung</a></li>
                <li><a href="#">Zeitlich begrenztes Menü</a></li>
                <li><a href="#">Veranstaltung</a></li>
                <li><a href="#">Gespräch mit Kunden</a></li>
            </ul>

            <h3 class="sub-title">Über diesen Shop</h3>
            <p>
Möchten Sie einen entspannenden Raum zum Arbeiten oder Lernen nutzen?
Wir bieten es.
            </p>
        </aside>
    </div><!-- /.news-contents -->
{% endblock %}
{% block footer %}
    <footer>
        <div class="wrapper">
            <p><small>&copy; Coffee House</small></p>
        </div>
    </footer>
{% endblock %}

html:./cafe_site/templates/contact.html

{% extends "theme.html" %}
{% block title %}Coffee House{% endblock %}
{% block head %}
  {{ super() }}
{% endblock %}
{% block content %}
    <div class="wrapper">
        <h2 class="page-title">Contact</h2>
        <form action="#">
            <div>
                <label for="message">Botschaft</label>
                <textarea id="message" name="your-message"></textarea>
            </div>

            <input type="submit" class="button" value="Senden">
        </form>
    </div><!-- /.wrapper -->
{% endblock %}
{% block content2 %}
    <section id="location">
        <div class="wrapper">
            <div class="location-info">
                <h3 class="sub-title">Kaffeehaus Naha</h3>
                <p>
Adresse: Naha City, Präfektur Okinawa<br>
                    〇〇〇〇〇〇〇 900-0000<br>
                    〇〇〇〇<br>
Telefon: 11-1111-1111<br>
Geschäftszeiten: 13:00〜20:00<br>
Feiertage: Mittwoch
                </p>
            </div><!-- /.location-info -->
            <div class="location-map">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1789.7269103206745!2d127.6771741081368!3d26.21443990219555!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x34e5699c49922617%3A0xda1a9bb8fcac1213!2z44CSOTAwLTAwMTUg5rKW57iE55yM6YKj6KaH5biC5LmF6IyC5Zyw77yR5LiB55uu!5e0!3m2!1sja!2sjp!4v1585272464198!5m2!1sja!2sjp" width="800" height="400" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
            </div><!-- /.location-map -->
        </div><!-- /.wrapper -->
    </section><!-- /#location -->

    <section id="sns">
        <div class="wrapper">
            <div class="sns-box">
                <h3 class="sub-title">Facebook</h3>
                <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&tabs=timeline&width=340&height=315&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=false&appId" width="340" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
            </div>

            <div class="sns-box">
                <h3 class="sub-title">Twitter</h3>
                <a class="twitter-timeline" data-height="315" href="https://twitter.com/CoffeeH95724918?ref_src=twsrc%5Etfw">Tweets by CoffeeH95724918</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
            </div>

            <div class="sns-box">
                <h3 class="sub-title">Youtube</h3>
                <iframe width="560" height="315" src="https://www.youtube.com/embed/VDoTkxg9Rac" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div><!-- /.wrapper -->
    </section><!-- /#sns -->
{% endblock %}
{% block footer %}
    <footer>
        <div class="wrapper">
            <p><small>&copy; Coffee House</small></p>
        </div>
    </footer>
{% endblock %}

review.html

{% extends "theme.html" %}
{% block title %}Coffee House{% endblock %}
{% block head %}
  {{ super() }}
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
{% endblock %}
{% block content %}
    <div class="form-content wrapper">
        <h2 class="page-title">Review</h2>
        <form method="POST" action="/review">
            <div>
                <label for="name">Name</label>
                <input placeholder="Name" name="username" type="text"/>
            </div>
            <div class="star-rating">
                <div class="star-rating__wrap">
                  <input class="star-rating__input" id="star-rating-5" type="radio" name="star" value="5">
                  <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-5" title="5 out of 5 stars"></label>
                  <input class="star-rating__input" id="star-rating-4" type="radio" name="star" value="4">
                  <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-4" title="4 out of 5 stars"></label>
                  <input class="star-rating__input" id="star-rating-3" type="radio" name="star" value="3">
                  <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-3" title="3 out of 5 stars"></label>
                  <input class="star-rating__input" id="star-rating-2" type="radio" name="star" value="2">
                  <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-2" title="2 out of 5 stars"></label>
                  <input class="star-rating__input" id="star-rating-1" type="radio" name="star" value="1">
                  <label class="star-rating__ico fa fa-star-o fa-lg" for="star-rating-1" title="1 out of 5 stars"></label>
                </div>
            </div>
            <div>
                <label for="message">Botschaft</label>
                <textarea id="message" placeholder="Rezension" name="review"></textarea>
            </div>
            <input type="submit" class="button" value="Senden">
        </form>
    </div>
{% endblock %}
{% block content2 %}
    <div class="wrapper board">
      <p>name : {{username}}</p>
    {% if star == '1' %}
      <p>rating : <img src="/static/images/star.png " width="15" height="15"></p>
    {% endif %}
    {% if star == '2' %}
      <p>rating : <img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"></p>
    {% endif %}
    {% if star == '3' %}
    <p>rating : <img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"></p>
    {% endif %}
    {% if star == '4' %}
    <p>rating : <img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"></p>
    {% endif %}
    {% if star == '5' %}
    <p>rating : <img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"><img src="/static/images/star.png " width="15" height="15"></p>
    {% endif %}
      <p>message : {{review}}</p>
    </div>
{% endblock %}
{% block footer %}
    <footer>
        <div class="wrapper">
            <p><small>&copy; Coffee House</small></p>
        </div>
    </footer>
{% endblock %}

• Erstellen Sie einen statischen Ordner sowie den Vorlagenordner und platzieren Sie die Bilddatei und die CSS-Datei, die als HTML ausgegeben werden sollen, darin.

css:./cafe_site/static/style.css

@charset "UTF-8";

/* ********************
allgemeiner Teil
******************** */
html {
    font-size: 100%;
}
body{
    font-family: "Yu Gothic Medium", "Yu Gothic Medium", YuGothic, "Yu Gothic", "Hiragino Kakugo Pro W3", sans-serif;
    line-height: 1.7;
    color: rgb(0, 0, 0);
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}
.wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 4%;
}

/*Hintergrundbild*/
.big-bg {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

/*Überschrift*/
.page-title {
    font-size: 5rem;
    font-family: 'Philosopher', serif;
    text-transform: uppercase;
    font-weight: normal;
}
.sub-title {
    font-size: 1.375rem;
    padding: 0 8px 8px;
    border-bottom: 2px #0bd solid;
    font-weight: normal;
}

/*Taste*/
.button {
    font-size: 1.375rem;
    background: #0bd;
    color: #fff;
    border-radius: 5px;
    padding: 18px 32px;
}
.button:hover {
    background: #0090aa;
}

/* iframe */
iframe {
    width: 100%;
}


/* ********************
    HEADER
******************** */
.page-header {
    display: flex;
    justify-content: space-between;
}
.logo {
    width: 210px;
    margin-top: 14px;
}
.main-nav {
    display: flex;
    font-size: 1.25rem;
    text-transform: uppercase;
    margin-top: 34px;
    list-style: none;
}
.main-nav li {
    margin-left: 36px;
}
.main-nav a {
    color: rgb(0, 0, 0);
}
.main-nav a:hover {
    color: #0bd;
}

/* ********************
    HOME
******************** */
#home {
    background-image: url(./images/main-bg.jpg);
    min-height: 100vh;
}
#home .page-title {
    text-transform: none;
}
.home-content {
    text-align: center;
    margin-top: 10%;
}
.home-content p {
    font-size: 1.125rem;
    margin: 10px 0 42px;
}

/* ********************
    NEWS
******************** */
#news {
    background-image: url(./images/news-bg.jpg);
    height: 270px;
    margin-bottom: 40px;
}
#news .page-title {
    text-align: center;
}
.news-contents {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}

/* ********************
Artikelteil
******************** */
article {
    width: 74%;
}
.post-info {
    position: relative;
    padding-top: 4px;
    margin-bottom: 40px;
}
.post-date {
    background: #0bd;
    border-radius: 50%;
    color: #fff;
    width: 100px;
    height: 100px;
    font-size: 1.625rem;
    text-align: center;
    position: absolute;
    top: 0;
    padding-top: 10px;
}
.post-date span {
    font-size: 1rem;
    border-top: 1px rgba(255,255,255,.5) solid;
    padding-top: 6px;
    display: block;
    width: 60%;
    margin: 0 auto;
}
.post-title {
    font-family: "Yu Mincho", "YuMincho", serif;
    font-size: 2rem;
    font-weight: normal;
}
.post-title,
.post-cat {
    margin-left: 120px;
}
article img {
    margin-bottom: 20px;
}
article p {
    margin-bottom: 1rem;
}

/*Seitenleiste*/
aside {
    width: 22%;
}
.sub-menu {
    margin-bottom: 60px;
    list-style: none;
}
.sub-menu li {
    border-bottom: 1px #ddd solid;
}
.sub-menu a {
    color: rgb(0, 0, 0);
    padding: 10px;
    display: block;
}
.sub-menu a:hover {
    color: #0bd;
}
aside p {
    padding: 12px 10px;
}

/* ********************
    MENU
******************** */
#menu {
    background-image: url(./images/menu-bg.jpg);
    min-height: 100vh;
}
.menu-content {
    max-width: 560px;
    margin-top: 10%;
}
.menu-content .page-title {
    text-align: center;
}
.menu-content p {
    font-size: 1.125rem;
    margin: 10px 0 0;
}

.grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 6%;
  margin-bottom: 50px;
}

/* ********************
    CONTACT
******************** */
#contact {
    background-image: url(./images/contact-bg.jpg);
    min-height: 100vh;
}

/*Bilden*/
form div {
    margin-bottom: 14px;
}
label {
    font-size: 1.125rem;
    margin-bottom: 10px;
    display: block;
}
input[type="text"],
input[type="email"],
textarea {
    background: rgba(255,255,255,.5);
    border: 1px #fff solid;
    border-radius: 5px;
    padding: 10px;
    font-size: 1rem;
}
input[type="text"],
input[type="email"] {
    width: 100%;
    max-width: 240px;
}
textarea {
    width: 100%;
    max-width: 480px;
    height: 6rem;
}
input[type="submit"] {
    border: none;
    cursor: pointer;
    line-height: 1;
}

/*Informationen / Karte speichern*/
#location {
    padding: 4% 0;
}
#location .wrapper {
    display: flex;
    justify-content: space-between;
}
.location-info {
    width: 22%;
}
.location-info p {
    padding: 12px 10px;
}
.location-map {
    width: 74%;
}

/* SNS */
#sns {
    background: #FAF7F0;
    padding: 4% 0;
}
#sns .wrapper {
    display: flex;
    justify-content: space-between;
}
#sns .sub-title {
    margin-bottom: 30px;
}
.sns-box {
    width: 30%;
}

/* ********************
    review
******************** */
#review {
    background-image: url(./images/review-bg.jpg);
    min-height: 100vh;
}

.form-content {
    max-width: 560px;
    margin-top: 10%;
}
.form-content .page-title {
    text-align: center;
}
form div {
    margin-bottom: 14px;
}
label {
    font-size: 1.125rem;
    margin-bottom: 10px;
    display: block;
}
input[type="text"],
textarea {
    background: rgba(255,255,255,.5);
    border: 1px #fff solid;
    border-radius: 5px;
    padding: 10px;
    font-size: 1rem;
}
input[type="text"] {
    width: 100%;
    max-width: 240px;
}
textarea {
    width: 100%;
    max-width: 480px;
    height: 6rem;
}
input[type="submit"] {
    border: none;
    cursor: pointer;
    line-height: 1;
}
.star-rating{
	font-size: 0;
}
.star-rating__wrap{
	display: inline-block;
	font-size: 1rem;
}
.star-rating__wrap:after{
	content: "";
	display: table;
	clear: both;
}
.star-rating__ico{
	float: right;
	padding-left: 2px;
	cursor: pointer;
	color: #FFB300;
}
.star-rating__ico:last-child{
	padding-left: 0;
}
.star-rating__input{
	display: none;
}
.star-rating__ico:hover:before,
.star-rating__ico:hover ~ .star-rating__ico:before,
.star-rating__input:checked ~ .star-rating__ico:before
{
	content: "\f005";
}
.board {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 6%;
    margin-bottom: 50px;
}

/* ********************
Fusszeile
******************** */
footer {
    background: rgb(0, 0, 0);
    text-align: center;
    padding: 26px 0;
}
footer p {
    color: #fff;
    font-size: 0.875rem;
}

/* ********************
mobile Version
******************** */
@media (max-width: 600px) {
    .page-title {
        font-size: 2.5rem;
    }
    .page-header {
        flex-direction: column;
        align-items: center;
    }

    /* HEADER */
    .main-nav {
        font-size: 1rem;
        margin-top: 10px;
    }
    .main-nav li {
        margin: 0 20px;
    }

    /* HOME */
    .home-content {
        margin-top: 20%;
    }

    /* NEWS */
    .news-contents {
        flex-direction: column;
    }
    #news .page-title {
        margin-top: 30px;
    }
    article,
    aside {
        width: 100%;
    }
    aside {
        margin-top: 60px;
    }
    .post-info {
        margin-bottom: 30px;
    }
    .post-date {
        width: 70px;
        height: 70px;
        font-size: 1rem;
    }
    .post-date span {
        font-size: 0.875rem;
        padding-top: 2px;
    }
    .post-title {
        font-size: 1.375rem;
    }
    .post-cat {
        font-size: 0.875rem;
        margin-top: 10px;
    }
    .post-title,
    .post-cat {
        margin-left: 80px;
    }

    /* MENU */
    .menu-content {
        margin-top: 20%;
    }

    /* CONTACT */
    #contact .page-title {
        margin-top: 40px;
    }

    /*Bilden*/
    input[type="text"],
    input[type="email"],
    textarea {
        max-width: 100%;
    }

    /*Informationen / Karte speichern/ SNS */
    #location .wrapper,
    #sns .wrapper {
        flex-direction: column;
    }
    .location-info,
    .location-map,
    .sns-box {
        width: 100%;
    }
    .sns-box {
        margin-bottom: 30px;
    }
}

Anmeldeformular erstellen

Jetzt erstellen wir ein Benutzeranmeldeformular. Dieses Mal erstellen wir eine Funktion, mit der Sie ein Blog veröffentlichen können, indem Sie sich anmelden. Es wäre ein Problem, wenn jemand ein Blog veröffentlichen, bearbeiten oder löschen könnte. Erstellen Sie daher HTML, das die Benutzerauthentifizierungsfunktion übernimmt, sodass nur Personen darauf zugreifen können, die die Benutzer-ID und das Kennwort kennen.

html:./cafe_site/templates/login.html

{% extends "theme.html" %}
{% block title %}Coffee House{% endblock %}
{% block head %}
  {{ super() }}
{% endblock %}
{% block content %}
{% for message in get_flashed_messages() %}
<div class="alert">
  <font color="red">
    <p>※{{ message }}</p>
  </font>
</div>
{% endfor %}
{% endblock %}

{% block content2 %}
<form action="{{ url_for('login') }}" method=post>
  <div>
    <label for="InputTitle">Nutzername</label>
    <input type="text" id="InputTitle" name=username>
  </div>

  <div>
    <label for="InputPassword">Passwort</label>
    <input type="password" id="InputPassword" name=password>
  </div>
    <input type="submit" class="button" value="Einloggen">
</form>
{% endblock %}

• Stellen Sie Login und Logout so ein, dass sie über die Navigationsleiste bedient werden können.

View Als nächstes fügen wir die Verarbeitung hinzu, wenn auf die URL zugegriffen wird. In views.py werden der Routing-Prozess und die damit verbundene Prozessmethode beschrieben. Hier fügen wir eine Ansicht zum An- und Abmelden hinzu und fügen eine ** Flash ** -Funktion hinzu, um den Benutzer über die ** Sitzungsverarbeitung ** sowie das An- und Abmelden zu informieren.

Sitzung hinzufügen

Diesmal wird die folgende Verarbeitung realisiert.

1. Nach erfolgreicher Anmeldung gibt der Server Sitzungsinformationen an die Browserseite (Client-Seite) zurück.

2. Der Client speichert die Sitzungsinformationen in einem Bereich, der als Cookie bezeichnet wird.

3. Danach stellt der Client eine Anfrage mit den Sitzungsinformationen und der Server ermittelt, ob er angemeldet ist oder nicht, indem er prüft, ob die Sitzungsinformationen korrekt sind.

Fügen Sie auf der Serverseite Flash hinzu

Speichern Sie in views.py das Ergebnis, das Sie für jede Aktion in Flash anzeigen möchten, und ändern Sie es so, dass es an den Client zurückgegeben werden kann.

views.py

from flask import request, redirect, url_for, render_template, flash, session
from cafe_site import app


@app.route('/')
def index():
     return render_template('cafe_site/index.html', id="home")


@app.route('/menu')
def menu():
     return render_template('cafe_site/menu.html', id="menu")


@app.route('/news')
def news():
     return render_template('cafe_site/news.html', id="news")



@app.route('/contact')
def contact():
     return render_template('cafe_site/contact.html', id="contact")


@app.route('/review', methods=['GET'])
def review():
     return render_template('cafe_site/review.html', id="review")


@app.route('/review', methods=['POST'])
def view_board():
     if request.form['star'] and request.form['title'] and request.form['review']:
          return render_template('cafe_site/review.html',  name=app.config['USERNAME'], star=request.form['star'], title=request.form['title'], review=request.form['review'])


@app.route('/review')
def show_entries():
    if not session.get('logged_in'):
        return redirect(url_for('login'))
    return render_template('cafe_site/review.html')


@app.route('/login', methods=['GET', 'POST'])
def login():
    error = None
    if request.method == 'POST':
        if request.form['username'] != app.config['USERNAME']:
            flash('Der Benutzername ist unterschiedlich')
        elif request.form['password'] != app.config['PASSWORD']:
            flash('Das Passwort ist anders')
        else:
            session['logged_in'] = True
            flash('Sie sind jetzt angemeldet')
            return redirect(url_for('show_entries'))
    return render_template('login.html')


@app.route('/logout')
def logout():
    session.pop('logged_in', None)
    flash('abgemeldet')
    return redirect(url_for('show_entries'))

Flask kann Sitzungsinformationen verarbeiten, indem die Sitzungsvariable behandelt wird. In ** / login ** wird der Wert von logged_in während der Sitzung auf True gesetzt, indem nach erfolgreicher Anmeldung session ['logged_in'] = True gesetzt wird. Von nun an können Sie feststellen, ob Sie angemeldet sind, indem Sie diesen Wert bei jeder Anforderung überprüfen. Löschen Sie nach dem Abmelden die Sitzungsinformationen. Stellen Sie sicher, dass Sie es als session.pop löschen ('logged_in', None). Flash-Verarbeitung Die Flash-Funktion fügt dem Flash-Flash ('Abgemeldet') ('Abgemeldet') eine Zeile hinzu, wenn die Anmeldung erfolgreich ist und wenn die Abmeldung durchgeführt wird. Die Nachricht wird nun zum Flash-Bereich hinzugefügt und Sie können die Nachricht an den Browser weiterleiten....

geheime Schlüsseleinstellung

python:./cafe_site/config.py

DEBUG = True
SECRET_KEY = 'bjgc5ejrwgwk'
USERNAME = 'syuuhei'
PASSWORD = 'abc123'

Legen Sie den geheimen Schlüssel in config.py fest. Dieser geheime Schlüssel wird zum Verschlüsseln der Sitzungsinformationen verwendet....

Legen Sie den geheimen Schlüssel in config.py fest. Dieser geheime Schlüssel wird zum Verschlüsseln der Sitzungsinformationen verwendet. Schalten Sie die Menüanzeige entsprechend den Sitzungsinformationen um

theme.html

<nav>
    <ul class="main-nav">
       {% if not session.logged_in %}
        <li><a href="/news">News</a></li>
        <li><a href="/menu">Menu</a></li>
        <li><a href="/contact">Contact</a></li>
        <li><a href="/login">login</a></li>
       {% else %}
        <li><a href="/news">News</a></li>
        <li><a href="/menu">Menu</a></li>
        <li><a href="/contact">Contact</a></li>
        <li><a href="/review">Review</a></li>
        <li><a href="/logout">logout</a></li>
       {% endif %}
    </ul>
</nav>

theme.html

{% if not session.logged_in %}
Legen Sie den geheimen Schlüssel in config.py fest. Dieser geheime Schlüssel wird zum Verschlüsseln der Sitzungsinformationen verwendet. Schalten Sie die Menüanzeige entsprechend den Sitzungsinformationen um
{% else %}
Legen Sie den geheimen Schlüssel in config.py fest. Dieser geheime Schlüssel wird zum Verschlüsseln der Sitzungsinformationen verwendet. Schalten Sie die Menüanzeige entsprechend den Sitzungsinformationen um
{% endif %}

Legen Sie den geheimen Schlüssel in config.py fest. Dieser geheime Schlüssel wird zum Verschlüsseln der Sitzungsinformationen verwendet. Schalten Sie die Menüanzeige entsprechend den Sitzungsinformationen um... Bearbeiten Sie theme.html, um den in der Navigationsleiste angezeigten Link zu ändern, je nachdem, ob Sie angemeldet sind oder nicht. Verarbeitung, wenn Sie nicht angemeldet sind Verarbeitung Verarbeitung, wenn Sie angemeldet sind Wenn Sie nicht angemeldet sind, wird der Anmeldelink angezeigt, und wenn Sie angemeldet sind, wird der Abmeldelink angezeigt. > Die Fortsetzung wird unter Erstellen einer Webanwendung mit Flask② erläutert.