環境: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一樣對網頁進行操作。

