在“Node.js开发入门——Express安装与使用”里，我们曾经使用express generator创建了一个HelloExpress网站，express工具为我们生成了基本的目录结构、模板、stylesheet、routers等。虽然那只是一个简单的HelloWorld类的小东西，可里面包含的内容还是有些多了，为了更好的理解Express所支持的jade模板引擎的用法，我们这次提供一个手动创建的小网站，可以显示来访者的IP，并对访问进行计数。
安装jade
npm install -g jade
执行上面的命令，全局安装。
Visitor网站
第1步，在myprojects目录下创建一个Visitor目录。
第2步，把下面的代码保存在package.json文件里：
{ "name": "Visitor", "version": "0.0.0", "private": true, "dependencies": { "express": "~4.13.1", "jade": "~1.11.0", } }
这个json文件描述了我们的Visitor网站的一些信息，最重要的部分是依赖。我们要使用express和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('https://www.jb51.net/', 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文件是我们网站的入口。
第4步，创建一个views目录，在里面创建一个模板文件index.jade，内容如下：
doctype html html head title= title body h1= title p Hello, #{ip} p You're the #{counter} visitor.
第5步，在Visitor目录里执行“npm install”，安装依赖。
第6步，在Visitor目录里执行“node app.js”，启动网站。
最后呢，就可以在浏览器里访问了，地址栏里输入“:3000”即可，刷新几次，你可能会看到下面的界面：
这个简单的Visitor网站，和之前的HelloWorld、HelloExpress都不太一样了，它有了一些动态的内容。接下来我们就来看看这一切是如何发生的。
express与模板引擎
我在Visitor里使用了jade模板引擎，类似的还有ejs以及很多，可以访问这里来了解：https://github.com/joyent/node/wiki/Modules。
模板引擎使用模板文件来动态生成HTML文件，在生成时又可以按照一定的规则将应用程序里的数据整合进HTML文件。这样，我们既避免了手动编写HTML的繁琐（相对使用模板而言），又能生成具有动态内容的网页。
Express和Jade结合得比较好，我们来看看怎么配置它。
Express配置jade
Express服务器的行为可以通过一些设置选项来控制，这些选项可以通过express对象的set(setting, value)、enable(setting)和disable(setting)来设置。具体支持哪些设置，可以看这里。我们的Visitor只用到了“view engine”和“views”。
“view engine”选项用来设置要使用的引擎，Visitor的代码如下：
app.set('view engine', 'jade');
“views”选项用来设置模板文件所在目录，Visitor的代码如下：
app.set('views', './views');
我在这里简单的使用了相对路径，更好的做法是使用path模块，根据全局变量__dirname来拼接。__dirname指当前正在执行的脚本所在的目录，对我们的Visitor示例来讲，就是app.js所在的那个目录。代码可能是这样的：
var path = require('path'); path.join(__dirname, 'views');
express默认会根据模板文件的扩展名来使用对应的引擎。对于*.jade文件，express内部会调用下面的语句：
app.engine('jade', require('jade').__express);
所以，我们的app.js，实际上也可以去掉这行代码，结果是一样的。
本地对象
我们可以在模板文件里包含动态数据，这些动态数据来自应用程序。我们可以使用express对象的locals对象来存储本地变量。下面的代码就存储了标题和访问计数：
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参考在这里。
Response对象也有一个locals对象，它和app.locals的区别是，res的locals只在当前渲染的view内有效，而app.locals是全局的。
另外render方法的可选参数locals，也可以定义本地变量对象，传递给view。我在代码里把ip传了过去。
在jade文件里，常见的有两种方式可以调用由应用程序传入的本地变量：
#{表达式}
标签=表达式
前面的index.jade模板文件里，对于页面标题，我们这么用的：
title= title
title是jade用来定义HTML文档title的标签。
对于body里的一级标题，我们这么用的（h1是jade用来定义HTML一级标题的标签）：
h1= title