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

  • 相关阅读:
    IE678下,select 诡异的样式
    跟着我一步一步的搭建一个基于springcloud的微服务实例
    关于Future踩过的坑
    Apache下的SocketClient的使用
    Jaxb处理泛型,转化成xml字符串
    Linux Centos虚拟机扩容
    docker 搭建zookeeper集群和kafka集群
    sysbench 数据库性能测试工具的使用
    docker 容器技术
    自己手写实现Dubbo
  • 原文地址:https://www.cnblogs.com/Jaryer/p/13602744.html
Copyright © 2020-2023  润新知