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

原文地址:https://www.cnblogs.com/shangguanjinwen/p/4677570.html