iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 11
0
自我挑戰組

通過Node.js了解後端運作原理!系列 第 11

Day11. MVC網站框架(四)使用EJS樣版動態生成網頁

介紹、設定

EJS的全名是「Embedded Javascript」,顧名思義就是內嵌式的樣板引擎,可以將邏輯與內容直接嵌入到HTML頁面上。比起Jade來說更接近一般的網站開發方式,也不用學新的排版語法,只要會基本的HTML就可以了!
首先我們先用npm安裝EJS

npm install EJS

並且建立專案資料夾,裡面分別放上一支app.js以及包含views的資料夾,並在views裡面建立名為index.ejs的樣板,在app.js裡面設定存放樣板的目錄路徑以及選用樣板引擎,跟昨天都一樣,只不過這邊我們用的樣板的副檔名是「ejs」。

使用

EJS使用由"<%"和"%>"所包夾而成標籤,在這標籤裡頭的內容都是動態產生的:

<html>
    <body>
        <h1><%= title %></h1>
        <p><%= description %></p>
    </body>
</html>

我們可以在app.js中傳遞參數給index.ejs

app.get('/', function(req, res){
   //使用index樣板,並可以帶入參數給樣板利用
  res.render('index',{title: 'EJS template',description: 'Website:http://www.embeddedjs.com/'});
});

執行後的結果

可以看到index頁面上印出了"EJS Template",由此可見<%= title %>裡面的title變數值是由res.render()所繼承而來。
這邊也可以使用一些程式邏輯像是if else判斷、for迴圈把內容印出來,後端語言也是使用類似的語法。

//title變數有資料則印出,無的話使用預設文字
<% if (title) {%>
    <h1><%= title %></h1>
<% } else { %>
    <h1>預設文字</h1>
<% } %>
//印出items陣列中所有數值
<ul>
<% for(var i=0;i<items.length;i++) {%>
    <li><%= items %></li>
<% } %>
</ul>

這邊還能看出一個語法規則,若是要帶出變數值的話,EJS語法要寫成<%= 變數名稱 %>要加上等號,否則會視為邏輯表示片段。


上一篇
Day10. MVC網站框架(三)使用Jade樣版動態生成網頁
下一篇
Day12. MVC網站框架(五)接收&處理客戶端資訊
系列文
通過Node.js了解後端運作原理!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言