node渲染html模板的兩種方法


Nodejs在進行渲染前端文件的時候,可以使用ejs或者swig渲染引擎

下面是兩種方法來進行渲染html文件

方式一:使用ejs渲染引擎

后台JS文件

var express=require('express');
var ejs=require('ejs');

app=express();
//設置渲染文件的目錄
app.set('views','./views');
//設置html模板渲染引擎
app.engine('html',ejs.__express);
//設置渲染引擎為html
app.set('view engine','html');

//調用路由,進行頁面渲染
app.get('/',function(request,response){
    //調用渲染模板
    response.render('login',{
        //傳參
        title:'首頁', content:'Render template'
    });

});
app.listen(8005);
console.log('http://127.0.0.1:8005');

HTML模板文件

在使用ejs模板引擎傳輸參數,接受的時候參數包含在<%=%>里面.例如:<%=KeyName%>

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <!--<title>{{ title }}</title>-->
    <title><%=title%></title>
</head>
<body style="height: 100%; margin: 0">
<h1><%=content%></h1>
</body>
</html>

效果

方式2:使用swig進行渲染html模板

后台JS文件

var express=require('express');
var swig=require('swig');

app=express();
//設置渲染文件的目錄
app.set('views','./views');
//設置html模板渲染引擎
app.engine('html',swig.renderFile);
//設置渲染引擎為html
app.set('view engine','html');

app.listen(8005);

//調用路由,進行頁面渲染
app.get('/',function(request,response){
    //調用渲染模板
    response.render('login',{
        //傳參
        title:'首頁', content:'Render template'
    });

});
console.log('http://127.0.0.1:8005');

HTML模板文件

在使用swig模板引擎傳輸參數,接受的時候參數包含在{{}}里面.例如:{{KeyName}}

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>{{title}}</title>
</head>
<body style="height: 100%; margin: 0">
<h1>{{content}}</h1>
</body>
</html>

效果

總結

引擎設置

使用ejs渲染html模板的時候,html引擎設置為:

app.engine('html',ejs.__express);

使用ejs渲染html模板的時候,html引擎設置為:

app.engine('html',swig.renderFile);

接收參數

ejs引擎接收參數方式:  <%=KeyName%>

swig引擎接收參數方式:{{KeyName}}

以上就是nodejs對HTML模板進行渲染的兩種方式,記錄一下希望對你有用!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM