So bedienen Sie Node.js mit der Jade-Template-Engine

Dieses Mal zeige ich Ihnen, wie Sie Node.js bedienen und die Jade-Template-Engine verwenden sind praktische Fälle. In „Einführung in die Node.js-Entwicklung – Express-Installation und -Nutzung“ haben wir den Express-Generator verwendet, um eine HelloExpress-Website zu erstellen. Das Express-Tool hat die grundlegende Verzeichnisstruktur für uns generiert. Stylesheets, Router usw. Obwohl es sich nur um eine einfache HelloWorld-Sache handelt, enthält sie dennoch viel Inhalt. Um die Verwendung der von Express unterstützten Jade-Vorlagen-Engine besser zu verstehen, stellen wir dieses Mal eine manuell erstellte kleine Website bereit, die die IP-Adresse des Besuchers anzeigen und Besuche zählen kann .

Jade installieren

npm install -g jade

Schritt 1: Erstellen Sie ein Besucherverzeichnis im Verzeichnis „myprojects“. Schritt 2, speichern Sie den folgenden Code in der package.json-Datei:

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

Diese JSON-Datei beschreibt einige Informationen über unsere Besucher-Website, der wichtigste Teil sind die Abhängigkeiten. Wir werden Express und Jade verwenden.

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";

Die app.js-Datei ist der Eingang zu unserer Website.

Schritt 4: Erstellen Sie ein Ansichtsverzeichnis und darin eine Vorlagendatei index.jade mit folgendem Inhalt:

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

Schritt 5: Führen Sie „npm install“ im Besucherverzeichnis aus, um Rely zu installieren .

Schritt 6: Führen Sie „node app.js“ im Besucherverzeichnis aus, um die Website zu starten.

Schließlich können Sie im Browser darauf zugreifen. Geben Sie einfach „http://localhost:3000“ in die Adressleiste ein und Sie sehen möglicherweise die folgende Oberfläche:

Express- und Template-Engine

Ich verwende die Jade-Template-Engine in Visitor. Zu ähnlichen gehören EJS und viele andere. Sie können hier mehr darüber erfahren : https://github.com/joyent/node/wiki/Modules. Die Template-Engine nutzt Template-Dateien, um HTML-Dateien dynamisch zu generieren. Bei der Generierung kann sie Daten aus der Anwendung nach bestimmten Regeln in HTML-Dateien integrieren. Auf diese Weise vermeiden wir nicht nur das mühsame manuelle Schreiben von HTML (im Vergleich zur Verwendung von Vorlagen), sondern generieren auch Webseiten mit dynamischen Inhalten.

Express und Jade lassen sich besser kombinieren. Schauen wir uns an, wie man es konfiguriert.

Express-Konfiguration jade

Das Verhalten des Express-Servers kann über einige Einstellungsoptionen gesteuert werden, die über die Set(Einstellung) gesteuert werden können , Wert), aktivieren (Einstellung) und deaktivieren (Einstellung) zum Festlegen. Informationen zu bestimmten unterstützten Einstellungen finden Sie unter http://expressjs.com/4x/api.html. Unser Besucher verwendet nur „View Engine“ und „Views“. Die Option „View Engine“ wird verwendet, um die zu verwendende Engine festzulegen. Der Besuchercode lautet wie folgt:

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

Die Option „Views“ wird verwendet, um das Verzeichnis festzulegen, in dem sich die Vorlage befindet Der Besuchercode lautet wie folgt:

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

Ich habe hier einfach relative Pfade verwendet und den Pfad entsprechend dem globalen Variablennamen splice. dirname bezieht sich auf das Verzeichnis, in dem sich das aktuell ausgeführte Skript befindet. In unserem Besucherbeispiel ist es das Verzeichnis, in dem sich app.js befindet. Der Code könnte so aussehen:

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

Express verwendet standardmäßig die entsprechende Engine entsprechend der Erweiterung der Vorlagendatei. Für *.jade-Dateien ruft Express intern die folgende Anweisung auf:

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

Daher kann unsere app.js diese Codezeile tatsächlich entfernen und das Ergebnis ist dasselbe.

Lokales Objekt

Wir können dynamische Daten in die Vorlagendatei aufnehmen, die aus der Anwendung stammt. Wir können das lokale Objekt des Express-Objekts verwenden, um lokale Variablen zu speichern. Der folgende Code speichert den Titel und die Zugriffsanzahl:

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标签

Das obige ist der detaillierte Inhalt vonSo bedienen Sie Node.js mit der Jade-Template-Engine. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!