在“Node.js開(kāi)發(fā)入門——Express安裝與使用”里，我們?cè)?jīng)使用express generator創(chuàng)建了一個(gè)HelloExpress網(wǎng)站，express工具為我們生成了基本的目錄結(jié)構(gòu)、模板、stylesheet、routers等。雖然那只是一個(gè)簡(jiǎn)單的HelloWorld類的小東西，可里面包含的內(nèi)容還是有些多了，為了更好的理解Express所支持的jade模板引擎的用法，我們這次提供一個(gè)手動(dòng)創(chuàng)建的小網(wǎng)站，可以顯示來(lái)訪者的IP，并對(duì)訪問(wèn)進(jìn)行計(jì)數(shù)。

安裝jade

npm install -g jade

執(zhí)行上面的命令，全局安裝。

Visitor網(wǎng)站

第1步，在myprojects目錄下創(chuàng)建一個(gè)Visitor目錄。

第2步，把下面的代碼保存在package.json文件里：

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

這個(gè)json文件描述了我們的Visitor網(wǎng)站的一些信息，最重要的部分是依賴。我們要使用express和jade。

var express = require('express');var app = express();var counter = 0;// view engine setupapp.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";

app.js文件是我們網(wǎng)站的入口。

第4步，創(chuàng)建一個(gè)views目錄，在里面創(chuàng)建一個(gè)模板文件index.jade，內(nèi)容如下：

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

第5步，在Visitor目錄里執(zhí)行“npm install”，安裝依賴。

第6步，在Visitor目錄里執(zhí)行“node app.js”，啟動(dòng)網(wǎng)站。

最后呢，就可以在瀏覽器里訪問(wèn)了，地址欄里輸入“http://localhost:3000”即可，刷新幾次，你可能會(huì)看到下面的界面：

這個(gè)簡(jiǎn)單的Visitor網(wǎng)站，和之前的HelloWorld、HelloExpress都不太一樣了，它有了一些動(dòng)態(tài)的內(nèi)容。接下來(lái)我們就來(lái)看看這一切是如何發(fā)生的。

express與模板引擎

我在Visitor里使用了jade模板引擎，類似的還有ejs以及很多，可以訪問(wèn)這里來(lái)了解：https://github.com/joyent/node/wiki/Modules。

模板引擎使用模板文件來(lái)動(dòng)態(tài)生成HTML文件，在生成時(shí)又可以按照一定的規(guī)則將應(yīng)用程序里的數(shù)據(jù)整合進(jìn)HTML文件。這樣，我們既避免了手動(dòng)編寫(xiě)HTML的繁瑣（相對(duì)使用模板而言），又能生成具有動(dòng)態(tài)內(nèi)容的網(wǎng)頁(yè)。

Express和Jade結(jié)合得比較好，我們來(lái)看看怎么配置它。

Express配置jade

Express服務(wù)器的行為可以通過(guò)一些設(shè)置選項(xiàng)來(lái)控制，這些選項(xiàng)可以通過(guò)express對(duì)象的set(setting, value)、enable(setting)和disable(setting)來(lái)設(shè)置。具體支持哪些設(shè)置，可以看這里http://expressjs.com/4x/api.html。我們的Visitor只用到了“view engine”和“views”。

“view engine”選項(xiàng)用來(lái)設(shè)置要使用的引擎，Visitor的代碼如下：

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

“views”選項(xiàng)用來(lái)設(shè)置模板文件所在目錄，Visitor的代碼如下：

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

我在這里簡(jiǎn)單的使用了相對(duì)路徑，更好的做法是使用path模塊，根據(jù)全局變量__dirname來(lái)拼接。__dirname指當(dāng)前正在執(zhí)行的腳本所在的目錄，對(duì)我們的Visitor示例來(lái)講，就是app.js所在的那個(gè)目錄。代碼可能是這樣的：

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

express默認(rèn)會(huì)根據(jù)模板文件的擴(kuò)展名來(lái)使用對(duì)應(yīng)的引擎。對(duì)于*.jade文件，express內(nèi)部會(huì)調(diào)用下面的語(yǔ)句：

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

所以，我們的app.js，實(shí)際上也可以去掉這行代碼，結(jié)果是一樣的。

本地對(duì)象

我們可以在模板文件里包含動(dòng)態(tài)數(shù)據(jù)，這些動(dòng)態(tài)數(shù)據(jù)來(lái)自應(yīng)用程序。我們可以使用express對(duì)象的locals對(duì)象來(lái)存儲(chǔ)本地變量。下面的代碼就存儲(chǔ)了標(biāo)題和訪問(wèn)計(jì)數(shù)：

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

jade模板文件里可以直接訪問(wèn)express對(duì)象的locals對(duì)象的屬性。我在app.js里設(shè)置的title和counter，在index.jade模板文件引用了它們。

現(xiàn)在我們來(lái)看這行代碼：

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

它調(diào)用express的Response對(duì)象的render方法來(lái)渲染模板文件，并且傳遞了一個(gè)本地對(duì)象。render方法原型：

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

res.render方法渲染一個(gè)view并且把渲染生成的HTML字符串發(fā)送給客戶端。res的API參考在這里http://expressjs.com/4x/api.html。

Response對(duì)象也有一個(gè)locals對(duì)象，它和app.locals的區(qū)別是，res的locals只在當(dāng)前渲染的view內(nèi)有效，而app.locals是全局的。

另外render方法的可選參數(shù)locals，也可以定義本地變量對(duì)象，傳遞給view。我在代碼里把ip傳了過(guò)去。

在jade文件里，常見(jiàn)的有兩種方式可以調(diào)用由應(yīng)用程序傳入的本地變量：

1. #{表達(dá)式}
2. 標(biāo)簽=表達(dá)式

前面的index.jade模板文件里，對(duì)于頁(yè)面標(biāo)題，我們這么用的：

title= title

title是jade用來(lái)定義HTML文檔title的標(biāo)簽。

對(duì)于body里的一級(jí)標(biāo)題，我們這么用的（h1是jade用來(lái)定義HTML一級(jí)標(biāo)題的標(biāo)簽）：

h1= title

這都是屬于“標(biāo)簽=表達(dá)式”這種調(diào)用方式，這種方式通常用在一行jade代碼的開(kāi)始，也就是標(biāo)簽開(kāi)始的地方。而“#{表達(dá)式}”這種方式的好處是可以插入到j(luò)ade模板文件的任意地方。比如：

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

我們也可以將“h1= title”修改為“h1 #{title}”，效果一樣。

jade引擎簡(jiǎn)介

jade使用一些標(biāo)簽來(lái)標(biāo)記如何生成HTML，jade模板文件看起來(lái)很不像HTML文件，但它的模板文件小而整潔。使用jade，需要了解它都支持哪些標(biāo)簽，這個(gè)可以直接去看jade-lang，那里最詳細(xì)也最權(quán)威，我們這里只介紹index.jade文件用到的那些標(biāo)簽。

關(guān)于jade，有兩篇文章不錯(cuò)，可以看看，https://cnodejs.org/topic/5368adc5cf738dd6090060f2，后面這篇文章是網(wǎng)友根號(hào)三寫(xiě)的一個(gè)關(guān)于jade的系列文章的開(kāi)篇，整個(gè)系列里的文章都值得一看。

HTML文檔的開(kāi)始通常是文檔聲明，對(duì)應(yīng)到j(luò)ade模板文件里，就是doctype html。還有其它的文檔類型，比如xml，可以寫(xiě)作doctype xml。更多請(qǐng)參考http://jade-lang.com/reference/doctype/。

jade有很多標(biāo)簽，用于生成HTML對(duì)應(yīng)的標(biāo)簽。比如html對(duì)應(yīng)，head對(duì)應(yīng)，body對(duì)應(yīng)，p對(duì)應(yīng)，title對(duì)應(yīng)，這也是我們的index.jade用到的所有標(biāo)簽了。通常我們?cè)贖TML里使用的標(biāo)簽寫(xiě)法，去掉尖括號(hào)就成了jade里可用的標(biāo)簽，比如對(duì)應(yīng)jade里的div。

HTML標(biāo)簽往往可以設(shè)置name、id、class等屬性，在jade里，是通過(guò)tag(attr=value)這種形式表示的。比如div(class=”view-container”)，又比如input(type=”checkbox”)。

測(cè)試jade模板文件

一開(kāi)始用jade模板，記不全它的標(biāo)簽，也經(jīng)常不知道自己的寫(xiě)的模板文件生成的html文檔是否正確。還好安裝jade后，有一個(gè)命令行工具jade，可以用來(lái)驗(yàn)證模板文件。

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

jade命令有很多選項(xiàng)，可以執(zhí)行“jade -h”查看。要驗(yàn)證模板文件，最簡(jiǎn)單的辦法就是使用jade工具生成為html文檔。命令如下：

jade xxx.jade

執(zhí)行上面的命令，就會(huì)在當(dāng)前目錄下生成一個(gè)與模板文件同名的html文檔。不過(guò)格式很難讀，完全是一坨屎擠在一起。加上 -P(–pretty) 就好了。這樣：

jade -P xxx.jade

比如我們有這么一個(gè)使用了AngularJS的模板文件scope_template.jade，內(nèi)容如下：

doctype htmlhtml(ng-app="myApp") head link(rel='stylesheet', href='/stylesheets/style.css') body div(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")

運(yùn)行“jade -P scope_template.jade”命令會(huì)生成scope_template.html文件，內(nèi)容如下：

<!DOCTYPE html><html ng-app="myApp"> <head> <title></title> <link rel="stylesheet" href="/stylesheets/style.css" rel="external nofollow" > </head> <body> <div 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> </div> <script src="/javascripts/angular-1.4.3.min.js"></script> <script src="/javascripts/scope_template.js"></script> </body></html>

需要提一下，我們既可以用jade編寫(xiě)完整的HTML文檔，也可以編寫(xiě)符合HTML語(yǔ)法的局部模板。比如下面的jade文件：

div(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="增加")

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。