Nodejsフロントエンドテンプレートエンジンの使い方

今回は、nodejs フロントエンド テンプレート エンジン swig の使い方と、nodejs フロントエンド テンプレート エンジン swig を使用する際の注意点について説明します。以下は実践的なケースですので、見てみましょう。

jade と比較すると、私は依然として swig フロントエンド テンプレート エンジンを好みます。jade の構文ははるかに簡潔で効率的ですが、私にとって最大の問題は、HTML のように見えないことです。 。 。

そこで、ページ構造は見慣れており、はるかに使いやすいので、swig を使用することにしました。

多くの友人も、この 2 つのメリットとデメリットに悩まされています。これはニーズに応じて異なります。

http://vschart.com/compare/ swig-template-engine/vs/jade -template-engin

フロントエンド テンプレート エンジンである swig について学びましょう

swig の簡単な紹介

swig には、JS テンプレート エンジンがあります。次の機能:

ほとんどの主流ブラウザをサポートします。

1. 表現の相性が良い。

2. オブジェクト指向のテンプレートの継承。

3. テンプレートの出力にフィルターと変換を適用します。

4. このページは Lu Jin に従ってレンダリングできます。

5. ページの再利用をサポートします。

6. 動的ページをサポートします。

7. 拡張可能でカスタマイズ可能。

1. swigのインストール

npm install swig --save

2. Express Frameworkと統合

app.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

nbsp;html>


 <meta>
 <title>{{ title }}</title>


 {{ content }}

その後、テスト実行

rrreええ

ブラウザに入力してください: http://localhost:4000、実行結果は以下の通りです

Browser running.png

3. 基本的な使い方

1. 変数

node app.js

注意すべき点ここにはフロントエンドとバックエンドがあるため、{{name}} はエラーを報告します

2. 属性

3. テンプレートの継承

を使用してテンプレートの継承を実装します。 layout.html

最初にテンプレートを定義します

{{ name }}

このテンプレートでは、サブテンプレートはこれらの3つのブロックを継承できます

次に、このテンプレートを継承するindex.htmlを作成します

{{ student.name }}

。 not copy {% block head here %}{% endblock %} このブロック

は、layout.html テンプレート ページで多くのブロックを定義でき、サブページを選択的に実装できることを意味します。

4.include template

には現在の場所へのテンプレートが含まれます。このテンプレートは現在のコンテキストを使用します

nbsp;html>


 <meta>
 <title>{% block title %}{% endblock %}</title>
 {% block head %}{% endblock %}


 {% block content %}{% endblock %}

5.if判定

{% extends './layout.html' %}
{% block title %} index {% endblock %}
{% block content %}
 <p>
   </p><h1 id="hello-swig">hello swig</h1>
  <p>
{% endblock %}</p>

6.if-else判定

nbsp;html>


 <meta>
 <title>{% block title %}{% endblock %}</title>
 {% include "./includes/head.html" %}
 {% block head %}{% endblock %}


 {% include "./includes/header.html" %}
 {% block content %}{% endblock %}

7 .for ループ

最初の栗:

{ % if name === '郭靖' % }
 hello 靖哥哥
{ % endif % }

for ループの組み込み変数:

loop.index: 現在のループのインデックス (1 から開始)

1. loop.index0:現在のループ (0 から開始)

2. loop.revindex: 終了から開始する現在のループのインデックス (1 から開始)

3. loop.revindex0: 終了から開始する現在のループのインデックス (開始0から)

4. loop.key: 反復がオブジェクトの場合は、現在のループのキーです。それ以外の場合は、loop.indexと同じです

5. loop.first: 最初の値の場合はtrueを返します。

6. loop.last: 最後の値の場合は true を返します

7. loop.cycle: 指定されたパラメータを期間として受け取る 1 つのヘルパー関数

8. 使用法:

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

8.フィルター内

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

{{ num }}

{% endfor %}

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

推荐阅读：

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

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

以上がNodejsフロントエンドテンプレートエンジンの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。