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

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

php中世界最好的语言オリジナル: 2018-05-29 14:51:452768ブラウズ

今回は、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 テンプレートエンジンがあります。次の機能:

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

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

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

。 not copy {% 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 つのヘルパー関数

使用法:

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

add(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上的管道命令非常像

{{ 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中文网其它相关文章！

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

関連記事