So verwenden Sie die NodeJS-Front-End-Template-Engine Swig
Dieses Mal zeige ich Ihnen, wie Sie die NodeJS-Front-End-Template-Engine Swig verwenden und welche Vorsichtsmaßnahmen für die Verwendung der NodeJS-Front-End-Template-Engine Swig gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.
Im Vergleich zu Jade bevorzuge ich immer noch die Swig-Front-End-Template-Engine. Obwohl die Syntax von Jade viel prägnanter und effizienter ist, ist das größte Problem für mich, dass sie nicht so aussieht html. . .
Also habe ich mich für swig entschieden. Die Seitenstruktur kommt mir bekannt vor und ist viel einfacher zu verwenden.
Viele Freunde kämpfen auch mit den Vor- und Nachteilen der beiden. Dies wird von Person zu Person je nach Bedarf unterschiedlich sein
Dies ist ein Vergleich zwischen den beiden
http ://vschart.com /compare/swig-template-engine/vs/jade-template-engin
Lernen wir mehr über swig, die Front-End-Template-Engine
Eine kurze Einführung in swigswig ist eine JS-Template-Engine. Sie verfügt über die folgenden Funktionen:
- Unterstützt die meisten Mainstream-Browser.
- Ausdruckskompatibilität ist gut.
- Objektorientierte Vorlagenvererbung.
- Wenden Sie Filter und Transformationen auf die Ausgabe in der Vorlage an.
- kann die Seite entsprechend der Straßenstärke rendern.
- Unterstützt die Wiederverwendung von Seiten.
- Unterstützt dynamische Seiten.
- Erweiterbar und anpassbar.
1. Installation von swignpm install swig --save
2. Integration mit Express-Frameworkapp.js
var express = require('express');
var swig = require('swig');
var path = require('path')
var app = express();
var port = process.env.PORT || 4000
//设置swig页面不缓存
swig.setDefaults({
cache: false
})
app.set('view cache', false);
app.set('views','./views/pages/');
app.set('view engine','html');
app.engine('html', swig.renderFile);
app.listen(port);
console.log('server is started at http://localhost:'+port);
//index page
app.get('/',function(req, res){
res.render('index',{
title:'首页 ',
content: 'hello swig'
})
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
{{ content }}
</body>
</html>
Dann testen Sie es
node app.js
Geben Sie im Browser ein: http://localhost :4000, der Ausführungseffekt ist wie folgt
Browser running.png
3. Grundlegende Verwendung
1. Variable{{ name }}Hier ist zu beachten, dass an beiden Enden Leerzeichen stehen müssen, sodass beim Schreiben von {{name}} ein Fehler auftritt gemeldet werden
{{ student.name }}
Swig verwendet Extends und Block, um das Vorlagenvererbungslayout zu implementieren .html
Zuerst definieren wir eine Vorlage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
{% block head %}{% endblock %}
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
In dieser Vorlage definieren wir drei Blöcke, die diese drei Blöcke erben können
Dann schreiben wir eine index.html dazu erb diese Vorlage
{% extends './layout.html' %}
{% block title %} index {% endblock %}
{% block content %}
<p>
<h1>hello swig</h1>
<p>
{% endblock %}
Beachten Sie, dass ich den Block {% Block Head %}{% Endblock %} nicht überschrieben habe
Das heißt, wir können viele Blöcke in der Datei „layout.html“ definieren Vorlagenseite und Unterseiten können eine selektive Implementierung haben.
4.include-VorlageFügt eine Vorlage für den aktuellen Standort hinzu. Diese Vorlage verwendet den aktuellen Kontext
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
{% include "./includes/head.html" %}
{% block head %}{% endblock %}
</head>
<body>
{% include "./includes/header.html" %}
{% block content %}{% endblock %}
</body>
</html>
5.if Urteil{ % if name === '郭靖' % }
hello 靖哥哥
{ % endif % }
{ % if name === '郭靖' % }
hello 靖哥哥
{ % elseif name === '黄蓉' % }
hello 蓉妹妹
{ % else % }
hello 欧阳峰
{ % endif % }
Zuerst die Kastanie:
// arr = [1, 2, 3]
{ % for key, val in arr % }
<p>{ { key } } -- { { val } }</p>
{ % endfor % }
Für in Schleifen integrierte Variablen:
- loop.index: Der Index der aktuellen Schleife (beginnend mit 1)
- loop.index0: Index der aktuellen Schleife (beginnend bei 0)
- loop.revindex: Index der aktuellen Schleife beginnend am Ende (beginnend bei 1)
- loop.revindex0: Der Index der aktuellen Schleife beginnend am Ende (beginnend bei 0)
- loop.key: Wenn die Iteration ein Objekt ist , es ist der Schlüssel der aktuellen Schleife, ansonsten ist es dasselbe wie loop.index
- loop.last: Gibt true zurück, wenn es der letzte Wert ist
- loop.cycle: eine Hilfsfunktion, die den angegebenen Parameter als Zyklus verwendet
// arr = [1, 2, 3]
{ % for key, val in arr % }
<p>{{ loop.index }} -- {{ key }} -- {{ val }}</p>
{ % endfor % }
8. Leistungsstarke integrierte Filteradd(value)：使变量与value相加，可以转换为数值字符串会自动转换为数值。 addslashes：用 \ 转义字符串 capitalize：大写首字母 date(format[, tzOffset])：转换日期为指定格式 format：格式 tzOffset：时区 default(value)：默认值（如果变量为undefined，null，false） escape([type])：转义字符 默认： &, <, >, ", ' js: &, <, >, ", ', =, -, ; first：返回数组第一个值 join(glue)：同[].join json_encode([indent])：类似JSON.stringify, indent为缩进空格数 last：返回数组最后一个值 length：返回变量的length，如果是object，返回key的数量 lower：同''.toLowerCase() raw：指定输入不会被转义 replace(search, replace[, flags])：同''.replace reverse：翻转数组 striptags：去除html/xml标签 title：大写首字母 uniq：数组去重 upper：同''.toUpperCase url_encode：同encodeURIComponent url_decode：同decodeURIComponemt 使用方法： 例如我们要格式化一个时间，使用方法和linux上的管道命令非常像 大写首字母 9.set命令 用来设置一个变量，在当前上下文中复用 相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！ 推荐阅读：
{{ birthday|date('Y-m-d') }}
{{ name|title }}
{% set foo = [0, 1, 2, 3, 4, 5] %}
{% for num in foo %}
<li>{{ num }}</li>
{% endfor %}
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die NodeJS-Front-End-Template-Engine Swig. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Stock Market GPT
KI-gestützte Anlageforschung für intelligentere Entscheidungen
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1660
276
Was ist der Unterschied zwischen den Dateien npm und npm.cmd im Installationsverzeichnis von nodejs?
Apr 21, 2024 am 05:18 AM
Es gibt zwei npm-bezogene Dateien im Node.js-Installationsverzeichnis: npm und npm.cmd. Die Unterschiede sind wie folgt: unterschiedliche Erweiterungen: npm ist eine ausführbare Datei und npm.cmd ist eine Befehlsfensterverknüpfung. Windows-Benutzer: npm.cmd kann über die Eingabeaufforderung verwendet werden, npm kann nur über die Befehlszeile ausgeführt werden. Kompatibilität: npm.cmd ist spezifisch für Windows-Systeme, npm ist plattformübergreifend verfügbar. Nutzungsempfehlungen: Windows-Benutzer verwenden npm.cmd, andere Betriebssysteme verwenden npm.
PI -Knotenunterricht: Was ist ein PI -Knoten? Wie installiere und richte ich einen PI -Knoten ein?
Mar 05, 2025 pm 05:57 PM
Detaillierte Erläuterungs- und Installationshandbuch für Pinetwork -Knoten In diesem Artikel wird das Pinetwork -Ökosystem im Detail vorgestellt - PI -Knoten, eine Schlüsselrolle im Pinetwork -Ökosystem und vollständige Schritte für die Installation und Konfiguration. Nach dem Start des Pinetwork -Blockchain -Testnetzes sind PI -Knoten zu einem wichtigen Bestandteil vieler Pioniere geworden, die aktiv an den Tests teilnehmen und sich auf die bevorstehende Hauptnetzwerkveröffentlichung vorbereiten. Wenn Sie Pinetwork noch nicht kennen, wenden Sie sich bitte an was Picoin ist? Was ist der Preis für die Auflistung? PI -Nutzung, Bergbau und Sicherheitsanalyse. Was ist Pinetwork? Das Pinetwork -Projekt begann 2019 und besitzt seine exklusive Kryptowährung PI -Münze. Das Projekt zielt darauf ab, eine zu erstellen, an der jeder teilnehmen kann
Ist NodeJS ein Backend-Framework?
Apr 21, 2024 am 05:09 AM
Node.js kann als Backend-Framework verwendet werden, da es Funktionen wie hohe Leistung, Skalierbarkeit, plattformübergreifende Unterstützung, ein umfangreiches Ökosystem und einfache Entwicklung bietet.
Können NodeJS Frontend schreiben?
Apr 21, 2024 am 05:00 AM
Ja, Node.js kann für die Front-End-Entwicklung verwendet werden. Zu den Hauptvorteilen gehören hohe Leistung, ein umfangreiches Ökosystem und plattformübergreifende Kompatibilität. Zu berücksichtigende Faktoren sind die Lernkurve, die Toolunterstützung und die geringe Community-Größe.
Was sind die globalen Variablen in NodeJS?
Apr 21, 2024 am 04:54 AM
Die folgenden globalen Variablen sind in Node.js vorhanden: Globales Objekt: global Kernmodul: Prozess, Konsole, erforderlich Laufzeitumgebungsvariablen: __dirname, __filename, __line, __column Konstanten: undefiniert, null, NaN, Infinity, -Infinity
Ist NodeJS eine Back-End-Entwicklungssprache?
Apr 21, 2024 am 05:09 AM
Ja, Node.js ist eine Backend-Entwicklungssprache. Es wird für die Back-End-Entwicklung verwendet, einschließlich der Handhabung serverseitiger Geschäftslogik, der Verwaltung von Datenbankverbindungen und der Bereitstellung von APIs.
So verbinden Sie NodeJS mit der MySQL-Datenbank
Apr 21, 2024 am 06:13 AM
Um eine Verbindung zu einer MySQL-Datenbank herzustellen, müssen Sie die folgenden Schritte ausführen: Installieren Sie den MySQL2-Treiber. Verwenden Sie mysql2.createConnection(), um ein Verbindungsobjekt zu erstellen, das die Hostadresse, den Port, den Benutzernamen, das Passwort und den Datenbanknamen enthält. Verwenden Sie „connection.query()“, um Abfragen durchzuführen. Verwenden Sie abschließend Connection.end(), um die Verbindung zu beenden.
Für welche Projekte ist NodeJS geeignet?
Apr 21, 2024 am 05:45 AM
Node.js eignet sich für die folgenden Projekttypen: Netzwerk- und Serveranwendungen, ereignisgesteuerte Anwendungen, Echtzeitanwendungen, datenintensive Anwendungen, Befehlszeilentools und Skripte, leichte Microservices
