express中ejs模板的基本使用
阿新 • • 發佈:2019-01-27
ejs模板學習起來非常簡單,類似html,標籤和jsp裡的java程式碼標籤差不多.
常用標籤:
<%%>
<%=%>
<%-%>
<%include %>
<%for(){}%>
<%if(){}%> if-else
簡單介紹
1.<%%>標籤裡可以寫js程式碼-定義變數
<% var data = 50;var hello = '<h3>hello world</h3>' %>
2.<%=%>和<%-%> 區別 前者不會編譯,後者會編譯
執行結果:<h2>data的值為 : <%=data%></h2> <%=hello%><br> <%-hello%>
3.<%include xxx%> 包含其他ejs檔案,一般用於包含頭部引用和頁面相同的部分
4.<%for%>一般用於後端查詢出一段陣列資料,前端展示
後端虛擬資料:
前端程式碼:req.titles = [ {name:'nodejs官網',url:'http://nodejs.org/'}, {name:'express官網',url:'http://www.expressjs.com.cn/'}, {name:'ejs官網',url:'http://www.embeddedjs.com/'}, {name:'javascript官網',url:'http://www.w3school.com.cn/js/'} ]; res.render('ejs',req);
<%for(var i=0; i < titles.length; i++){ var title = titles[i]; %>
<h3>標題 : <%=title.name%> ,地址 : <%=title.url%> </h3>
<%}%>
執行效果:
5.<%if%> 判斷 一般都和for結合使用,也可單獨使用
後端虛擬資料
req.numbers = [ parseInt(10*Math.random()), parseInt(10*Math.random()), parseInt(10*Math.random()), parseInt(10*Math.random()), parseInt(10*Math.random()), parseInt(10*Math.random()), parseInt(10*Math.random()), parseInt(10*Math.random()), parseInt(10*Math.random()), parseInt(10*Math.random()) ]; res.render('ejs',req);
前端程式碼:
<%for(var i=0; i < numbers.length; i++){ var number = numbers[i]; %>
<%if(number < 5){%>
<h3>獲取後端值小於5,值為 : <%=number%></h3>
<%}else{%>
<h3>獲取後端值大於4,值為 : <%=number%></h3>
<%}%>
<%}%>
執行結果: