Express開發實例(2) —— Jade模板引擎

前一篇通過helloworld，簡單介紹了Express中的開發，本篇繼續深入的學習express的模板。

關於Jade的用法，網上有很多，本篇參考：Jade語法

安裝相關模塊

在實驗代碼前，應該先安裝express和jade：

npm install express
npm install jade

簡單介紹本篇使用的api

1 為了使用jade，先要設置express默認的模板引擎，用法如下：

app.set('view engine', 'jade');//設置默認的模板引擎

2 如果要進行樣式的定義，就要創建靜態文件目錄，該目錄中的內容，可以直接在瀏覽器中獲取到：

app.use(express.static(路徑));

比如路徑為public，那么我們在訪問localhost:3000/pubic/xxxx就可以得到相應的文件。

3 設置視圖的對應目錄

app.set('views',xxxx);

4 向特定路徑的視圖返回數據

res.render('視圖的路徑', { 返回的數據名稱：返回的數據內容});

代碼預覽

創建index.js文件：

var express = require('express');//引入express模塊
var app = express();//創建應用

//定義public路徑
var pub = __dirname + '/public';
app.use(express.static(pub));//設置靜態目錄為pubic
app.set('views', __dirname + '/views');//設置views路徑映射到views文件夾

app.set('view engine', 'jade');//設置默認的模板引擎

function User(name, email) {
  this.name = name;
  this.email = email;
}

var users = [
    new User('tj', '[e-mail]'), 
    new User('ciaran', '[e-mail]'),
    new User('aaron', '[e-mail]')
];

app.get('/', function(req, res){
  res.render('users/test', { users: users });
});

app.use(function(err, req, res, next) {
  res.send(err.stack);
});

app.listen(3000);
console.log('Express started on port 3000');

這段代碼首先創建了express的應用實例，然后設置相關的靜態目錄、視圖目錄、模板引擎等等。

然后創建了幾個user對象，返回給特定的視圖。

創建模板

創建模板index.jade,注意創建的模版中，只能使用空格來進行格式化。不能同時使用制表符和空格。

doctype html
html
  head
  title Jade Example
  link(rel="stylesheet", href="/stylesheets/style.css")

  body
    h1 Users
    #users
    for user in users
      h2= user.name
      .email= user.email

語法參考其他的Jade語法說明即可。

添加樣式文件

在靜態目錄中，添加樣式文件style.css：

body {
  padding: 50px 80px;
  font: 14px "Helvetica Nueue", "Lucida Grande", Arial, sans-serif;
}
.email{
    color: blue;
}

文件目錄

根目錄myqq
 \------node_modules
    |    \-------express
    |    \-------jade
    |
    \------public
    |    \------stylesheets
    |         \-------style.css
 \------views
    |    \------test
    |          \------index.jade
    index.js

執行node index既可運行樣例。