环境：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回车
结果如下
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一样对网页进行操作。
时间： 2024-10-22 05:12:40