跳到主要內容

[分享] ejs 使用方法,a web template engine for Client / Node.js

Node.js web template engine - ejs

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

模組說明

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




使用方式

首先使用 express 指令,產生新專案
express application --template ejs
接著就會看到相關資訊如下
create : application
create : application/package.json
create : application/app.js
create : application/public
create : application/public/javascripts
create : application/public/images
create : application/public/stylesheets
create : application/public/stylesheets/style.css
create : application/routes
create : application/routes/index.js
create : application/views
create : application/views/layout.ejs
create : application/views/index.ejs

dont forget to install dependencies:
$ cd application && npm install
接著進入 application 資料夾,安裝相依模組
cd application
npm install .
顯示結果如下,
ejs@0.7.1 ./node_modules/ejs
express@2.5.8 ./node_modules/express
├── qs@0.4.2
├── mime@1.2.4
├── mkdirp@0.3.0
└── connect@1.8.7
讓我們直接執行程式,
node app.js
進入 port 3000,就可以看到顯示結果。

後記

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

工商服務

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

留言

張貼留言

這個網誌中的熱門文章

面試者如何挑戰大工程師時代來臨?

面試者如何挑戰大工程師時代來臨? 全世界都在倡導轉職成為工程師,似乎轉職成為工程師就成為職場的救贖,真的是如此嗎?讓老衲來杠給各位聽。 最近有位好久不見的小朋友,是 2000 年出生的小蔡,對於即將面臨到面對職場的挑戰開始關心起技術,他開始尋找比較適合自己的領域,同時也開始在思考到底為了接下來的就職小蔡該如何準備。 詢問我說是不是可以考慮軟體開發工程師這條路線 對於他的詢問,反而引起我的注意, 這讓我開始思考並映射於最近招募的經驗,軟體開發此領域是不是對於每個人都是可以擔任的職啀,這邊分享一些自己的看法希望對各位有所幫助。 全民工程師這件事情 在全球景氣低迷的狀況下,的確特別在這一年大家會很有感覺萬物齊漲,薪水不漲,薪資就是一直停滯不前。 很多時候,在不同的領域中,會發現整個薪資就算是擔任了管理職務主管你也會面臨到薪資的強大屏障在自己面前。 這個時候, 軟體工程師年薪百萬口號 似乎就成了一種救贖。 好像成為了工程師就可以達到年薪百萬,在家輕鬆工作,不用打卡也不用受到風吹雨淋,隨時想工作就可以工作,每個月又有固定薪水入帳,感受到類財富自由,人生的美好。 如果能夠爭取到跨國公司的職位,這份薪水有可能還可以上看每個月十多萬以上,甚至是往上也是極度有可能的事情,人生美好層次又再度提高了起來。 但這件事情是真的每個人都可以達到嗎? 還是這就是另外一種性存者偏差呢? 亦或者這些人其實是金字塔頂端的小眾? 每份履歷都像是同一種履歷 最近在最近幾年在面試工程師的時候特別會看到許多轉職者,一開始履歷裡面看到相關的作品一開始會覺得十分的驚艷, Wow, 現在的新手就可以做到如此精美的畫面,這些畫面是我當初用 Bootstrap 也做不出來的東西,許多的互動體驗好的一個不行,做出來的頁面配色和對齊也是極致。 但是隨著時間推移,多看了幾封履歷之後,就會發現在各大技術養成學院出來的學生履歷成果內容如出一轍,在面試的過程中也會詢問許多關於框架的底層概念,和比較技術觀念的時候,甚至是許多框架的核心概念,就很容易露出馬腳。 很多面試者會 一問三不知 ,透過許多引導,但殘酷的是連關鍵字是什麼都也無法推敲出來,更不用說在小組裡面到底怎麼樣合作,許多不同線上產品的比較,使用者流程,使用者後面的互動邏輯等,幾乎是風吹一片倒,只能

[分享] 腳踏車環島注意事項

很多人都期望自己能夠做點什麼,做些什麼,而退伍之後的第二個星期,就展開了環島之旅。 對很多人來說這不算什麼,甚至有人展開了走路、跑步、溜滑板、單輪車等方式環島一周,充分展現對台灣的愛與關懷。 這篇主要讓不知道怎麼準備環島的人,作一個完善的解說,首先隨身的東西要有: 證件現金類 : 身份證 健保卡 學生證 現金 提款卡 悠遊卡

[解釋] uuid 與 guid 的差異

uuid 與 guid 的差異 很多人都有使用過 MySQL 的 number auto increment, 可是實際使用之後就會發現,很快的數字會不夠使用,而且這個 id 是很容易被猜測出來連續性。 因此就開始進行了解,看到了 uuid 這個名詞,進而下去查詢發現 guid 的另外這個名詞,感覺上這兩個名詞似乎是有些什麼特殊關連。 這篇文章就小小記錄一下自己的查詢心得。