Maison > interface Web > js tutoriel > le corps du texte

Comment utiliser le moteur de modèle frontal de nodejs

php中世界最好的语言
Libérer: 2018-05-29 14:51:45
original
2690 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser le swig du moteur de modèle frontal nodejs, et quelles sont les précautions à prendre pour utiliser le swig du moteur de modèle frontal nodejs. Ce qui suit est un cas pratique, jetons un coup d'œil.

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

Ceci est une comparaison entre les deux

http : //vschart.com /compare/swig-template-engine/vs/jade-template-engin

Apprenons-en sur swig, le moteur de modèles front-end

Une brève introduction à swig

swig est un moteur de modèles JS. Il présente les fonctionnalités suivantes :

  1. Prend en charge la plupart des navigateurs grand public.

  2. La compatibilité des expressions est bonne.

  3. Héritage de modèles orientés objet.

  4. Appliquez des filtres et des transformations à la sortie dans le modèle.

  5. peut rendre la page en fonction de la force de la route.

  6. Prend en charge la réutilisation des pages.

  7. Prend en charge les pages dynamiques.

  8. Extensible et personnalisable.

1. Installation de swig

npm install swig --save
Copier après la connexion

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'
 })
})
Copier après la connexion

index.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>{{ title }}</title>
</head>
<body>
 {{ content }}
</body>
</html>
Copier après la connexion

Puis testez

node app.js
Copier après la connexion

pendant la navigation Entrée du serveur : http://localhost:4000, l'effet d'exécution est le suivant

Navigateur en cours d'exécution.png

3. Utilisation de base

1. Variable

{{ name }}
Copier après la connexion

Ce qu'il faut noter ici, c'est qu'il doit y avoir des espaces aux deux extrémités, donc { {name}} est écrit Une erreur sera signalée

2 Attributs

{{ student.name }}
Copier après la connexion

3. >Swig utilise extends et block pour implémenter la disposition d'héritage de modèle.html

Nous 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

<!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>
Copier après la connexion
Ensuite, nous écrivons un index.html pour hériter de ce modèle

Notez que je n'ai pas écrasé le bloc {% block head %}{% endblock %}

{% extends './layout.html' %}
{% block title %} index {% endblock %}
{% block content %}
 <p>
   <h1>hello swig</h1>
  <p>
{% endblock %}
Copier après la connexion
C'est-à-dire que nous pouvons De nombreux blocs sont définis dans la page du modèle layout.html et les sous-pages peuvent être implémentées de manière sélective.

4.include template

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>
Copier après la connexion

6.if-else jugement
{ % if name === '郭靖' % }
 hello 靖哥哥
{ % endif % }
Copier après la connexion

7.for boucle
{ % if name === '郭靖' % }
 hello 靖哥哥
{ % elseif name === '黄蓉' % }
 hello 蓉妹妹
{ % else % }
 hello 欧阳峰
{ % endif % }
Copier après la connexion

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 % }
Copier après la connexion

loop.index : l'index de la boucle actuelle (en commençant par 1)
  1. loop.index0 : L'index de la boucle actuelle (à partir de 0)
  2. loop.revindex : L'index de la boucle actuelle commençant depuis la fin (à partir de 1)
  3. loop.revindex0 : L'index de la fin de la boucle actuelle (à partir de 0)
  4. 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
  5. loop.first : Renvoie vrai si c'est le cas la première valeur
  6. loop.last : renvoie vrai si c'est la dernière valeur
  7. loop.cycle : une fonction d'assistance qui prend la valeur spécifiée paramètre comme le cycle
  8. Utilisation :

Puissants filtres intégrés
// arr = [1, 2, 3]
{ % for key, val in arr % }
 <p>{{ loop.index }} -- {{ key }} -- {{ val }}</p>
{ % endfor % }
Copier après la connexion

  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') }}
Copier après la connexion

大写首字母

{{ name|title }}
Copier après la connexion

9.set命令

用来设置一个变量,在当前上下文中复用

{% set foo = [0, 1, 2, 3, 4, 5] %}
 {% for num in foo %}
 <li>{{ num }}</li>
{% endfor %}
Copier après la connexion

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

推荐阅读:

vue-cli与webpack处理静态资源的方法及webpack打包使用步奏详解

JavaScript常用截取字符串方法使用汇总

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal