Cette fois, je vous apporte un tutoriel sur la façon d'utiliser le moteur de modèles front-end de nodejs swig, quelles sont les précautions pour l'utilisation de nodejs modèle front-end une gorgée de moteur, et voici le combat proprement dit. Jetons un coup d'œil au cas.
Par rapport à jade, je préfère toujours le moteur de template frontal swig Bien que la syntaxe de jade soit beaucoup plus concise et efficace, le plus gros problème pour moi est que
cela ne ressemble pas. html. . .
J'ai donc décidé d'utiliser swig. La structure de la page semble familière et elle est beaucoup plus facile à utiliser.
De nombreux amis sont également aux prises avec les avantages et les inconvénients des deux. Cela varie d'une personne à l'autre en fonction des besoins
Apprenons-en davantage sur swig, le moteur de modèles front-end
Une brève introduction à swig
swig est un moteur de modèles JS. Il possède les fonctionnalités suivantes :
Héritage de modèles orientés objet .
1. Installation de swig
npm install swig --save
2.
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'
})
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
{{ content }}
</body>
</html>node app.js
3. Utilisation de base
1. Variable
{{ name }}2 Attributs
{{ student.name }}3. >Swig utilise extends et block pour implémenter la disposition d'héritage de modèle.htmlNous définissons d'abord un modèle
Dans ce modèle, nous définissons trois blocs, et les sous-modèles peuvent hériter de ces trois blocs Ensuite, nous écrivons un index.html pour hériter de ce modèle<!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>{% extends './layout.html' %}
{% block title %} index {% endblock %}
{% block content %}
<p>
<h1>hello swig</h1>
<p>
{% endblock %}Inclut un modèle à l'emplacement actuel, ce modèle utilisera le contexte actuel
5 .if Jugement
<!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>6.if-else jugement
{ % if name === '郭靖' % }
hello 靖哥哥
{ % endif % }7.for boucle
{ % if name === '郭靖' % }
hello 靖哥哥
{ % elseif name === '黄蓉' % }
hello 蓉妹妹
{ % else % }
hello 欧阳峰
{ % endif % }Commençons par les châtaignes :
Variables intégrées à la boucle For :// arr = [1, 2, 3]
{ % for key, val in arr % }
<p>{ { key } } -- { { val } }</p>
{ % endfor % }loop.index : l'index de la boucle actuelle (en commençant par 1)
loop.index0 : L'index de la boucle actuelle (à partir de 0)
loop.revindex : L'index de la boucle actuelle commençant depuis la fin (à partir de 1)
loop.revindex0 : L'index de la fin de la boucle actuelle (à partir de 0)
loop.key : Si l'itération est un objet, c'est la clé de la boucle en cours, sinon c'est la même chose que loop .index
loop.first : Renvoie vrai si c'est le cas la première valeur
loop.last : renvoie vrai si c'est la dernière valeur
loop.cycle : une fonction d'assistance qui prend la valeur spécifiée paramètre comme le cycle
Utilisation :
// 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中文网其它相关文章！
推荐阅读：
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
