2025 年 9 月 3 日 – Bake

網頁框架 Web frameworks

Express 是一個相當熱門且許多人使用的主流網站框架，許多網站框架都是由Express 衍生而來，我們可以說，幾乎整個Node.js在後端應用程式的發展，都與Expree息息相關。

npm install express

Node.js的主流網站框架是Express，發展至今，已經到了極致，然而，很多機制仍然被人詬病，或認為存在改進的空間，因此出現了Koa這個新的網站框架，目標是打造下一代網站框架。
http://koajs.com

Jade 是目前廣為使用的模板引擎，最大的特性是使用縮排的方式去描述和表示HTML標籤，許多人喜愛Jade的原因，就是因為其模板原始碼看起來簡潔有力。

<html>
      <head>
            <title> Hello Jade </title>
      </head>
      <body>
            <h1> Hello Jade </h1>
      </body>
</html>

以Jade語言重新描述此頁面

html
   head
       title  Hello Jade
   body
       h1 Hello Jade

Jade 基本語法

標籤名稱(屬性1, 屬性2, ….) 內容

a標籤的HTML表示法

<a href="http://www.mandice.com/">Hello</a>

a標籤的Jade表示法

a (href='http://www.mandice.com/') Hello

id和class屬性

div(id='myid', class='my_div')

基本邏輯表示

使用if做判斷：

- if (msgl == 'Hello Template')
     div Hello Template
- else
     div Nothing

使用 For Each 方法：

- for (var i=0; i<=10; i++)
      div #{i}

EJS則是一套風格別於Jade的模板引擎，EJS全名 Embedded JavaScript，顧名思義，它是屬於內嵌式的模板引擎，可以直接將邏輯和內容直接嵌入HTML頁面。所以，撰寫EJS模板比較接近一般的網頁開發，與Jade相比之下，再也不用去學習新的排版語法，這也是為什麼開發者鍾情於EJS

<html>
      <head>
            <title> Hello EJS </title>
      </head>
      <body>
            <h1> Hello EJS </h1>
      </body>
</html>

<html>
      <head>
            <title> <% =title %> </title>
      </head>
      <body>
            <h1> Hello EJS </h1>
      </body>
</html>

EJS基本語法

EJS使用<% 和 %>所包夾而成的特殊標籤，表示插入動態內容之前的範例中，就是使用<% =title %>來把外部帶入的title變數內容。

在EJS模板中使用if 判斷

<% if (title == 'Hi EJS') { %>
    <h1>YES</h1>
<% } else { %>
    <h1>NO</h1>
<% } %>

使用for-loop迴圈，將一個陣列印一一出來

<ul>
<% for(var i=0; i<list.length; i++) {%>
   <li><%=list[i] %></li>
<% } %>
</ul>