zoukankan      html  css  js  c++  java
  • 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模板进行渲染的两种方式,记录一下希望对你有用!

  • 相关阅读:
    python——简单的爬虫
    Python——文件读取与写入
    python—列表集合的交集并集差集
    python—turtle佩奇
    python——append用法
    python——列表平均数
    python回文数的判断
    python输入两个数字比较大小
    python———input()函数
    HTML---3
  • 原文地址:https://www.cnblogs.com/Jaryer/p/13602744.html
Copyright © 2011-2022 走看看