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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM