Ich habe mit Python, Flask und Heroku ein Nyanko-Tweet-Formular erstellt
Ich habe Flask und Heroku verwendet, um ein einfaches Post-Formular zu erstellen.
(1) Ausgabebild
Ziel war es, ein einfaches Buchungsformular wie das folgende zu erstellen.
Geben Sie "Nya Nya" in den Tweet-Inhalt und "Tama" in die getwitterte Katze ein und drücken Sie die Senden-Taste.
Es wird so gepostet.
(2) Richten Sie eine virtuelle Umgebung ein
Erstellen Sie ein Verzeichnis mit dem Namen my_form auf dem Desktop, wechseln Sie in das Verzeichnis und legen Sie die virtuelle Umgebung fest. Starten Sie eine virtuelle Umgebung.
python3 -m venv .
source bin/activate
(3) Installieren Sie das erforderliche Framework und den WEB-Server
Kolben und Gunicorn einbauen.
pip install flask
pip install gunicorn
(4) Bereiten Sie die erforderlichen Verzeichnisse und Dateien vor (.py .html)
Erstellen Sie form.py im Verzeichnis my_form. Erstellen Sie außerdem ein Vorlagenverzeichnis und index.html sowie layout.html (im Vorlagenverzeichnis) im Verzeichnis my_form.
(4) Beschreiben Sie form.py
Beschreiben Sie Folgendes.
form.py
from flask import Flask,request,render_template
app = Flask(__name__)
@app.route("/")
def show():
return render_template("index.html")
@app.route("/result",methods=["POST"])
def result():
article = request.form["article"]
name = request.form["name"]
return render_template("index.html",article=article,name=name)
Durch den Import von render_template wurde die Umgebung für die Verwendung von Jinja2 vorbereitet. Die Jinja2-Vorlagen-Engine ruft die HTML-Vorlage auf (hier index.html).
In Bezug auf die Verarbeitung von @ app.route ("/") ruft Jinja2 zunächst index.html auf. Speziell,
return render_template("index.html" 〜）
Und.
In Bezug auf die Verarbeitung von @ app.route ("/ result", method = ["POST"]) können die in das Formular eingegebenen Daten durch Importieren von reuest auf der aufgerufenen HTML-Seite abgerufen werden. Beispiel: Für Artikel wird durch Festlegen von article = request.form ["article"] der Inhalt in das Formular auf der Seite index.html eingegeben (das Attribut name form auf der Seite index.html wird auf "article" gesetzt). (Angenommen) kann herausgenommen werden. Bei Methoden wird das Formular auf der Seite index.html diesmal von der POST-Methode gesendet, sodass es auf [POST] gesetzt wurde. Die Übertragung durch das GET-Verfahren wird später beschrieben.
article = request.form["article"]
Der extrahierte Artikel und der Inhalt des Namens werden als return render_template an index.html zurückgegeben. Weisen Sie zu diesem Zeitpunkt jedem Argumentartikel und -namen Werte zu.
return render_template("index.html",article=article,name=name)
Methoden ist POST
@app.route("/result",methods=["POST"])
(5) Beschreiben Sie layout.html
Erstellen Sie ein gemeinsames HTML, damit die Wartung des gemeinsamen Teils auch dann einfach ist, wenn das Vorlagenteil vergrößert wird.
layout.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Nyanco Form</title>
<style>body {padding: 10px;}</style>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
Einzelne Inhalte (index.html) können in die folgenden Teile eingepasst werden.
{% block content %}
(6) Beschreiben Sie index.html
index.html
{% extends "layout.html" %}
{% block content %}
<h1>Nyanko Tweet Form</h1>
<form action="/result" method="post">
<label for="article">Inhalt des Tweets</label>
<input type="text" name="article">
<p></p>
<label for="name">Tweeted Katze</label>
<input type="text" name="name">
<button type="submit">Senden</button>
</form>
<p></p>
<p>Tweet Inhalt/{{ article }}</p>
<p>Tweeted Katze/{{ name }}</p>
{% endblock %}
Der Inhalt von {% block content%} bis {% endblock%} wird in den Teil von layout.html eingefügt. Das Namensattribut der Eingabe ist "Artikel".
<input type="text" name="article">
Die Zieladresse lautet / result, und der im Formular eingegebene Inhalt wird von der POST-Methode gesendet.
<form action="/result" method="post">
(7) Versuchen Sie, in der lokalen Umgebung zu starten
Versuchen Sie, den Kolben wie folgt zu starten.
FLASK_APP=form.py flask run
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
Wenn Sie den Teil http: // ~ in den Browser einfügen,
Wenn es erscheint, ist es erfolgreich.
(8) Unterschied zwischen POST-Methode und GET-Methode
Ich habe diesmal die POST-Methode verwendet, aber ich werde auch die GET-Methode beachten.
Wenn Sie bei der POST-Methode das Formular senden,
Und wenn Sie sich die Adresse des Browsers ansehen,
Es ist geworden.
Wenn Sie dagegen die GET-Methode verwenden, ändern Sie form.py und index.html wie folgt.
form.py
from flask import Flask,request,render_template
app = Flask(__name__)
@app.route("/")
def show():
return render_template("index.html")
@app.route("/result",methods=["GET"])
def result():
article = request.args.get("article")
name = request.args.get("name")
return render_template("index.html",article=article,name=name)
index.html
{% extends "layout.html" %}
{% block content %}
<h1>Nyanko Tweet Form</h1>
<form action="/result" method="get">
<label for="article">Inhalt des Tweets</label>
<input type="text" name="article">
<p></p>
<label for="name">Tweeted Katze</label>
<input type="text" name="name">
<button type="submit">Senden</button>
</form>
<p></p>
<p>Tweet Inhalt/{{ article }}</p>
<p>Tweeted Katze/{{ name }}</p>
{% endblock %}
Wenn ich es sende und auf die Adresse des Browsers schaue,
Die GET-Methode dient zum Hinzufügen der zu sendenden Daten an das Ende der Adresse. Daher, welche Art von Daten von anderen Personen gesehen wird, wird sie für Anwendungen wie die Suche verwendet. Es ist nicht erforderlich, es für Formulare zu verwenden, in denen Kennwörter eingegeben werden.
(9) In Heroku bereitstellen
Die Details der Bereitstellung in Heroku sind wie im folgenden Artikel beschrieben, daher werde ich nur das Wesentliche verwenden und die ausführliche Erklärung weglassen. https://qiita.com/nooonchi/items/a7ea7c7a12c56ab8e901
Melden Sie sich bei Heroku an und erstellen Sie eine App auf Heroku
heroku login
Der App-Name ist Katzenform.
Heroku create cat-form
Initialisieren Sie das Verzeichnis my_form
git init
Heroku mit der lokalen Umgebung verbinden,
heroku git:remote -a cat-form
Erstellen Sie die Datei require.txt im Verzeichnis my_form
pip freeze > requirements.txt
Erstellen Sie eine Prockdatei im Verzeichnis my_form und geben Sie Folgendes ein: Zu diesem Zeitpunkt ist vor g ein Leerzeichen erforderlich, und das Formular vor: app bedeutet die Form von form.py. Seien Sie also vorsichtig.
web: gunicorn form:app --log-file -
hinzufügen,
git add .
Dieses Mal mit dem Namen the-first festschreiben,
git commit -m'the-first'
Schieben Sie zu Heroku.
git push heroku master
Schließlich,
heroku open
Dann ist es geschafft.
(10) Schlussfolgerung
In Zukunft möchte ich dies weiterentwickeln und das Bulletin Board herausfordern.
Nachtrag
--Flask-Bootstap wurde in dieses Formular eingeführt (2020.3.2) Ich habe ein Nyanko-Tweet-Formular mit Python, Flask und Heroku + Flask-Bootstrap erstellt
Recommended Posts