J'ai utilisé Flask et Heroku pour créer un formulaire de publication simple.

(1) Image de sortie

L'objectif était de créer un formulaire de publication simple comme celui ci-dessous. スクリーンショット 2020-03-01 21.23.24.png Entrez "Nya Nya" dans le contenu du tweet et "Tama" dans le chat tweeté, et appuyez sur le bouton d'envoi. スクリーンショット 2020-03-01 21.25.01.png Il sera affiché comme ça.

(2) Configurer un environnement virtuel

Créez un répertoire appelé my_form sur le bureau, déplacez-vous vers le répertoire et définissez l'environnement virtuel. Démarrez un environnement virtuel.

python3 -m venv .

source bin/activate

(3) Installez le framework et le serveur WEB nécessaires

Installez le ballon et le gunicorn.

pip install flask

pip install gunicorn

(4) Préparez les répertoires et fichiers nécessaires (.py .html)

Créez form.py dans le répertoire my_form, Créez également un répertoire templates et index.html et layout.html (dans le répertoire templates) dans le répertoire my_form.

(4) Décrivez form.py

Décrivez ce qui suit.

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

En important render_template, l'environnement pour utiliser Jinja2 a été préparé. Le moteur de modèle Jinja2 appelle le modèle html (ici, index.html).

Tout d'abord, concernant le traitement de @ app.route ("/"), Jinja2 appelle index.html. En particulier,

return render_template("index.html" 〜）

Et.

Ensuite, concernant le traitement de @ app.route ("/ result", method = ["POST"]), en important reuest, les données saisies dans le formulaire peuvent être récupérées côté html appelé. Par exemple, pour l'article, en définissant article = request.form ["article"], le contenu saisi dans le formulaire côté index.html (l'attribut de nom de formulaire côté index.html est défini sur "article"). (Supposé) peut être retiré. En ce qui concerne les méthodes, le formulaire côté index.html est envoyé cette fois par la méthode POST, il a donc été défini sur [POST]. La transmission par la méthode GET sera décrite plus loin.

article = request.form["article"]

L'article extrait et le contenu de name sont renvoyés à index.html en tant que return render_template. À ce moment-là, attribuez des valeurs à chacun des articles et noms d'arguments.

return render_template("index.html",article=article,name=name)

méthodes est POST

@app.route("/result",methods=["POST"])

(5) Décrivez layout.html

Créez un html commun pour que la maintenance de la partie commune soit facile même si la partie modèle augmente.

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

Des contenus individuels (index.html) peuvent être intégrés dans les parties suivantes.

{% block content %}

(6) Décrivez index.html

`index.html`


{% extends "layout.html" %}
{% block content %}
<h1>Formulaire de tweet de Nyanko</h1>

<form action="/result" method="post">
      <label for="article">Contenu du tweet</label>
      <input type="text" name="article">
      
      <p></p>
      
      <label for="name">Chat tweeté</label>
      <input type="text" name="name">
      <button type="submit">Envoyer</button>
</form>

<p></p>

<p>Contenu du Tweet/{{ article }}</p>
<p>Chat tweeté/{{ name }}</p>
{% endblock %}

Le contenu de {% block content%} à {% endblock%} est inséré dans la partie de layout.html. L'attribut name de l'entrée est "article".

 <input type="text" name="article">

L'adresse de destination est / result, et le contenu saisi dans le formulaire est envoyé par la méthode POST.

<form action="/result" method="post">

(7) Essayez de démarrer dans l'environnement local

Essayez de démarrer le flacon comme suit.

 FLASK_APP=form.py flask run

* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

Si vous collez la partie http: // ~ dans le navigateur,

S'il apparaît, c'est réussi.

(8) Différence entre la méthode POST et la méthode GET

J'ai utilisé la méthode POST cette fois, mais je noterai également la méthode GET. Dans le cas de la méthode POST, lorsque vous soumettez le formulaire, スクリーンショット 2020-03-01 22.18.21.png Et quand vous regardez l'adresse du navigateur, スクリーンショット 2020-03-01 22.18.10.png Il est devenu. En revanche, si vous utilisez la méthode GET, modifiez form.py et index.html comme suit.

`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>Formulaire de tweet de Nyanko</h1>

<form action="/result" method="get">
      <label for="article">Contenu du tweet</label>
      <input type="text" name="article">

      <p></p>

      <label for="name">Chat tweeté</label>
      <input type="text" name="name">
      <button type="submit">Envoyer</button>
</form>

<p></p>

<p>Contenu du Tweet/{{ article }}</p>
<p>Chat tweeté/{{ name }}</p>
{% endblock %}

Quand je l'envoie et regarde l'adresse du navigateur, スクリーンショット 2020-03-01 22.24.51.png La méthode GET est conçue pour ajouter les données à envoyer à la fin de l'adresse. Par conséquent, quel type de données sera vu par d'autres personnes, il est donc utilisé pour des applications telles que la recherche. Il est nécessaire de ne pas l'utiliser pour les formulaires qui saisissent des mots de passe.

(9) Déployer sur Heroku

Les détails du déploiement sur Heroku sont tels que décrits dans l'article suivant, donc je n'utiliserai que l'essence et omettrai l'explication détaillée. https://qiita.com/nooonchi/items/a7ea7c7a12c56ab8e901

Connectez-vous à Heroku et créez une application sur Heroku

heroku login

Le nom de l'application est en forme de chat.

Heroku create cat-form

Initialiser le répertoire my_form

git init

Relier Heroku à l'environnement local,

heroku git:remote -a cat-form

Créez requirements.txt dans le répertoire my_form

pip freeze > requirements.txt

Créez un Prockfile dans le répertoire my_form et entrez ce qui suit: À ce stade, un espace est requis avant g, et le formulaire avant: app signifie le formulaire form.py, alors soyez prudent.

web: gunicorn form:app --log-file -

ajouter,

git add .

Cette fois, engagez-vous avec le nom du premier,

git commit -m'the-first'

Poussez vers Heroku.

git push heroku master

Finalement,

heroku open

Alors c'est fait. スクリーンショット 2020-03-01 21.23.24.png

(10) Conclusion

À l'avenir, j'aimerais développer cela et défier le tableau d'affichage.

Postscript

--Flask-Bootstap a été introduit dans cette forme (2020.3.2) J'ai créé un formulaire de tweet Nyanko avec Python, Flask et Heroku + Flask-Bootstrap introduit