Visual Studio Code (vscode)创建Node.js+Express+handlebars项目——handlebars页面模板

使用Express创建的页面渲染模板是jade的，我现在给大家介绍handlebarsjs, 为什么我不用默认而用这个呢？
原因你用了就知道了，jade很强大，但是它用的语法好多人都不熟悉，项目共同开发，出现了bug，样式问题就很难解决，当然还有一个原因是，我喜欢MVC的思维方式。这个handlebarsjs我用的很顺手.

第一步
安装,大家可以直接安装hbs,这
个是Express 和handlebarsjs的中间件，也就是他们相互交流的平台，语法和handlebarsjs一样.

npm install hbs

如果你不会可以看上一章节npm是什么意思。

第二步

我们来配置一下这个模板：
在app.js中

app.set('view engine', 'hbs');

你如果不想要模板是hbs结尾你可以改成

app.set('view engine', 'html');
app.engine('html', require('hbs').__express);

第三步
模板页，错误页，普通页面
1.这是模板页

2.这是使用模板页的普通页面

3.界面效果

进阶
刚接触就不用看了

var hbs = require('hbs');
var session = require('express-session');
var blocks = {};

hbs.registerHelper('extend', function(name, context) {
    var block = blocks[name];
    if (!block) {
        block = blocks[name] = [];
    }

    block.push(context.fn(this)); // for older versions of handlebars, use block.push(context(this));
});

hbs.registerHelper('block', function(name) {
    var val = (blocks[name] || []).join('\n');

    // clear the block
    blocks[name] = [];
    return val;
});

//判断是否相等
hbs.registerHelper('compare', function(left, operator, right, options) {
    if (arguments.length < 3) {
        throw new Error('Handlerbars Helper "compare" needs 2 parameters');
    }
    var operators = {
        '==':     function(l, r) {return l == r; },
        '===':    function(l, r) {return l === r; },
        '!=':     function(l, r) {return l != r; },
        '!==':    function(l, r) {return l !== r; },
        '<':      function(l, r) {return l < r; },
        '>':      function(l, r) {return l > r; },
        '<=':     function(l, r) {return l <= r; },
        '>=':     function(l, r) {return l >= r; },
        'typeof': function(l, r) {return typeof l == r; }
    };

    if (!operators[operator]) {
        throw new Error('Handlerbars Helper "compare" doesn\'t know the operator ' + operator);
    }

    var result = operators[operator](left, right);

    if (result) {
        return options.fn(this);
    } else {
        return options.inverse(this);
    }
});

//日期转换
hbs.registerHelper("prettifyDate", function(timestamp) {
    if(timestamp==''|| timestamp==undefined)
        return''
    else
        return (new Date(timestamp)).format("yyyy-MM-dd");
});

hbs.registerPartials(__dirname + '/views/partials');
hbs.registerHelper('objectToJson', function(context, options) {
    var rtn=JSON.stringify(context)
    return rtn;
});


// 对Date的扩展，将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
Date.prototype.format = function(fmt)
{
    var o = {
        "M+" : this.getMonth()+1,                 //月份
        "d+" : this.getDate(),                    //日
        "h+" : this.getHours(),                   //小时
        "m+" : this.getMinutes(),                 //分
        "s+" : this.getSeconds(),                 //秒
        "q+" : Math.floor((this.getMonth()+3)/3), //季度
        "S"  : this.getMilliseconds()             //毫秒
    };
    if(/(y+)/.test(fmt))
        fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
    for(var k in o)
        if(new RegExp("("+ k +")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
    return fmt;
}

//判断数组或对象是否为空
__isEmprtyObj =function(obj){
    var name;
    for ( name in obj ) {
        return false;
    }
    return true;
};

//IE版本不兼容
if (!Array.indexOf) {
      Array.prototype.indexOf = function (obj) {
              for (var i = 0; i < this.length; i++) {
                      if (this[i] == obj) {
                             return i;
                          }
              }
            return -1;
    }
 }


//千分位
hbs.registerHelper("thousandths", function(num) {
    if(num==''|| num==undefined)
        return''
    else
        return (num.toFixed(0) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,');
});

欢迎加群一起交流哦！
315552185