Express模板引擎定制—hbs

Express模板引擎定制—hbs

（注意hbs 不是handlebars）

添加依赖：

//package.json
  "dependencies": {
  "body-parser": "~1.13.2",
  "cookie-parser": "~1.3.5",
  "debug": "~2.2.0",
  "express": "~4.13.1",
  "hbs": "~3.1.0",
  "less-middleware": "1.0.x",
  "morgan": "~1.6.1",
  "serve-favicon": "~2.3.0"
}
npm install

建立引擎：

 下面是一个简单渲染.hbs模板文件的引擎。
//app.js
var express = require('express');
var app = express();
var hbs = require('hbs');

//绑定模板路径
app.set('views', path.join(__dirname, 'views'));

//绑定引擎名称?
app.set('view engine', 'hbs');

书写模板：

//layouts.hbs 布局模板


 
 
 
 {{#each cssList}}
 
 {{/each}}
 
 
{{{body}}}


 {{#each jsList}}
 
 {{/each}}
 


//页面组件
//views/index.hbs 主页模板
{{>navigator}}
{{>table}}
{{>table}}

// views/errs.hbs 错页模板
{{message}}
{{error.status}}
{{error.stack}}

//控件组件
// views/components/table.hbs 表格模板
{{css '/stylesheets/style.css'}}
{{css '/stylesheets/components/table.css'}}
{{js '/jquery/dist/jquery.min.js'}}
{{js '/javascripts/components/table.js'}}

 

 
z
 
d
 
l
 


// views/components/navigator.hbs 导航模板
{{css '/stylesheets/style.css'}}
{{css '/stylesheets/components/navigator.css'}}
{{js '/jquery/dist/jquery.min.js'}}
{{js '/javascripts/components/navigator.js'}}

 
防
 
诊
 
治

书写路由：

//app.js
//app.listen(8386, '127.0.0.1');//express默认的为3000
var routes = require('./routes/index');
var users = require('./routes/users');

// 门户页
app.use('/', routes);

// 用户页
app.use('/users', users);

// 错页

// 开发环境输出err
if (app.get('env') === 'development') {

 app.use(function(err, req, res, next) {
 res.status(err.status || 500);
 res.render('error', {
   message: err.message,
 error: err
 });
 });
}

//产品环境
app.use(function(err, req, res, next) {
 res.status(err.status || 500);
  res.render('error', {
  message: err.message,
 error: {}
 });
});

module.exports = app;

// routes/index.js
var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
 res.render('index', { title: 'zwys' });
});

module.exports = router;

// routes/users.js
var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
 res.send('respond with a resource');
});

module.exports = router;

书写扩展：

//实现样式资源收集，去重，统一放在head头部
hbs.registerHelper('css', function(str, option) {
  var cssList = this.cssList || [];
  if(cssList.indexOf(str)<0) {
    cssList.push(str);
  }

  this.cssList = cssList.concat();
});

//实现脚本资源收集，去重，统一放在body尾部
hbs.registerHelper('js', function(str, option) {
  var jsList = this.jsList || [];
  if(jsList.indexOf(str)<0) {
   jsList.push(str);
  }

  this.jsList = jsList.concat();
});

//分页目录
hbs.registerPartials(__dirname + '/views/components');

//站点图标

var favicon = require('serve-favicon');
app.use(favicon(**__dirname + '/public/favicon.ico'));**

//日志设置

var morgan =  require('morgan');
app.use(morgan('dev'));

//请求体析

var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

/*
app.post('/api/users', bodyParser.json(), function (req, res) {

 if (!req.body) return res.sendStatus(400)

 // create user in req.body

});
*/

//Cookie设置

var cookieParser = require('cookie-parser');
app.use(cookieParser());

查看效果：

http://127.0.0.1:3000/users
http://127.0.0.1:3000
http://127.0.0.1:3000/hi

�