Express开发实例(2) —— Jade模板引擎

安装相关模块

在实验代码前，应该先安装express和jade：

npm install expressnpm 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));//设置静态目录为pubicapp.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 htmlhtml  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既可运行样例。