王者歸來:Node.js 學習課程 3之6 – EJS 模板

Node.js 初階學習

目錄:

template 選擇

  • Jade 改名為 pug
    https://pugjs.org
  • ejs
    http://ejs.co
  • handlebars
    http://handlebarsjs.com

為何選擇 ejs?

寫過 asp 或 php 的人比較習慣他的語法
也有很多支持者
handlebars: 很好用,但太少中文書籍

jade:讓美工不太容易一起合作,需一點學習,但最多人使用(工程師)

模板概念:ejs 檔案


template 就是模板 .ejs 檔案

MVC 概念

Template 引擎 是 MVC 中的 V=view 
*MVC 是一定要懂的概念!

node.js 接收到使用者的指令後,去 Model 取得資料
然後將資料交給 view 去做顯示(render = 渲染)的動作~!

EJS 使用方法@node.js

備註: 會有其他的 framework 使用 ejs, 或是瀏覽器中直接使用 ejs(有安全性考量),請查詢關鍵字 “node.js ejs”

 

插播訊息:render 的重要性

今天即使使用其他引擎概念也都有異曲同工之妙
其他 framework 如 React.js, React Native

其實 html tag 的道理也是類似。。。。

EJS 使用方法:專案實作

  • 資料結構
    /index.js
    views/pages/superheroes.ejs  <— views 是 ejs 預設的

在你的 Command line 打入以下指令來建構專案

index.js

開始 coding 吧

製作你的 ejs 模板

EJS 標籤

  • <% 程式寫在這裡面%>
  • <%=variable%>  顯示出單一變數的內容
  • <%- include filename.ejs %> 直接顯示出內容,不做 URL encode 的處理

試試看你們剛打的程式~

cd ..
node index

 

More?

但是我們需要更豐富的頁面~!

 

EJS 專案實作 (續)

檔案夾架構

– views

—– partials

———- footer.ejs

———- head.ejs

———- header.ejs

—– pages

———- index.ejs

———- superheroes.ejs

– package.json

– app.js

 

增加一個 partial

nano index.ejs

回到專案根目錄 cd .. cd ..
nano index.js

改成 => res.render(‘pages/index’, my_super_heroes );

看看結果,還太陽春, 我們繼續

 

回到專案
cd views/pages/
nano head.ejs

增加一個 header partial

nano header.ejs

nano footer.ejs

結果頁面

Model 內容有 html

到 index.js 把 Batman 改為 <b>Batman</b>

如果到 superheroes.ejs 把 <%=superheroes[i] %> 改為
<%- superheroes[i] %>

用<%- 會讓 html 內容直接帶出所以會有效果出來
“un-escaping the value/decode”

e.g. <b>
<%=

“escaping the value/encode”

e.g. %3Cb%3E

 

輕鬆一下

如轉載請標明來源!

One thought on “王者歸來:Node.js 學習課程 3之6 – EJS 模板”

Leave a Reply

Your email address will not be published. Required fields are marked *