[PYTHON] Wenn Sie wissen, wie Jinja2 verwendet wird, wird die Entwicklung mit Flask intelligenter
Derzeit mache ich so etwas wie einen Webdienst mit Flask, aber ich stecke oft in der Jinja2-Notation fest, nachdem ich den Wert von der Serverseite an die Clientseite übergeben habe. Notieren Sie sich dies.
Überblick
- Eine kurze Einführung in die Verwendung von Flask (falls installiert, funktioniert es mit Kopieren und Einfügen)
- Es gibt eine japanische Version des Flask-Benutzerhandbuchs, aber das Jinja2-Handbuch ist auf Englisch umständlich.
- Einführung verschiedener Arten der Jinja2-Syntax
- Einführung eines Anwendungsbeispiels, das die grundlegende Syntax kombiniert
- Nutzen Sie Jinja2, um das Schreiben auf der Clientseite intelligenter zu gestalten
Was ist eine Flasche?
Ein Micro Web Development Framework für Python. Ich denke, es gibt kein Problem mit Sinatra in Ruby. Ich denke, es gibt viele andere Artikel über die Installation und Verwendung von Flask, daher werde ich sie hier weglassen. Es ist auch schön, eine japanisierte Anleitung wie Flask User Guide zu haben. Flask basiert auf der Jinja2 </ b> Template Engine und dem Werkzeug WSGI Toolkit.
Das Problem ist, dass es auch eine Jinja2-Dokumentation gibt, die jedoch auf Englisch ist. Jinja2 Documentation
In diesem Artikel beschreibt Flask die grundlegende Verwendung von Jinja2.
Erstens die grundlegende Verwendung von Flask
Verzeichnisaufbau
Erstellen Sie zunächst ein Verzeichnis wie den Projektnamen. Hier ist qiita_flask der Projektname. Aus der Verzeichnisstruktur
qiita_flask
├── app.py
└── templates
└── index.html
Bitte machen Sie es so. app.py kann einen anderen Namen haben, aber das Vorlagenverzeichnis muss diesen Namen haben.
app.py beschreibt die serverseitige Verarbeitung, und die clientseitige Seite wird durch index.html usw. in Vorlagen beschrieben.
Jede Datei
app.py
# coding: utf-8
from flask import Flask, render_template
app = Flask(__name__) #Instanzgenerierung
@app.route("/") #Wenn der Zugangsweg übereinstimmt
def hello(): #Die Hallo-Funktion funktioniert.
return "Hello World!" #Auf dem Browserbildschirm"Hello World!"Wird ausgegeben.
@app.route("/index") #Anwendung/Wenn auf den Index zugegriffen wird
def index():
return render_template('index.html') #/Wenn der Zugriff auf den Index erfolgt, indizieren Sie in Vorlagen.HTML wird geöffnet
#Dies ist der Punkt, an dem etwas von der Serverseite an die Clientseite übergeben wird.
if __name__ == "__main__":
#Start des Webservers
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>
Lassen Sie uns jetzt app.py ausführen. Wenn Sie danach auf [http: // localhost: 5000](http: // localhost: 5000) zugreifen, sollte "Hello World!" Wenn Sie auf [http: // localhost: 5000 / index](http: // localhost: 5000 / index) zugreifen, sollte Bootstrap die Beispielseite leicht modisch anzeigen. Ich persönlich denke, dass es ein guter Punkt ist, dass Sie mit Flask + Bootstrap so etwas leicht machen können. Es gibt keine weitere Erklärung zur Verwendung von Flask und Bootstrap, die sich auf die grundlegende Verwendung von Jinja2 konzentrieren.
Grundlegende Verwendung von Jinja2
Danach werden beim Aufrufen von index.html Informationen von der Serverseite an die Clientseite weitergegeben. Um es auszuprobieren, besuchen Sie bitte [http: // localhost: 5000 / index](http: // localhost: 5000 / index).
Übergeben Sie den String von der Serverseite zur Clientseite
app.py
#Unterlassung
@app.route("/index")
def index():
message = 'sample_string'
return render_template('index.html', message=message)
index.html
{#Unterlassung#}
<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) wie oben Das bedeutet, dass beim Lesen von index.html eine Variable namens message übergeben wird. Und auf der HTML-Seite bedeutet {% if message%}, dass sich etwas in der Variablen namens message befindet. {{message}} zeigt an, was in der Variablen message enthalten ist.
Übergeben Sie eine Variable vom Typ Wörterbuch
app.py
#Unterlassung
@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
{#Unterlassung#}
<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>
Übergeben Sie die Liste
app.py
import numpy as np
#Unterlassung
@app.route("/index")
def index():
num_list = np.arange(10)
return render_template('index.html', message=num_list)
index.html
{#Unterlassung#}
<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>
Eine kleine Anwendung
Erstellen Sie ein Verzeichnis für Bilder
Speichern Sie das Bild in einem Verzeichnis namens static.
qiita_flask
├── app.py
├── static
│ ├── qiita1.png
│ └── qiita2.png
└── templates
└── index.html
Es wird so konfiguriert. Es tut uns leid, Sie zu stören, aber bitte bereiten Sie ein paar geeignete Bilder vor. Der Name ist auch passend und es ist okay.
Das Element übergibt eine Liste vom Typ Wörterbuch
Zum Beispiel, wenn Sie einen Bildlink verwenden möchten
<a href = http://hogehoge.com><img src = "hoge.png "> </a>
Sie benötigen die Ziel-URL und den Namen des Bildes, z. Wir senden URL- und Bildinformationen von der Serverseite an die Clientseite.
app.py
from os.path import join, relpath
from glob import glob
#Unterlassung
@app.route("/index") #Anwendung/Wenn auf den Index zugegriffen wird
def index():
path = "./static"
image_names = [relpath(x, path) for x in glob(join(path, '*.png'))]
#In statischer.PNG-Datei ist Bild_Es wird in Namen gespeichert.
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'
#Ich konnte nicht viele Ziel-URLs sichern, daher habe ich versucht, für jedes Bild zur gleichen URL zu springen.
my_list.append(my_dic)
return render_template('index.html', message = my_list) #/Wenn der Zugriff auf den Index erfolgt, indizieren Sie in Vorlagen.HTML wird geöffnet
index.html
{#Unterlassung#}
<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>
Der Link in der Quelle ist mein früherer Artikel. Bitte schauen Sie, wenn Sie Zeit haben. Gehen Sie jetzt zu / index Es sollte so aussehen. Sie können zum Link springen, indem Sie auf jedes Bild klicken.
Anwendung
Integrieren Sie Jinja2 in HTML, um intelligent zu sein.
Ich möchte die Namen von Mitgliedern dieser Klasse in einem Pulldown-Menü anzeigen, wenn ich eine Taste wie die im Bild unten drücke.
Dumme ehrliche Codierung
Dumm ehrlich ehrlich versuchen, in HTML zu schreiben
index.html
{#Unterlassung#}
<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>
Sie haben immer wieder ähnlichen Code geschrieben.
Codierung mit Jinja2
Ich werde mit Jinja2 und auch auf der Serverseite schreiben.
app.py
#Unterlassung
@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
{#Unterlassung#}
<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>
Wenn Sie beispielsweise mit einem Muster ohne Einfallsreichtum B4, M1, M2, Doktor, Professor eingeben, möchten Sie weinen. Wenn Sie bereits eine Datenbank mit registrierten Mitgliedern haben, wird die Serverseite meiner Meinung nach einfacher. Mit Jinja2 konnte ich das HTML auf der Client-Seite sehr ordentlich schreiben.
Recommended Posts