Node.js web template engine - ejs

Node.js web template engine – ejs

expressNode.js 建立 Web 伺服器通常都會使用到的套件,預設直接使jade 為 template engine ,可是依照自己的習慣還是無法接受類似 mastach 的方式,比較能夠接受 Html 混搭程式的架構,尋找一段時間之後,發現 ejs 是一個不錯的選擇。

模組說明

ejs 是一種 html template engine ,用法上比較貼近 html 原生使用方式,例如開發 asp 經常會使用到 <%= variable %> 的方式,直接就可以在 ejs 裡面使用。
以下使用的範例是直接在 Node.js express 裡面進行 html 頁面轉換,但是 ejs 是一個可以直接使用於前端頁面的套件庫,詳細的使用方式可以參考,ejs 相關範例

使用方式

首先使用 express 指令,產生新專案

express application --template ejs<br></br>

接著就會看到相關資訊如下

create : application<br></br>create : application/package.json<br></br>create : application/app.js<br></br>create : application/public<br></br>create : application/public/javascripts<br></br>create : application/public/images<br></br>create : application/public/stylesheets<br></br>create : application/public/stylesheets/style.css<br></br>create : application/routes<br></br>create : application/routes/index.js<br></br>create : application/views<br></br>create : application/views/layout.ejs<br></br>create : application/views/index.ejs<br></br><br></br>dont forget to install dependencies:<br></br>$ cd application && npm install<br></br>

接著進入 application 資料夾,安裝相依模組

cd application<br></br>npm install .<br></br>

顯示結果如下,

[email protected] ./node_modules/ejs<br></br>[email protected] ./node_modules/express<br></br>├── [email protected]<br></br>├── [email protected]<br></br>├── [email protected]<br></br>└── [email protected]<br></br>

讓我們直接執行程式,

node app.js<br></br>

進入 port 3000,就可以看到顯示結果。

後記

在 express 中改用 ejs 作為 view template engine 之後,對於我來說是可以直接依照 html & php 開發習慣直接上手,算是無痛入門,不過要注意的是,所有在 view 當中的檔案,副檔名都會是 xxx.ejs ,這一點是要比較注意的。
當然如果前端人員,需要選擇一套獨立的 html template,前面有提到 ejs 也可以是其中一個選擇。

工商服務

請多多支持,Node.js Taiwan 社群,台灣的 Node /js 愛好者一起動起來,定期的聚會歡迎各位一同參與。

CaesarChi

Web developer, focus on website fullstack, special JavaScript, and love sharing developing experience and communicate with developers. http://about.me/clonn