suchen

Heim >Web-Frontend >js-Tutorial >So verwenden Sie die NodeJS-Front-End-Template-Engine Swig

So verwenden Sie die NodeJS-Front-End-Template-Engine Swig

php中世界最好的语言
php中世界最好的语言Original
2018-05-29 14:51:452768Durchsuche

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.

    2. Ausdruckskompatibilität ist gut.

    3. Objektorientierte Vorlagenvererbung.

    4. Wenden Sie Filter und Transformationen auf die Ausgabe in der Vorlage an.

    5. kann die Seite entsprechend der Straßenstärke rendern.

    6. Unterstützt die Wiederverwendung von Seiten.

    7. Unterstützt dynamische Seiten.

    8. Erweiterbar und anpassbar.

1. Installation von swig

npm 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

2. Attribute

{{ student.name }}

3. Vorlagenvererbung

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-Vorlage

Fü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 % }

6.if-else Urteil

{ % if name === '郭靖' % }
 hello 靖哥哥
{ % elseif name === '黄蓉' % }
 hello 蓉妹妹
{ % else % }
 hello 欧阳峰
{ % endif % }

7.for-Schleife

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)

    2. loop.index0: Index der aktuellen Schleife (beginnend bei 0)

    3. loop.revindex: Index der aktuellen Schleife beginnend am Ende (beginnend bei 1)

    4. loop.revindex0: Der Index der aktuellen Schleife beginnend am Ende (beginnend bei 0)

    5. loop.key: Wenn die Iteration ein Objekt ist , es ist der Schlüssel der aktuellen Schleife, ansonsten ist es dasselbe wie loop.index

    6. loop.first: Gibt true zurück, wenn es der erste Wert ist

    7. loop.last: Gibt true zurück, wenn es der letzte Wert ist

    8. loop.cycle: eine Hilfsfunktion, die den angegebenen Parameter als Zyklus verwendet

    9. Verwendung: 
// arr = [1, 2, 3]
{ % for key, val in arr % }
 <p>{{ loop.index }} -- {{ key }} -- {{ val }}</p>
{ % endfor % }

8. Leistungsstarke integrierte Filter

  1. add(value)：使变量与value相加，可以转换为数值字符串会自动转换为数值。

  2. addslashes：用 \ 转义字符串

  3. capitalize：大写首字母

  4. date(format[, tzOffset])：转换日期为指定格式

  5. format：格式

  6. tzOffset：时区

  7. default(value)：默认值（如果变量为undefined，null，false）

  8. escape([type])：转义字符

  9. 默认： &, <, >, ", '

  10. js: &, <, >, ", ', =, -, ;

  11. first：返回数组第一个值

  12. join(glue)：同[].join

  13. json_encode([indent])：类似JSON.stringify, indent为缩进空格数

  14. last：返回数组最后一个值

  15. length：返回变量的length，如果是object，返回key的数量

  16. lower：同''.toLowerCase()

  17. raw：指定输入不会被转义

  18. replace(search, replace[, flags])：同''.replace

  19. reverse：翻转数组

  20. striptags：去除html/xml标签

  21. title：大写首字母

  22. uniq：数组去重

  23. upper：同''.toUpperCase

  24. url_encode：同encodeURIComponent

  25. url_decode：同decodeURIComponemt

使用方法：

例如我们要格式化一个时间，使用方法和linux上的管道命令非常像

{{ birthday|date('Y-m-d') }}

大写首字母

{{ name|title }}

9.set命令

用来设置一个变量，在当前上下文中复用

{% set foo = [0, 1, 2, 3, 4, 5] %}
 {% for num in foo %}
 <li>{{ num }}</li>
{% endfor %}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue-cli与webpack处理静态资源的方法及webpack打包使用步奏详解

JavaScript常用截取字符串方法使用汇总

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JavaScript kapselt nativ einen Funktionstest-Beispielcode für Ein- und AusblendeffekteNächster Artikel：JavaScript kapselt nativ einen Funktionstest-Beispielcode für Ein- und Ausblendeffekte

In Verbindung stehende Artikel

Mehr sehen