집 > 기사 > 웹 프론트엔드 > Nodejs 프런트엔드 템플릿 엔진 사용 튜토리얼

Nodejs 프런트엔드 템플릿 엔진 사용 튜토리얼

php中世界最好的语言원래의: 2018-05-21 13:50:041681검색

이번에는 nodejs 프론트엔드 템플릿 엔진 swig 사용법 튜토리얼을 가져왔습니다. nodejs 프론트엔드 템플릿 엔진 swig 사용 시 주의사항 은 무엇인가요? 다음은 실제 사례입니다. 살펴보겠습니다.

jade에 비해 저는 여전히 swig 프론트엔드 템플릿 엔진을 선호합니다. jade의 구문이 훨씬 더 간결하고 효율적이지만, 저에게 가장 큰 문제는 html처럼 보이지 않는다는 것입니다. . .

그래서 swig를 사용하기로 결정했습니다. 페이지 구조가 친숙해 보이고 사용하기가 훨씬 쉽습니다.

많은 친구들이 둘의 장점과 단점으로 고민하고 있습니다. 이는 사람마다 필요에 따라 다릅니다.

프론트엔드 템플릿 엔진인 swig에 대해 알아봅시다.

swig에 대한 간략한 소개입니다. swig는 JS 템플릿 엔진이며 다음과 같은 기능을 가지고 있습니다:

객체 지향
의 템플릿 상속.

1. swig 설치

npm install swig --save

2. Express 프레임워크와 통합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>

테스트 실행

node app.js

브라우저에 입력하세요: http://localhost:4000 실행 효과는 다음과 같습니다

Browser running.png

3. 기본 사용법

1. 변수

{{ name }}

주의할 점 여기에는 공백이 있어야 하므로 {{name}}이(가) 오류를 보고합니다

2. 속성

{{ student.name }}

3. 템플릿 상속

Swig은 확장 및 블록을 사용하여 템플릿 상속을 구현합니다. layout.html

먼저 템플릿을 정의합니다

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

이 템플릿에서 우리는 세 개의 블록을 정의했습니다. 하위 템플릿은 이 세 개의 블록을 상속할 수 있습니다

그런 다음 이 템플릿을 상속하기 위해 index.html을 작성합니다

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

복사하지 않았습니다. {% block head here %}{% endblock %} 이 블록

은layout.html 템플릿 페이지에서 많은 블록을 정의할 수 있고 하위 페이지를 선택적으로 구현할 수 있음을 의미합니다.

4.include template

현재 위치에 대한 템플릿을 포함합니다. 이 템플릿은 현재 컨텍스트를 사용합니다

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

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

6.if-else판단

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

7 .for Loop

첫 번째 밤나무:

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

For 루프 내장 변수:

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

8.强大的内置过滤器

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 프런트엔드 템플릿 엔진 사용 튜토리얼

관련 기사