Jaryer

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模板进行渲染的两种方式,记录一下希望对你有用!

分类:

技术点:

相关文章:

  • 2022-01-17
  • 2020-12-22
  • 2021-12-02
  • 2021-04-01
  • 2021-11-05
  • 2021-11-21
  • 2021-10-19
  • 2021-12-20
猜你喜欢
  • 2021-11-27
  • 2022-01-13
  • 2020-05-11
  • 2021-08-17
  • 2020-03-19
  • 2018-01-16
相关资源
相似解决方案