In dieser Reihe werden wir vorstellen, wie Anwendungen mit Tornado entwickelt werden, einem Webserver- und Webanwendungsframework, das auf Python ausgeführt wird. Der Inhalt dieser Reihe ist wie folgt.
Beim letzten Mal habe ich erklärt, wie ein Wert von einem Handler an eine Vorlage übergeben wird. Dies ermöglicht die dynamische Generierung von Inhalten. Dieses Mal werde ich die Funktionen weiterer Vorlagen erläutern. Insbesondere werde ich erklären, wie eine Anwendung mithilfe der Vorlagenvererbung erstellt wird.
<! - Dieses Mal werde ich die Template-Engine-Funktion von Tornado vorstellen. ->
Im vorherigen Artikel (http://qiita.com/Hironsan/items/d2d8f59ed2c2e8e63488) habe ich eine Anwendung erstellt, die so etwas wie "Hallo, dein Name!" Anzeigt, wenn du einen Namen übergibst. Durch die Erstellung dieser Anwendung habe ich die Grundlagen der dynamischen Seitengenerierung verstanden.
Beim letzten Mal gab es nur eine Vorlagendatei. Die meisten realen Webanwendungen verwenden jedoch mehrere Vorlagen. Daher werden wir dieses Mal versuchen, mit mehreren Vorlagen zu entwickeln.
Dieses Mal werden wir eine Einführungsseite für Programmiersprachen erstellen. Das Bild ist wie folgt.
Dieses Mal werde ich es schaffen, nachdem ich den Mechanismus zum Erben von Vorlagen gelernt habe.
Vorlagenvererbung ist die Fähigkeit, eine vorhandene Vorlage zu erben und eine neue zu erstellen. Wir werden die vorhandene Vorlage ** übergeordnete Vorlage ** und die geerbte Vorlage ** untergeordnete Vorlage ** aufrufen.
Bei der Vorlagenvererbung enthält die übergeordnete Vorlage Elemente, die häufig auf Ihrer Site verwendet werden, und darin ist ein Block definiert, der von der untergeordneten Vorlage überschrieben werden kann. Dadurch kann die übergeordnete Vorlage wiederverwendet werden. Schauen wir uns ein Beispiel an.
base.html
<html>
<head>
<title>{% block title %}Standardtitel{% end %}</title>
</head>
<body>
{% block content %}
Standardinhalt
{% end %}
</body>
</html>
Nennen wir diese Vorlage base.html. In diesem Beispiel verwenden wir das Block-Tag, um zwei Blöcke zu definieren ({% Blocktitel%} {% Ende%} und {% Blockinhalt%} {% Ende%}), damit die untergeordnete Vorlage mit Werten gefüllt werden kann. Ich bin. Die Rolle des Block-Tags besteht darin, die Vorlagen-Engine darüber zu informieren, dass die untergeordnete Vorlage den Teil der Vorlage überschreiben kann, der in Tags eingeschlossen ist.
Die untergeordnete Vorlage sieht folgendermaßen aus:
{% extends "base.html" %}
{% block content %}
Untergeordneter Vorlageninhalt
{% end %}
Das Extended-Tag oben ist der Schlüssel zur Vererbung. Dieses Tag teilt der Vorlagen-Engine mit, dass es sich auf andere Vorlagen erweitert. Wenn die Vorlagen-Engine diese Vorlage verarbeitet, sucht sie zuerst nach der übergeordneten Vorlage (hier base.html).
Zu diesem Zeitpunkt stellt die Vorlagen-Engine fest, dass in base.html zwei Blöcke definiert sind, und ersetzt diese Blöcke durch die entsprechenden Blöcke in der untergeordneten Vorlage. Die Ausgabe sieht folgendermaßen aus:
<html>
<head>
<title>Standardtitel</title>
</head>
<body>
Untergeordneter Vorlageninhalt
</body>
</html>
In der untergeordneten Vorlage ist kein Schriftfeld definiert, daher wird der Wert der übergeordneten Vorlage unverändert verwendet.
Die Verzeichnisstruktur ist fast dieselbe wie beim letzten Mal. Der Unterschied besteht darin, dass einige Dateien zu Vorlagen hinzugefügt wurden.
.
├── app.py
├── static
│ └── style.css
└── templates
├── base.html
├── index.html
├── php.html
├── python.html
└── ruby.html
Die Dateien in Vorlagen sind übergeordnete Vorlagen, die von base.html erben, und die anderen sind untergeordnete Vorlagen, die durch Erben von base.html erstellt werden. Als Funktion ist index.html die oberste Seite, und die anderen sind Einführungsseiten für jede Sprache.
Wie beim letzten Mal gibt es die folgenden drei Komponenten.
Der diesmal auszuführende Python-Code lautet wie folgt.
import os
import tornado.ioloop
import tornado.web
from tornado.web import url
class IndexHandler(tornado.web.RequestHandler):
def get(self):
self.render('index.html')
class PythonHandler(tornado.web.RequestHandler):
def get(self):
self.render('python.html')
class PHPHandler(tornado.web.RequestHandler):
def get(self):
self.render('php.html')
class RubyHandler(tornado.web.RequestHandler):
def get(self):
self.render('ruby.html')
BASE_DIR = os.path.dirname(__file__)
application = tornado.web.Application([
url(r'/', IndexHandler, name='index'),
url(r'/python/', PythonHandler, name='python'),
url(r'/php/', PHPHandler, name='php'),
url(r'/ruby/', RubyHandler, name='ruby'),
],
template_path=os.path.join(BASE_DIR, 'templates'),
static_path=os.path.join(BASE_DIR, 'static'),
)
if __name__ == '__main__':
application.listen(8888)
tornado.ioloop.IOLoop.current().start()
Ich habe seit dem letzten Mal nichts Neues gemacht. Ein neuer Punkt ist, dass wir beim Festlegen der URL die URL-Funktion verwenden und den Namen als Argument übergeben. Auf diese Weise können Sie die URL umkehren. URL Reverse Lookup ist ein Bild, das ** wenn Sie einen Namen an die Reverse Lookup-Funktion übergeben, in die URL konvertiert wird, die diesem Namen entspricht **. Wenn Sie beispielsweise bei einer URL-Einstellung wie dieser die Zeichenfolge "python" an die Funktion zur umgekehrten Suche übergeben, wird sie in die URL "/ python /" konvertiert. Der Grund, warum dies möglich ist, ist, dass Sie beim Festlegen der URL "/ python /" mithilfe der URL-Funktion die Zeichenfolge "python" in ihrem Namensargument übergeben. Zusätzlich wird in der Vorlage der Rückwärtszug verwendet.
Die folgenden 5 Vorlagen werden dieses Mal zur Anzeige verwendet. Zuerst base.html. Dies ist diesmal die übergeordnete Vorlage.
base.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% end %}</title>
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="{{ static_url('style.css') }}" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="{{ reverse_url('index') }}">Home</a>
<a class="navbar-brand" href="{{ reverse_url('python') }}">Python</a>
<a class="navbar-brand" href="{{ reverse_url('php') }}">PHP</a>
<a class="navbar-brand" href="{{ reverse_url('ruby') }}">Ruby</a>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container">
{% block content %}
{% end %}
</div>
</div>
<div class="container">
<footer>
<p>© Company 2015</p>
</footer>
</div>
<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Diese Vorlagendatei definiert zwei Blöcke ({% Blocktitel%} {% Ende%} und {% Blockinhalt%} {% Ende%}). Diese beiden Blöcke werden durch die untergeordnete Vorlage ersetzt. Können Sie auch sehen, dass die Funktion reverse_url im Teil der Navigationsleiste verwendet wird? Diese Funktion ist eine Funktion zum Durchführen der umgekehrten Suche der zuvor erläuterten URL.
Als nächstes index.html. Es wird durch Erben von base.html erstellt. Es fungiert als oberste Seite.
index.html
{% extends "base.html" %}
{% block title %}oberste Seite{% end %}
{% block content %}
<h1>Einführung der Programmiersprache</h1>
<p>
Hallo! Diese Seite führt in Programmiersprachen ein.
Insbesondere gibt es drei: Python, PHP und Ruby.
Wählen Sie aus dem Menü oben die Sprache aus, die Sie interessiert, um die Details anzuzeigen.
</p>
{% end %}
Stellen Sie sicher, dass Sie Extended verwenden, um von base.html zu erben, und verwenden Sie block, um den Inhalt zu ersetzen.
Und php.html, python.html, ruby.html. Diese werden auch durch Erben von base.html erstellt. Jedes fungiert als Einführungsseite für jede Sprache.
php.html
{% extends "base.html" %}
{% block title %}Einführung in PHP{% end %}
{% block content %}
<h1>Hello, PHP!</h1>
<p>
PHP ist eine Programmiersprache, deren Hauptzweck darin besteht, dynamische Webseiten durch dynamisches Generieren von HTML-Daten zu realisieren.
Und sein Sprachverarbeitungssystem. Wird allgemein als PHP abgekürzt, was auf Englisch "persönliche Homepage" bedeutet
"Personal Home Page"Abgeleitet von.
</p>
<p><a class="btn btn-primary btn-lg" href="https://secure.php.net/" role="button">Mehr wissen»</a></p>
{% end %}
python.html
{% extends "base.html" %}
{% block title %}Einführung in Python{% end %}
{% block content %}
<h1>Hello, Python!</h1>
<p>
Python ist eine weit verbreitete Allzweck-Programmiersprache.
Es wird behauptet, dass die Sprache für eine hohe Lesbarkeit des Codes ausgelegt ist und dank ihrer Syntax im Vergleich zu Sprachen wie C.
Es wird behauptet, dass das Programm mit weniger Codezeilen dargestellt werden kann. Von kleinen zu großen Programmen
Es wird viel Code bereitgestellt, damit Sie verschiedene Programme klar schreiben können.
</p>
<p><a class="btn btn-primary btn-lg" href="https://www.python.org/" role="button">Mehr wissen»</a></p>
{% end %}
ruby.html
{% extends "base.html" %}
{% block title %}Wir stellen Ruby vor{% end %}
{% block content %}
<h1>Hello, Ruby!</h1>
<p>
Ruby ist eine objektorientierte Skriptsprache, die von Yukihiro Matsumoto (allgemein bekannt als Matz) entwickelt wurde.
Erreichen Sie eine objektorientierte Programmierung in Bereichen, in denen Skriptsprachen verwendet wurden.
Es war auch die erste in Japan entwickelte Programmiersprache, die auf der International Electrical Standards Conference als internationaler Standard zertifiziert wurde.
</p>
<p><a class="btn btn-primary btn-lg" href="https://www.ruby-lang.org/ja/" role="button">Mehr wissen»</a></p>
{% end %}
Wie index.html werden sie erstellt, indem base.html mit extensions geerbt und der Inhalt mit block ersetzt wird.
CSS Die diesmal verwendete CSS-Datei lautet wie folgt.
body {
padding-top: 50px;
padding-bottom: 20px;
}
Es gibt nichts Besonderes zu sagen, daher werde ich die Erklärung dieser CSS-Datei weglassen.
Führen Sie wie beim letzten Mal den folgenden Code aus, um den Server zu starten.
$ python app.py
Gehen Sie dann zu [http: // localhost: 8888 /](http: // localhost: 8888 /). Sie sollten eine Seite wie die folgende sehen.
Versuchen Sie, den Namen der Programmiersprache in der Navigationsleiste auszuwählen. Sie können sehen, dass die Seite mithilfe der Vorlagenvererbung generiert wurde.
Dieses Mal habe ich vorgestellt, wie eine Anwendung mithilfe der Vorlagenvererbung erstellt wird. Sie können sehen, dass Sie Erweiterungen verwenden können, um eine Vorlage und einen Block zu erben, um den Inhalt eines Blocks von einer untergeordneten Vorlage zu ersetzen.
Wenn Sie verstehen, wie Sie den Wert des zuletzt eingeführten Handlers übergeben und wie Sie ihn dieses Mal erben, können Sie sagen, dass Sie die Grundlagen der Entwicklung mithilfe von Vorlagen verstehen. Wenn Sie danach die Steueranweisungen und Funktionen kennen, die in der Vorlage verwendet werden können, können Sie sich reibungslos entwickeln. Nächstes Mal werde ich die Steueranweisungen und Funktionen vorstellen, die in der Vorlage verwendet werden können.
Recommended Posts