Express模板引擎定制—hbs
2019-08-14 本文已影响0人
一点金光
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 布局模板
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
<!—实现样式放在头部-->
{{#each cssList}}
<link rel="stylesheet" href="{{this}}" media="screen" title="no title" charset="utf-8">
{{/each}}
</head>
<body>
{{{body}}}
<!—实现脚本放在尾部-->
{{#each jsList}}
<script src="{{this}}" charset="utf-8"></script>
{{/each}}
</body>
</html>
//页面组件
//views/index.hbs 主页模板
{{>navigator}}
{{>table}}
{{>table}}
// views/errs.hbs 错页模板
<h1>{{message}}</h1>
<h2>{{error.status}}</h2>
<pre>{{error.stack}}</pre>
//控件组件
// views/components/table.hbs 表格模板
{{css '/stylesheets/style.css'}}
{{css '/stylesheets/components/table.css'}}
{{js '/jquery/dist/jquery.min.js'}}
{{js '/javascripts/components/table.js'}}
<table class="border" id="table">
<tr>
<td>z</td>
<td>d</td>
<td>l</td>
</tr>
</table>
// views/components/navigator.hbs 导航模板
{{css '/stylesheets/style.css'}}
{{css '/stylesheets/components/navigator.css'}}
{{js '/jquery/dist/jquery.min.js'}}
{{js '/javascripts/components/navigator.js'}}
<ul class="titles border" id="navigator">
<li class="title">防</li>
<li class="title">诊</li>
<li class="title">治</li>
</ul>
书写路由：
//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
�
