検索

ホームページ >ウェブフロントエンド >jsチュートリアル >Nodejs フロントエンド テンプレート エンジン swig の使用方法のチュートリアル

Nodejs フロントエンド テンプレート エンジン swig の使用方法のチュートリアル

php中世界最好的语言
php中世界最好的语言オリジナル
2018-05-21 13:50:041899ブラウズ

今回は、nodejs フロントエンド テンプレート エンジン swig の使用方法のチュートリアルをお届けします。nodejs フロントエンド テンプレート エンジン swig を使用する際の 注意事項は何ですか。以下は実際的なケースです。見てみましょう。

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

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

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

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

。

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

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

  1. 表現の相性が良い。

    3. オブジェクト指向
  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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>{{ title }}</title>
</head>
<body>
 {{ content }}
</body>
</html>
その後、テスト実行

rrreええ

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

Browser running.png

3. 基本的な使い方

1. 変数 

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

2. 属性

3. テンプレートの継承

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

{{ name }}

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

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

{{ student.name }}

まだコピーしていないことに注意してください。 {% block head here %}{% endblock %} このブロック

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

4.include template

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

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

5.if判定

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

6.if-else判定

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

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. 使用法: 

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

    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 %}
 <li>{{ num }}</li>
{% endfor %}

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

    推荐阅读：

    php生成随机数字、字母或数字字母混合的字符串

    php图片裁剪与缩略图使用实例讲解

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

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JavaScript 配列の some() と filter() の使用法と違い (コード付き)次の記事：JavaScript 配列の some() と filter() の使用法と違い (コード付き)

関連記事

続きを見る