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
- Une introduction rapide à l'utilisation de Flask (s'il est installé, il fonctionne avec le copier-coller)
- Il existe une version japonaise du guide d'utilisation de Flask, mais le guide Jinja2 est maladroit en anglais.
- Présentation de plusieurs types de syntaxe Jinja2
- Présentation d'un exemple d'utilisation combinant la syntaxe de base
- Tirez parti de Jinja2 pour rendre l'écriture côté client plus intelligente
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 Ç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.
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