Express入門 模板引擎hbs 服務端渲染

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
運行結構如圖:

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章