express开发(二)引入handlebars
下面我们将在项目中引入handlebars，一种抽象程度较低的模板框架。Handlebars不会视图对HTML进行抽象：你编写的是带特殊标签的HTML，Handlebars可以借此插入内容。相比于jade（现在已经改名为pug），虽然jade足够简洁，语法精简，但是对HTML进行了相当程度的抽象，必须对HTML有很深的理解才能良好的驾驭，而且我也不喜欢HTML被抽象化处理。所以，让我们愉快的用handlebars吧。
在express使用handlebars推荐使用express-handlebars，直接运行命令
npm install -S express-handlebars
之后在我们的demo.js（也就是上一章中的mydemo.js，我将他改名为demo.js方便些，通常意义下的app.js）中,引入如下代码。
var exphbs = require('express-handlebars');
var hbs = exphbs.create({
layoutsDir: path.join(__dirname, 'views/layouts/'),
defaultLayout: 'layout',
extname: '.hbs',
partialsDir: path.join(__dirname, "views/partials/"),
});
// Register `hbs.engine` with the Express app.
app.engine('hbs', hbs.engine);
app.set('view engine', 'hbs');
写好后我们在views中创建几个文档，如下
这里我们使用实例方法引入handlebars，与直接使用exhbs引入是一样的效果。layoutDir是存放模板的目录；extname是我们设置的文件后缀，注意如果要设置后缀为html,那么app.engine('hbs',hbs.engine)要改为app.engine('html',hbs.engine),同理app.set中也要做相应修改。defaultLayout是默认的模板名，这里我设置的是layout；partials是局部模块，可以使用
{{>header}}
语法引入到模板layout中和页面里。
关于express-handlebars的更多介绍可以到项目主页中看
https://github.com/ericf/express-handlebars
完整的demo.js代码如下:
'use strict';
var express = require('express');
var path = require('path');
var app = express();
var mainRoute = require('./routes/main');
var exphbs = require('express-handlebars');
var hbs = exphbs.create({
layoutsDir: path.join(__dirname, 'views/layouts/'),
defaultLayout: 'layout',
extname: '.hbs',
partialsDir: path.join(__dirname, "views/partials/"),
});
// Register `hbs.engine` with the Express app.
app.engine('hbs', hbs.engine);
app.set('view engine', 'hbs');
app.use('/', mainRoute);
//定制404页面
app.use(function(req, res){
res.type('text/plain');
res.status('404');
res.send('404 - Not Found');
});
app.use(function(req,res){
console.err(err.stack);
res.type('text/plain');
res.status('500');
res.send('500 - Server Error');
});
app.set('port', process.env.PORT || 3000);
app.listen(app.get('port'), function(){
console.log('Express is started on http://localhost:' + app.get('port') + ';press Ctrl + C to terminate.');
});
（PS:我们引入了node中path模块来管理我们的路径，关于path大家可以看这篇文章：
http://www.jianshu.com/p/fe41ee02efc8）
这样就将handlebars引入了我们的项目。
简单的创几个hbs文件来运行验证我们做的对不对。在lauout.hbs中输入
demo <script src="/javascripts/require.js" defer async="true" data-main="/javascripts/main"></script>
{{> header}}
{{> pages/title}}
{{{body}}}
{{> footer}}
{{{ body }}}就是路由中渲染的hbs，其他部分都是固定的模板，这里是可变的，可以是home.hbs，error.hbs。在路由中设置即可，如：
router.get('/', function(req, res, next){
res.render('home', {});
});
我们就这设置了，”/“这个路由渲染的是home.hbs但是用的模板是layout.hbs这个模板。
partials中的几个文件分别输入
footer.hbs中输入
this is footer
header.hbs中
this is header
pages中title输入
thi is title
之后在home.hbs中输入：
thi is home
之后设置路由：
router.get('/', function(req, res, next){
res.render('home', {});
});
运行node demo.js或者npm start
(PS:我在package.json中设置了"start":"supervisor demo.js",supervisor是一个node的进程守护模块，我们可以用npm install -g supervisor来全局安装他，当然也可以只在本项目中引入，也可以使用别的进程守护模块想forever等，这里我们使用supervisor。)
就可以看到localhost:3000中显示了
到这里我们已经在项目里引入了handlebars，但是还有好多handlebars的特性没介绍（helper等），如果大家想深入了解handlebars，推荐去官网上访问。
（我的项目上传到github上，并且打了标签，课程一就是class01，二几十class02，欢迎访问
https://github.com/ZZR-china/node_express）