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一样对网页进行操作。

  • 相关阅读:
    java如何操作注册表(Preferences类)(在windows的注册表中保存、读取)
    转-正则表达式
    js数字格式化千分位格式
    es6严格模式需要注意的地方
    html5手势原理知识
    js事件总结
    js键盘相关知识总结
    html5 拖放
    js学习日记-隐式转换相关的坑及知识
    移动端各种分辨率匹配
  • 原文地址:https://www.cnblogs.com/shangguanjinwen/p/4677570.html
Copyright © 2011-2022 走看看