Node.js开发入门—使用jade模板引擎

在“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。

第3步，把下面的代码保存到app.js文件里：

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

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”，启动网站。

最后呢，就可以在浏览器里访问了，地址栏里输入“http://localhost:3000”即可，刷新几次，你可能会看