express开发（二）引入handlebars

下面我们将在项目中引入handlebars，一种抽象程度较低的模板框架。Handlebars不会视图对HTML进行抽象：你编写的是带特殊标签的HTML，Handlebars可以借此插入内容。相比于jade（现在已经改名为pug），虽然jade足够简洁，语法精简，但是对HTML进行了相当程度的抽象，必须对HTML有很深的理解才能良好的驾驭，而且我也不喜欢HTML被抽象化处理。所以，让我们愉快的用handlebars吧。

在express使用handlebars推荐使用express-handlebars，直接运行命令

1	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是局部模块，可以使用

1	{{>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中输入

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>demo</title>
<link rel="stylesheet" type="text/css" href="/stylesheets/main.min.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/font-awesome.min.css">
<script src="/javascripts/require.js" defer async="true" data-main="/javascripts/main"></script>
</head>
<body>
{{> header}}
<main>
{{> pages/title}}
{{{body}}}
</main>
{{> footer}}
</body>
</html>

1	{{{body}}}

就是路由中渲染的hbs，其他部分都是固定的模板，这里是可变的，可以是home.hbs，error.hbs。在路由中设置即可，如：

1
2
3

router.get('/', function(req, res, next){
res.render('home', {});
});

我们就这设置了，’/‘这个路由渲染的是home.hbs但是用的模板是layout.hbs这个模板。

partials中的几个文件分别输入

footer.hbs中输入

1
2
3

<footer>
this is footer
</footer>

header.hbs中

1	<header>this is header</header>

pages中title输入

1	<div>thi is title</div>

之后在home.hbs中输入：

1	<div>thi is home</div>

之后设置路由：

1
2
3

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
）