() translation by (you can also view the original English article)
Im ersten und zweiten Teil dieser dreiteiligen Tutorialserie haben wir gesehen, wie die Vorlagenstruktur in einer Flask-basierten Anwendung mit Jinja2 modular aufgebaut und benutzerdefinierte Kontextprozessoren, Filter und Makros in Jinja2 erstellt werden.
In diesem Teil wird erläutert, wie Sie die erweiterte Formatierung von Datum und Uhrzeit auf Vorlagenebene in Jinja2 mithilfe von moment.js implementieren.
Loslegen
Die Formatierung von Datum und Uhrzeit ist in Webanwendungen schmerzhaft. Die Handhabung auf Python-Ebene mithilfe der datetime-Bibliothek erhöht den Overhead und ist recht komplex, wenn es darum geht, Zeitzonen korrekt zu behandeln. Wir sollten die Zeitstempel auf UTC standardisieren, wenn sie in der Datenbank gespeichert sind, aber dann müssen die Zeitstempel jedes Mal verarbeitet werden, wenn sie den Benutzern weltweit präsentiert werden müssen.
Es ist eine kluge Sache, diese Verarbeitung auf die Clientseite, dh den Browser, zu verschieben. Der Browser kennt immer die aktuelle Zeitzone des Benutzers und kann die Datums- und Zeitmanipulation korrekt durchführen. Dies entlastet auch unsere Anwendungsserver.
Wie jede JS-Bibliothek kann Moment.js auf folgende Weise in unsere App aufgenommen werden. Wir müssen nur die JS-Datei moment.min.js im Ordner static/js ablegen. Dies kann dann in unserer HTML-Datei verwendet werden, indem die folgende Anweisung zusammen mit anderen JS-Bibliotheken hinzugefügt wird:
1 |
<script src="/static/js/moment.min.js"></script> |
Die grundlegende Verwendung von Moment.js wird im folgenden Code gezeigt. Dies kann in der Browserkonsole für JavaScript erfolgen:
1 |
>>> moment().calendar(); |
2 |
"Today at 9:37 PM" |
3 |
>>> moment().endOf('day').fromNow(); |
4 |
"in 2 hours" |
5 |
>>> moment().format('LLLL'); |
6 |
"Wednesday, January 27, 2016 9:38 PM" |
Um Moment.js in unserer Anwendung zu verwenden, schreiben Sie am besten einen Wrapper in Python und verwenden ihn über jinja2-Umgebungsvariablen. Weitere Hintergrundinformationen finden Sie in dieser ausführbaren Datei. Fügen Sie eine Datei mit dem Namen momentjs.py auf derselben Ebene wie my_app.py hinzu.
flask_app/momentjs.py
1 |
from jinja2 import Markup |
2 |
|
3 |
class momentjs(object): |
4 |
|
5 |
def __init__(self, timestamp): |
6 |
self.timestamp = timestamp |
7 |
|
8 |
# Wrapper to call moment.js method
|
9 |
def render(self, format): |
10 |
return Markup("<script>\ndocument.write(moment(\"%s\").%s);\n</script>" % (self.timestamp.strftime("%Y-%m-%dT%H:%M:%S"), format)) |
11 |
|
12 |
# Format time
|
13 |
def format(self, fmt): |
14 |
return self.render("format(\"%s\")" % fmt) |
15 |
|
16 |
def calendar(self): |
17 |
return self.render("calendar()") |
18 |
|
19 |
def fromNow(self): |
20 |
return self.render("fromNow()") |
Fügen Sie nach der app-Initialisierung die folgende Zeile in flask_app/my_app.py hinzu. Dadurch wird die momentjs-Klasse zu jinja-Umgebungsvariablen hinzugefügt. Dadurch wird die momentjs-Klasse zu jinja-Umgebungsvariablen hinzugefügt.
1 |
# Set jinja template global
|
2 |
app.jinja_env.globals['momentjs'] = momentjs |
Jetzt kann moment.js verwendet werden, um Datum und Uhrzeit in Vorlagen wie folgt zu formatieren:
1 |
<p>Current time: {{ momentjs(timestamp).calendar() }}</p> |
2 |
<br/>
|
3 |
<p>Time: {{momentjs(timestamp).format('YYYY-MM-DD HH:mm:ss')}}</p> |
4 |
<br/>
|
5 |
<p>From now: {{momentjs(timestamp).fromNow()}}</p> |
Schlussfolgerung
In dieser Tutorial-Reihe haben wir die Grundlagen von Jinja2-Vorlagen aus der Perspektive von Flask behandelt. Wir haben mit den Grundlagen von Jinja2 begonnen und die Best Practices für das Layout der Vorlagenstruktur und die Nutzung von Vererbungsmustern gelernt.
Dann haben wir einige benutzerdefinierte Kontextprozessoren, Filter und Makros erstellt, die für erweiterte Vorlagen sehr nützlich sind. Das letzte Tutorial behandelte, wie moment.js zusammen mit Jinja2 verwendet werden kann, um eine hochflexible und leistungsstarke Datums- / Uhrzeitformatierung zu erstellen.
