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

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

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

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

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

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

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

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

。

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

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

表現の相性が良い。
の
テンプレート継承。
テンプレートの出力にフィルターと変換を適用します。
このページは Lu Jin に従ってレンダリングできます。
ページの再利用をサポートします。
動的ページをサポートします。
拡張可能でカスタマイズ可能。

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 から開始)

loop.index0:現在のループ (0 から開始)
loop.revindex: 終了から開始する現在のループのインデックス (1 から開始)
loop.revindex0: 終了から開始する現在のループのインデックス (開始0から)
loop.key: 反復がオブジェクトの場合は、現在のループのキーです。それ以外の場合は、loop.indexと同じです
loop.first: 最初の値の場合はtrueを返します。
loop.last: 最後の値の場合は true を返します
loop.cycle: 指定されたパラメーターを期間として受け取る 1 つのヘルパー関数
使用法:
```
// 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() の使用法と違い (コード付き)

続きを見る

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

関連記事

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