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

  • 相关阅读:
    移动项目开发笔记(禁止一个按钮在服务器事件处理完成前连续点击按钮)
    网页设计div+css之id与class使用原则
    Windows Media Encode 9简介及SDK
    酒桌上的规矩,社会的潜规则
    实现最小宽度的几种方法及CSS Expression
    Css的zindex属性与Flash动画层叠需注意
    asp.net很有用的字符串操作类
    生活中的几种心态
    Silverlight监测工具:Silverlight Spy
    silverlight为控件注册属性
  • 原文地址:https://www.cnblogs.com/Jaryer/p/13602744.html
Copyright © 2011-2022 走看看