zoukankan      html  css  js  c++  java
  • Node.js模板引擎学习----ejs

    环境:windows+node.js+express

    一、安装ejs

    打开cmd窗口,输入npm install ejs -g,等待下载安装完成。

    二、使用

    调用过程中使用路由机制和模板,路由请求地址为根目录,模板文件为home.ejs【注:模板引擎文件为.ejs文件】

    1、新建js文件为index.js

    写入如下代码:

    varexpress=require("express");
    
    varapp=express();
    
    //设置渲染引擎
    
    app.set("viewengine",'ejs');
    
    //设置模板目录为当前index.js目录同级views目录下的模板
    
    app.set("views",__dirname+"/views");
    
    //设置使用当前目录
    
    app.use(express.static(__dirname));
    
    app.get("/",function(req,res){
    
    //渲染页面并传值
    
    res.render('home.ejs',{name:"kid"});
    
    });
    
    //监听3000端口
    
    app.listen(3000);
    
    

    2、新建home.js,目录为/views/home.ejs,输入如下内容:

    <!DOCTYPEhtml>
    
    <html>
    
    <headlang="en">
    
    <metacharset="UTF-8">
    
    <title></title>
    
    </head>
    
    <body>
    
    <h2>Hello</h2>
    
    <!--<%%>:ejs的语法-->
    
    <p>Hi<%=name%></p>
    
    </body>
    
    </html>
    
    

    3、在浏览器中输入localhost:3000回车

    结果如下

    clip_image001

    4、在网页里面引入ejs,渲染

    修改home.js

    <!DOCTYPEhtml>
    
    <html>
    
    <headlang="en">
    
    <metacharset="UTF-8">
    
    <title></title>
    
    </head>
    
    <body>
    
    <h2>Hello</h2>
    
    <!--<%%>:ejs的语法-->
    
    <p>Hi<%=name%></p>
    
    <divid="new-temp"></div>
    
    </body>
    
    <!--========================================-->
    
    <scriptsrc="../ejs.min.js"></script>
    
    <script>
    
    vartmp="<p>Newtemplate</p>";
    
    varnewTemplate=document.getElementById("new-temp");
    
    newTemplate.innerHTML=ejs.render(tmp);
    
    </script>
    
    <!--========================================-->
    
    </html>
    
    

    总结:由此可以扩展到动态创建或者获取res.render()方法的locals参数,然后渲染相同的页面,第4步,就像引入jquery一样对网页进行操作。

  • 相关阅读:
    javascript中的几点说明
    repeater 绑定数组
    SQL语句之按in排序
    固定VS2005端口号
    关于asp.net中动态获取LinkButton的Text值的问题
    ASP.NET 2.0中直接得到本页面生成的HTML代码
    实现数据库的备份与还原的功能
    使用ASP.NET 2.0提供的WebResource管理内嵌资源(c#)
    [IIS]由于无法创建应用程序域,因此未能执行请求解决方案汇总
    VS2005中引用Microsoft Office COM组件
  • 原文地址:https://www.cnblogs.com/shangguanjinwen/p/4677570.html
Copyright © 2011-2022 走看看