express开发(二)引入handlebars

express开发(二)引入handlebars

解决方案goocz2025-03-23 18:07:3333A+A-

下面我们将在项目中引入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)

点击这里复制本文地址 以上内容由goocz整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

果子教程网 © All Rights Reserved.  蜀ICP备2024111239号-5