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

  • Post author:
  • Post category:其他




“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

”即可,刷新



版权声明:本文为foruok原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。