上一節(jié)-node.js學(xué)習(xí)（13）—nodejs模板引擎jade(2)
上節(jié)我們講解了jade的基本語(yǔ)法奢讨，本節(jié)我們開(kāi)始講解nodejs另一個(gè)模板引擎—— ejs
1.ejs
我們已經(jīng)知道jade屬于破壞式（侵入式）引擎，那ejs呢蟀伸？
特點(diǎn)：ejs是非破壞式（非侵入式）引擎，它不改變html的任何語(yǔ)法，可以讓我們直接在標(biāo)簽內(nèi)書(shū)寫(xiě)簡(jiǎn)單、直白的 JavaScript 代碼。
現(xiàn)在我們新建一個(gè)文件夾（這我叫views），專門(mén)放咱們的ejs文件。目錄結(jié)構(gòu)如下：
20190529102713.png
2. <%=變量或表達(dá)式%>
//1.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div><%=name%></div>
<div><%=a+b%></div>
</body>
</html>
//1.js
const ejs=require('ejs')
ejs.renderFile('./views/1.ejs',{name:'test',a:1,b:2},function(err,data){
if(err){
console.log(err);
}else{
console.log(data);
}
})
執(zhí)行1.js只磷，輸出的data結(jié)果為：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>test</div>
<div>3</div>
</body>
</html>
- ejs中輸出data是在回調(diào)函數(shù)中，不像jade是定義一個(gè)變量來(lái)接收的
- ejs中使用
<%=變量名%>輸出數(shù)據(jù)到模板钮追，如果輸出如果含有html標(biāo)簽，<>會(huì)被編碼（轉(zhuǎn)義）
3. <%js代碼%>
//1.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<% for(var i=0;i<arr.length;i++){ %> //不輸出代碼,在html中展示為空行
<div>用戶名：<%=arr[i].name%> 密碼：<%=arr[i].pass%></div>
<% } %> //不輸出代碼,在html中展示為空行
</body>
</html>
//1.js
const ejs=require('ejs')
ejs.renderFile('./views/1.ejs',{arr:[{name:'aa',pass:111}]},function(err,data){
if(err){
console.log(err);
}else{
console.log(data);
}
})
執(zhí)行1.js元媚，輸出的data結(jié)果為：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>用戶名：aa 密碼：111</div>
</body>
</html>
- ejs中使用
<%js代碼%>執(zhí)行js代碼， 不會(huì)輸出刊棕，被稱作無(wú)緩沖的代碼。 - 由于不輸出代碼待逞，會(huì)出現(xiàn)兩行空行，可以換成
<%_js代碼_%>识樱，會(huì)自動(dòng)刪除不輸出產(chǎn)生的空行
4. <%-變量或表達(dá)式%>
//1.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<%_var str='<div>test</div>'_%>
<%=str%>
<%-str%>
</body>
</html>
//1.js
const ejs=require('ejs')
ejs.renderFile('./views/1.ejs',{},function(err,data){
if(err){
console.log(err);
}else{
console.log(data);
}
})
執(zhí)行1.js，輸出的data結(jié)果為：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>test</div>
<div>test</div>
</body>
</html>
- 默認(rèn)使用
<%%>會(huì)將<>轉(zhuǎn)義輸出怜庸，可以使用<%-%>聲明不轉(zhuǎn)義輸出
5. include
之前在jade中我們講過(guò)include引入代碼，不增加http請(qǐng)求的方式割疾，在ejs中也有同樣的語(yǔ)法。
新建test.js宏榕，里面代碼為alert(1)
//1.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
<% include ../test.js %>
</script>
</head>
<body>
</body>
</html>
//1.js
const ejs=require('ejs')
ejs.renderFile('./views/1.ejs',{},function(err,data){
if(err){
console.log(err);
}else{
console.log(data);
}
})
執(zhí)行1.js拓诸，輸出的data結(jié)果為：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
alert(1)
</script>
</head>
<body>
</body>
</html>
- 同理css也可以這樣引入，從而不增加http請(qǐng)求恰响。
- 注意涌献，上面代碼
../test.js只能是個(gè)路徑胚宦，不能放置一個(gè)從數(shù)據(jù)傳過(guò)來(lái)的路徑變量(會(huì)將路徑變量名當(dāng)成實(shí)際路徑來(lái)解析燕垃，導(dǎo)致找不到該路徑)枢劝，比如
//1.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
<% include js_path %>
</script>
</head>
<body>
</body>
</html>
//1.js
const ejs=require('ejs')
ejs.renderFile('./views/1.ejs',{
js_path:'../test.js'
},function(err,data){
if(err){
console.log(err);
}else{
console.log(data);
}
})
上面代碼中卜壕，我們那路徑放到js_path中，ejs會(huì)把js_path當(dāng)成實(shí)際路徑轴捎，報(bào)錯(cuò)Error: Could not find the include file "js_path"
