美文网首页webpack+express
Express入门_模板引擎hbs(三)

Express入门_模板引擎hbs(三)

作者: _李雷 | 来源:发表于2017-02-21 14:49 被阅读3256次

    Express支持多种模板引擎,这里将采用Handlebars模板引擎的服务器端版本hbs模板引擎 。
    安装hbs

    npm install hbs --save-dev
    

    安装hbs模板引擎后改写app.js

    //index.js
    var express=require('express');
    var app=express();
    
    //加载hbs模块
    var hbs = require('hbs');
    
    //指定模板后缀名为html
    app.set('view engine','html');
    
    //运行hbs模块
    app.engine('html',hbs.__express);
    
    var routes=require('./routes')(app);
    
    app.listen(8080);
    

    新建views子文件,放入视图文件三个:index.html customer.html admin.html

    <!--index.html-->
    <p>这里是index</p>
    
    <!--customer.html-->
    <p>这里是customer</p>
    
    <!--admin.html-->
    <p>这里是admin</p>
    

    接下来修改路由文件

    //routes/index.js
    module.exports = function(app) {
        app.get('/',function(req,res){
            res.render('index');
        });
        app.get('/customer',function(req,res){
            res.render('customer');
        });
        app.get('/admin',function(req,res){
            res.render('admin');
        });
    }
    

    render方法 对网页模板进行渲染,render方法的参数就是文件名,默认放在views文件夹下,不需要html后缀名 ,已经在index.js说明为html
    运行结构如图:

    运行结果.png

    相关文章

      网友评论

        本文标题:Express入门_模板引擎hbs(三)

        本文链接:https://www.haomeiwen.com/subject/gvhuwttx.html