Comment utiliser le moteur de modèle frontal de nodejs
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 :
Prend en charge la plupart des navigateurs grand public.
La compatibilité des expressions est bonne.
Héritage de modèles orientés objet.
Appliquez des filtres et des transformations à la sortie dans le modèle.
peut rendre la page en fonction de la force de la route.
Prend en charge la réutilisation des pages.
Prend en charge les pages dynamiques.
Extensible et personnalisable.
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'
})
})index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
{{ content }}
</body>
</html>Puis testez
node app.js
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 }}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 }}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èleDans 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>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 %}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>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.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 % }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中文网其它相关文章！
推荐阅读：
vue-cli与webpack处理静态资源的方法及webpack打包使用步奏详解
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
La différence entre nodejs et tomcat
Apr 21, 2024 am 04:16 AM
Les principales différences entre Node.js et Tomcat sont : Runtime : Node.js est basé sur le runtime JavaScript, tandis que Tomcat est un conteneur de servlet Java. Modèle d'E/S : Node.js utilise un modèle asynchrone non bloquant, tandis que Tomcat est un modèle de blocage synchrone. Gestion de la concurrence : Node.js gère la concurrence via une boucle d'événements, tandis que Tomcat utilise un pool de threads. Scénarios d'application : Node.js convient aux applications en temps réel, gourmandes en données et à forte concurrence, et Tomcat convient aux applications Web Java traditionnelles.
La différence entre nodejs et vuejs
Apr 21, 2024 am 04:17 AM
Node.js est un environnement d'exécution JavaScript côté serveur, tandis que Vue.js est un framework JavaScript côté client permettant de créer des interfaces utilisateur interactives. Node.js est utilisé pour le développement côté serveur, comme le développement d'API de service back-end et le traitement des données, tandis que Vue.js est utilisé pour le développement côté client, comme les applications monopage et les interfaces utilisateur réactives.
Nodejs est-il un framework backend ?
Apr 21, 2024 am 05:09 AM
Node.js peut être utilisé comme framework backend car il offre des fonctionnalités telles que des performances élevées, l'évolutivité, la prise en charge multiplateforme, un écosystème riche et une facilité de développement.
Comment connecter Nodejs à la base de données MySQL
Apr 21, 2024 am 06:13 AM
Pour vous connecter à une base de données MySQL, vous devez suivre ces étapes : Installez le pilote mysql2. Utilisez mysql2.createConnection() pour créer un objet de connexion contenant l'adresse de l'hôte, le port, le nom d'utilisateur, le mot de passe et le nom de la base de données. Utilisez connection.query() pour effectuer des requêtes. Enfin, utilisez connection.end() pour mettre fin à la connexion.
Quelles sont les variables globales dans nodejs
Apr 21, 2024 am 04:54 AM
Les variables globales suivantes existent dans Node.js : Objet global : global Module principal : processus, console, nécessiter Variables d'environnement d'exécution : __dirname, __filename, __line, __column Constantes : undefined, null, NaN, Infinity, -Infinity
Quelle est la différence entre les fichiers npm et npm.cmd dans le répertoire d'installation de nodejs ?
Apr 21, 2024 am 05:18 AM
Il existe deux fichiers liés à npm dans le répertoire d'installation de Node.js : npm et npm.cmd. Les différences sont les suivantes : différentes extensions : npm est un fichier exécutable et npm.cmd est un raccourci de fenêtre de commande. Utilisateurs Windows : npm.cmd peut être utilisé à partir de l'invite de commande, npm ne peut être exécuté qu'à partir de la ligne de commande. Compatibilité : npm.cmd est spécifique aux systèmes Windows, npm est disponible multiplateforme. Recommandations d'utilisation : les utilisateurs Windows utilisent npm.cmd, les autres systèmes d'exploitation utilisent npm.
Y a-t-il une grande différence entre nodejs et java ?
Apr 21, 2024 am 06:12 AM
Les principales différences entre Node.js et Java résident dans la conception et les fonctionnalités : Piloté par les événements ou piloté par les threads : Node.js est piloté par les événements et Java est piloté par les threads. Monothread ou multithread : Node.js utilise une boucle d'événements monothread et Java utilise une architecture multithread. Environnement d'exécution : Node.js s'exécute sur le moteur JavaScript V8, tandis que Java s'exécute sur la JVM. Syntaxe : Node.js utilise la syntaxe JavaScript, tandis que Java utilise la syntaxe Java. Objectif : Node.js convient aux tâches gourmandes en E/S, tandis que Java convient aux applications de grande entreprise.
Nodejs est-il un langage de développement back-end ?
Apr 21, 2024 am 05:09 AM
Oui, Node.js est un langage de développement backend. Il est utilisé pour le développement back-end, notamment la gestion de la logique métier côté serveur, la gestion des connexions à la base de données et la fourniture d'API.
