Comprendre comment utiliser Jinja2 rend le développement avec Flask plus intelligent

Actuellement, je crée quelque chose comme un service Web en utilisant Flask, mais je reste souvent bloqué dans la notation Jinja2 après avoir passé la valeur du côté serveur au côté client, alors notez-le.

Aperçu

Qu'est-ce que Flask

Un cadre de développement micro Web pour Python. Je pense qu'il n'y a aucun problème avec Sinatra dans Ruby. Je pense qu'il existe de nombreux autres articles sur la façon d'installer et d'utiliser Flask, je les omettrai donc ici. Il est également agréable d'avoir un guide en japonais comme Flask User Guide. Flask s'appuie sur le moteur de modèle Jinja2 </ b> et sur la boîte à outils Werkzeug WSGI.

Le problème est qu'il existe également une documentation Jinja2, mais celle-ci est en anglais. Jinja2 Documentation

Dans cet article, Flask décrira l'utilisation de base de Jinja2.

Tout d'abord, l'utilisation de base de Flask

Structure du répertoire

Commencez par créer un répertoire tel que le nom du projet. Ici, qiita_flask est le nom du projet. Depuis la structure des répertoires

qiita_flask
├── app.py
└── templates
    └── index.html

Veuillez faire comme ça. app.py peut avoir un nom différent, mais le répertoire des modèles doit avoir ce nom.

app.py décrit le traitement côté serveur et le côté client est décrit dans index.html etc. dans les modèles.

Chaque dossier

app.py


# coding: utf-8
from flask import Flask, render_template
app = Flask(__name__) #Génération d'instance

@app.route("/") #Lorsque la route d'accès correspond
def hello(): #La fonction bonjour fonctionne.
  return "Hello World!" #Sur l'écran du navigateur"Hello World!"Est sortie.

@app.route("/index") #application/Lors de l'accès à l'index
def index():
   return render_template('index.html') #/Quand l'accès vient à l'index, indexer dans les modèles.html s'ouvre
#C'est le point lors du passage de quelque chose du côté serveur au côté client.

if __name__ == "__main__":
    #Lancement du serveur Web
    app.run()

index.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h3 class="text-muted">Sample Page</h3>
      </div>
    </div>
  </body>
</html>

Maintenant, exécutons app.py. Après cela, lorsque vous accédez à [http: // localhost: 5000](http: // localhost: 5000), vous devriez voir "Hello World!" Lorsque vous accédez à [http: // localhost: 5000 / index](http: // localhost: 5000 / index), Bootstrap doit afficher la page d'exemple d'une manière légèrement à la mode. Je pense personnellement que c'est un bon point que vous pouvez facilement faire quelque chose comme ça avec Flask + Bootstrap comme ça. En se concentrant sur l'utilisation de base de Jinja2, il n'y a aucune autre explication sur la façon d'utiliser Flask et Bootstrap.

Utilisation de base de Jinja2

À partir de ce moment, les informations seront données du côté serveur au côté client lors de l'appel à index.html. Pour l'essayer, veuillez visiter [http: // localhost: 5000 / index](http: // localhost: 5000 / index).

Passer la chaîne du côté serveur au côté client

app.py


#Omission
@app.route("/index")
def index():
	message = 'sample_string'
	return render_template('index.html', message=message)

index.html


{#Omission#}
  <body>
    <div class="container">
      <div class="header">
        <h3 class="text-muted">Sample Page</h3>
        {% if message %}
          <p>{{message}}</p>
        {% endif %}
      </div>
    </div>
  </body>

Render_template ('index.html', message = message) comme ci-dessus Cela signifie passer une variable appelée message lors de la lecture de index.html. Et du côté html, {% if message%} signifie qu'il y a quelque chose dans la variable appelée message. {{message}} affichera le contenu de la variable appelée message.

Passer une variable de type dictionnaire

app.py


#Omission
@app.route("/index")
def index():
	my_dic = {}
	my_dic['name'] = ryo2851
	my_dic['univ'] = 'hogehoge University'
	return render_template('index.html', message=my_dic)  

index.html


{#Omission#}
  <body>
    <div class="container">
      <div class="header">
        <h3 class="text-muted">Sample Page</h3>
        {% if message %}
          <p>name: {{message.name}}</p>
          <p>univ: {{message.univ}}</p>
        {% endif %}
      </div>
    </div>
  </body>

Passer la liste

app.py


import numpy as np
#Omission
@app.route("/index")
def index():
	num_list = np.arange(10)
	return render_template('index.html', message=num_list)

index.html


{#Omission#}
  <body>
    <div class="container">
      <div class="header">
        <h3 class="text-muted">Sample Page</h3>
        {% for num in message %}
          <p>{{num}}</p>
        {% endfor %}
      </div>
    </div>
  </body>

Un peu d'application

Créer un répertoire pour les images

Enregistrez l'image dans un répertoire appelé statique.

qiita_flask
├── app.py
├── static
│   ├── qiita1.png
│   └── qiita2.png
└── templates
    └── index.html

Il sera configuré comme ceci. Désolé de vous déranger, mais veuillez préparer quelques images appropriées. Le nom est également approprié et ça va.

L'élément passe une liste de type dictionnaire

Par exemple, si vous souhaitez utiliser un lien d'image

<a href = http://hogehoge.com><img src = "hoge.png "> </a>

Vous avez besoin de l'URL de destination et du nom de l'image, par exemple. Nous enverrons des informations d'URL et d'image du côté serveur au côté client.

app.py


from os.path import join, relpath
from glob import glob
#Omission
@app.route("/index") #application/Lors de l'accès à l'index
def index():
  path = "./static" 
  image_names = [relpath(x, path) for x in glob(join(path, '*.png'))]
  #En statique.le fichier png est une image_Il est stocké dans les noms.
  my_list = []
  for image in image_names:
    my_dic = {}
    my_dic['image_name'] = 'static/' + image
    my_dic['link_url'] = 'http://qiita.com/ryo2851/items/4e3c287d5a0005780034'
    #Je ne pouvais pas sécuriser de nombreuses URL de destination, j'ai donc essayé de passer à la même URL pour chaque image.
    my_list.append(my_dic)
  return render_template('index.html', message = my_list) #/Quand l'accès vient à l'index, indexer dans les modèles.html s'ouvre

index.html


{#Omission#}
  <body>
    <div class="container">
      <div class="header">
        <h3 class="text-muted">Sample Page</h3>
        {% for item in message %}
          <a href={{item.link_url}} class="thumbnail"><img src={{item.image_name}}></a>
          {% endfor %}
      </div>
  </body>

Le lien dans la source est mon article précédent. Jetez un œil si vous avez le temps. Allez maintenant à / index![Capture d'écran 2016-07-14 23.49.13.png](https://qiita-image-store.s3.amazonaws.com/0/83457/f38882b1-3074-17f5-8bcf -c05ab3a60aea.png "Capture d'écran 2016-07-14 23.49.13.png ") Ça devrait ressembler à ça. Vous pouvez accéder au lien en cliquant sur chaque image.

application

Incorporez Jinja2 dans html pour être intelligent.

Je souhaite afficher les noms des membres de ce grade dans un menu déroulant lorsque j'appuie sur un bouton comme celui de l'image ci-dessous. スクリーンショット 2016-07-15 2.35.31.png

Codage honnête stupide

Stupide, honnêtement, essayez d'écrire en html

index.html


{#Omission#}
<body>
    <div class="container">
      <div class="header">
        <h3 class="text-muted">Sample Page</h3>
      </div>
      <hr/>

      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          B4
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">B4taro</a></li>
            <li><a href="#">B4Jiro</a></li>
            <li><a href="#">B4hanako</a></li>
        </ul>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          M1
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">M1taro</a></li>
            <li><a href="#">M1Jiro</a></li>
            <li><a href="#">M1hanako</a></li>
        </ul>
      </div>
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          M2
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">M2taro</a></li>
            <li><a href="#">M2Jiro</a></li>
            <li><a href="#">M2hanako</a></li>
        </ul>
      </div>
    </div>
  </body>

Vous avez écrit du code similaire à maintes reprises.

Codage avec Jinja2

J'écrirai en utilisant Jinja2 et aussi du côté serveur.

app.py


#Omission
@app.route("/index") 
def index():
  member_dic = {}
  B4_list = ['B4taro', 'B4jiro', 'B4hanako']
  M1_list = ['M1taro', 'M1jiro', 'M1hanako']
  M2_list = ['M2taro', 'M2jiro', 'M2hanako']
  member_dic['B4'] = B4_list
  member_dic['M1'] = M1_list
  member_dic['M2'] = M2_list
  return render_template('index.html', message=member_dic)

index.html


{#Omission#}
<body>
    <div class="container">
      <div class="header">
        <h3 class="text-muted">Sample Page</h3>
      </div>
      <hr/>
    {% for grade in message.keys() %}
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                {{ grade }}
            </button>
            <ul class="dropdown-menu">
                {% for name in message[grade] %}
                    <li><a href="#">{{ name }}</a></li>
                {% endfor %}
            </ul>
        </div>
    {% endfor %}
    </div>
  </body>

Avec un motif sans aucune ingéniosité, par exemple, lorsque vous mettez en B4, M1, M2, Docteur, Professeur, vous aurez envie de pleurer. Si vous avez déjà une base de données avec des membres enregistrés, je pense que le côté serveur sera plus simple. En utilisant Jinja2, j'ai pu écrire le html côté client très proprement.

Recommended Posts

Comprendre comment utiliser Jinja2 rend le développement avec Flask plus intelligent
Python: comment utiliser async avec
Comment utiliser un éditeur externe pour le développement Python avec Grasshopper
Comment utiliser ManyToManyField avec l'administrateur de Django
Comment utiliser OpenVPN avec Ubuntu 18.04.3 LTS
Comment utiliser Cmder avec PyCharm (Windows)
Comment utiliser Ass / Alembic avec HtoA
Comment utiliser le japonais avec le tracé NLTK
Comment utiliser le notebook Jupyter avec ABCI
Comment utiliser la commande CUT (avec exemple)
Comment utiliser SQLAlchemy / Connect avec aiomysql
Comment utiliser le pilote JDBC avec Redash
Comment utiliser PyCharm avec des points de terminaison de développement Glue exécutés à l'intérieur de VPC
Comment utiliser la trace GCP avec la télémétrie ouverte
Comment utiliser tkinter avec python dans pyenv
Comment utiliser xml.etree.ElementTree
Comment utiliser Python-shell
Remarques sur l'utilisation de tf.data
Comment utiliser virtualenv
Comment utiliser Seaboan
Comment utiliser la correspondance d'image
Comment utiliser le shogun
Comment utiliser Pandas 2
Comment utiliser numpy.vectorize
Comment utiliser pytest_report_header
Flacon facile à utiliser
Comment utiliser partiel
Comment utiliser Bio.Phylo
Comment utiliser SymPy
Comment utiliser x-means
Comment utiliser WikiExtractor.py
Comment utiliser IPython
Comment utiliser virtualenv
Comment utiliser Matplotlib
Comment utiliser iptables
Comment utiliser numpy
Comment utiliser TokyoTechFes2015
Comment utiliser venv
Comment utiliser le dictionnaire {}
Comment utiliser Pyenv
Comment utiliser la liste []
Comment utiliser python-kabusapi
Comment utiliser OptParse
Comment utiliser le retour
Comment utiliser pyenv-virtualenv
Comment utiliser imutils
Comment utiliser xgboost: classification multi-classes avec des données d'iris
Comment utiliser le serveur de développement local d'App Engine dev_appserver.py
Comment utiliser le mode interactif python avec git bash
Comment télécharger avec Heroku, Flask, Python, Git (Partie 1)
Comment télécharger avec Heroku, Flask, Python, Git (Partie 2)
Autoencoder dans Chainer (Remarques sur l'utilisation de + trainer)
Le grattage avec Python-Selenium est vieux! ?? ・ ・ ・ Comment utiliser Pyppeteer
Comment créer un BOT Cisco Webex Teams à l'aide de Flask
Comment utiliser Qt Designer
Comment utiliser la recherche triée
[gensim] Comment utiliser Doc2Vec