Comment faire fonctionner Node.js à l'aide du moteur de modèles Jade

Cette fois, je vais vous montrer comment utiliser Node.js et utiliser le moteur de modèles Jade Quelles sont les précautions pour faire fonctionner Node.js et utiliser le moteur de modèles Jade. sont des cas pratiques.

Dans "Introduction au développement Node.js - Installation et utilisation express", nous avons utilisé le générateur express pour créer un site Web HelloExpress. L'outil express a généré la

structure de répertoires de base, les modèles, les feuilles de style, routeurs, etc. Bien qu'il ne s'agisse que d'une simple chose HelloWorld, elle contient encore beaucoup de contenu. Afin de mieux comprendre l'utilisation du moteur de modèles Jade pris en charge par Express, nous proposons cette fois un petit site Web créé manuellement qui peut afficher l'adresse IP et le nombre des visiteurs. visites.

Installer jade

npm install -g jade

Exécutez la commande ci-dessus pour l'installer globalement.

Site Web visiteur

Étape 1, créez un répertoire visiteur sous le répertoire mesprojets.

Étape 2, enregistrez le code suivant dans le fichier package.json :

{
 "name": "Visitor",
 "version": "0.0.0",
 "private": true,
 "dependencies": {
 "express": "~4.13.1",
 "jade": "~1.11.0",
 }
}

Ce fichier json décrit certaines informations sur notre site Web Visiteur, la partie la plus importante est les dépendances. Nous allons utiliser express et jade.

var express = require('express');
var app = express();
var counter = 0;
// view engine setup
app.set('views', './views');
app.set('view engine', 'jade');
app.engine('jade', require('jade').express);
app.get('/', function(req, res) {
 counter++;
 app.locals.counter = counter.toString();
 res.render('index', {ip: req.ip});
});
app.listen(3000);
app.locals.title = "Welcome to Visitor";
app.locals.counter = "0";

Le fichier app.js est l'entrée de notre site Web.

Étape 4, créez un répertoire de vues et créez-y un fichier modèle index.jade avec le contenu suivant :

doctype html
html
 head
 title= title
 body
 h1= title
 p Hello, #{ip}
 p You're the #{counter} visitor.

Étape 5, exécutez "npm install" dans le répertoire des visiteurs, installer les dépendances.

Étape 6, exécutez "node app.js" dans le répertoire des visiteurs pour démarrer le site Web.

Enfin, vous pouvez y accéder dans le navigateur. Entrez simplement "http://localhost:3000" dans la barre d'adresse. Actualisez plusieurs fois et vous verrez peut-être l'interface suivante :

.

Ce site Web simple pour visiteurs est différent des précédents HelloWorld et HelloExpress. Il a un contenu dynamique. Voyons ensuite comment cela se produit.

moteur de modèles express et de modèles

J'utilise le moteur de modèles Jade dans Visitor, les moteurs similaires incluent ejs et bien d'autres, vous pouvez visiter ici En savoir plus : https://github.com/joyent/node/wiki/Modules.

Le moteur de modèles utilise des fichiers modèles pour générer dynamiquement des fichiers HTML. Lors de la génération, il peut intégrer les données de l'application dans les fichiers HTML selon certaines règles. De cette façon, nous évitons non seulement la pénibilité de l'écriture manuelle du HTML (par rapport à l'utilisation de modèles), mais nous générons également des pages Web avec un contenu dynamique.

Express et Jade sont mieux combinés. Voyons comment le configurer.

Configuration express jade

Le comportement du serveur Express peut être contrôlé via certaines options de configuration, qui peuvent être contrôlées via l'ensemble (paramètre , valeur), activer(réglage) et désactiver(réglage) pour définir. Pour les paramètres spécifiques pris en charge, vous pouvez voir ici http://expressjs.com/4x/api.html. Notre visiteur utilise uniquement le « moteur de visualisation » et les « vues ».

L'option "View Engine" permet de définir le moteur à utiliser. Le code Visiteur est le suivant :

app.set('view engine', 'jade');

L'option "Views" permet de définir le répertoire dans lequel se trouve le répertoire. le fichier modèle se trouve. Le code du visiteur est le suivant :

app.set('views', './views');

J'ai simplement utilisé des chemins relatifs ici. Une meilleure approche consiste à utiliser le module path et à épisser en fonction de la variable globale dirname. dirname fait référence au répertoire où se trouve le script en cours d'exécution. Pour notre exemple de visiteur, il s'agit du répertoire où se trouve app.js. Le code peut ressembler à ceci :

var path = require('path');
path.join(dirname, 'views');

Par défaut, express utilisera le moteur correspondant en fonction de l'extension du fichier modèle. Pour les fichiers *.jade, express appellera en interne l'instruction suivante :

app.engine('jade', require('jade').express);

Ainsi, notre app.js peut réellement supprimer cette ligne de code, et le résultat sera le même.

Objet local

Nous pouvons inclure des données dynamiques dans le fichier modèle, qui provient de l'application. Nous pouvons utiliser l'objet locals de l'objet express pour stocker les variables locales. Le code suivant stocke le titre et le nombre d'accès :

app.locals.title = "Welcome to Visitor";
app.locals.counter = "0";

jade模板文件里可以直接访问express对象的locals对象的属性。我在app.js里设置的title和counter，在index.jade模板文件引用了它们。

现在我们来看这行代码：

res.render('index', {ip: req.ip});

它调用express的Response对象的render方法来渲染模板文件，并且传递了一个本地对象。render方法原型：

res.render(view [, locals] [, callback])

res.render方法渲染一个view并且把渲染生成的HTML字符串发送给客户端。res的API参考在这里http://expressjs.com/4x/api.html。

Response对象也有一个locals对象，它和app.locals的区别是，res的locals只在当前渲染的view内有效，而app.locals是全局的。

另外render方法的可选参数locals，也可以定义本地变量对象，传递给view。我在代码里把ip传了过去。

在jade文件里，常见的有两种方式可以调用由应用程序传入的本地变量：

1. #{表达式}

2. 标签=表达式

前面的index.jade模板文件里，对于页面标题，我们这么用的：

title= title

title是jade用来定义HTML文档title的标签。

对于body里的一级标题，我们这么用的（h1是jade用来定义HTML一级标题的标签）：

h1= title

这都是属于“标签=表达式”这种调用方式，这种方式通常用在一行jade代码的开始，也就是标签开始的地方。而“#{表达式}”这种方式的好处是可以插入到jade模板文件的任意地方。比如：

p Hello, #{ip}
p You're the #{counter} visitor.

我们也可以将“h1= title”修改为“h1 #{title}”，效果一样。

jade引擎简介

jade使用一些标签来标记如何生成HTML，jade模板文件看起来很不像HTML文件，但它的模板文件小而整洁。使用jade，需要了解它都支持哪些标签，这个可以直接去看jade-lang，那里最详细也最权威，我们这里只介绍index.jade文件用到的那些标签。

关于jade，有两篇文章不错，可以看看，https://cnodejs.org/topic/5368adc5cf738dd6090060f2和http://www.jb51.net/article/139936.htm，后面这篇文章是网友根号三写的一个关于jade的系列文章的开篇，整个系列里的文章都值得一看。

HTML文档的开始通常是文档声明，对应到jade模板文件里，就是doctype html。还有其它的文档类型，比如xml，可以写作doctype xml。更多请参考http://jade-lang.com/reference/doctype/。

jade有很多标签，用于生成HTML对应的标签。比如html对应，head对应，body对应，p对应，title对应，这也是我们的index.jade用到的所有标签了。通常我们在HTML里使用的标签写法，去掉尖括号就成了jade里可用的标签，比如对应jade里的p。

HTML标签往往可以设置name、id、class等属性，在jade里，是通过tag(attr=value)这种形式表示的。比如p(class=”view-container”)，又比如input(type=”checkbox”)。

关于jade标签，这篇文章http://www.jb51.net/article/139942.htm说得很好，请参考。

测试jade模板文件

一开始用jade模板，记不全它的标签，也经常不知道自己的写的模板文件生成的html文档是否正确。还好安装jade后，有一个命令行工具jade，可以用来验证模板文件。

jade的用法如下：jade [options] [dir|file …]

jade命令有很多选项，可以执行“jade -h”查看。要验证模板文件，最简单的办法就是使用jade工具生成为html文档。命令如下：

jade xxx.jade

执行上面的命令，就会在当前目录下生成一个与模板文件同名的html文档。不过格式很难读，完全是一坨屎挤在一起。加上 -P(–pretty) 就好了。这样：

jade -P xxx.jade

比如我们有这么一个使用了AngularJS的模板文件scope_template.jade，内容如下：

doctype html
html(ng-app="myApp")
 head
 title= title
 link(rel='stylesheet', href='/stylesheets/style.css')
 body
 p(ng-controller="SimpleTemplate")
 | ValueA: 
 input(type="number" ng-model="valueA")
 br
 | ValueB: 
 input(type="number" ng-model="valueB")
 br
 br
 | Expression Value: {{valueA + valueB}}
 br
 br
 input(type="button" ng-click="addValues(valueA, valueB)" value="Click to Add Values {{valueA}} & {{valueB}}")
 br
 | Clicked Value: {{valueC}}
 br
 script(src="/javascripts/angular-1.4.3.min.js")
 script(src="/javascripts/scope_template.js")

运行“jade -P scope_template.jade”命令会生成scope_template.html文件，内容如下：

<!DOCTYPE html>
<html ng-app="myApp">
 <head>
 <title></title>
 <link rel="stylesheet" href="/stylesheets/style.css" rel="external nofollow" >
 </head>
 <body>
 <p ng-controller="SimpleTemplate">ValueA: 
 <input type="number" ng-model="valueA"><br>ValueB: 
 <input type="number" ng-model="valueB"><br><br>Expression Value: {{valueA + valueB}}<br><br>
 <input type="button" ng-click="addValues(valueA, valueB)" value="Click to Add Values {{valueA}} & {{valueB}}"><br>Clicked Value: {{valueC}}<br>
 </p>
 <script src="/javascripts/angular-1.4.3.min.js"></script>
 <script src="/javascripts/scope_template.js"></script>
 </body>
</html>

需要提一下，我们既可以用jade编写完整的HTML文档，也可以编写符合HTML语法的局部模板。比如下面的jade文件：

p(class="admin-user")
 p 添加用户
 table
 tr
 td
 label 用户名：
 td
 input(type="text" name="add_username")
 tr
 td
 label 密码：
 td
 input(type="text" name="add_password") 
 tr
 td(colspan='2' align="right")
 input(type="submit" value="增加")

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

推荐阅读：

怎样进行Vue拖拽组件开发

怎样使用node前端模板引擎Jade标签

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!