Node.js模板引擎學習----ejs

時間 2019-12-07

標籤 node.js node 模板引擎學習 ejs 欄目 Node.js 简体版

原文原文鏈接

環境：windows+node.js+express html

1、安裝ejs node

打開cmd窗口，輸入npm install ejs -g,等待下載安裝完成。 jquery

2、使用 express

調用過程當中使用路由機制和模板，路由請求地址爲根目錄，模板文件爲home.ejs【注：模板引擎文件爲.ejs文件】 npm

一、新建js文件爲index.js windows

寫入以下代碼：瀏覽器

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);

二、新建home.js,目錄爲/views/home.ejs，輸入以下內容：app

<!DOCTYPEhtml>

<html>

<headlang="en">

<metacharset="UTF-8">

<title></title>

</head>

<body>

<h2>Hello</h2>

<!--<%%>:ejs的語法-->

<p>Hi<%=name%></p>

</body>

</html>

三、在瀏覽器中輸入localhost:3000回車 ui

結果以下 htm

四、在網頁裏面引入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同樣對網頁進行操做。