課程目標
- 使用 ejs 模板渲染出 html
課程內容
上一課我們成功讓後端回應 html 給瀏覽器了，很棒
可是每次都讓 res.send 回應一大串 html，就太奇怪了
至少要讓 html 內容放在單獨一個檔案，才有寫網頁的感覺吧！
這課來學習如何做到這點吧！
來安裝一款新套件，請在終端機輸入
npm install ejs-locals
替這課建立一個資料夾，然後建立一個 index.js 檔案與一個 hello.ejs 檔案
此時資料夾會長類似這樣
repo
├── package.json
├── package-lock.json
├── node_modules
├── lesson1
│ └── index.js
└── lesson2
├── hello.ejs
└── index.js
在 hello.ejs 放入以下內容
<h1>恭喜您，成功囉！</h1>
<h2>您真的做得很棒！</h2>
<p>繼續學習，不斷進步吧！</p>
然後在 index.js 放入以下內容
const express = require('express');
const app = express();
const engine = require('ejs-locals');
app.engine('ejs', engine);
app.set('views', './lesson2');
app.set('view engine', 'ejs');
app.get('/', function(req, res){
res.render('hello')
});
app.listen(3000);
然後去終端機輸入
node lesson2/index.js
接著打開瀏覽器，在網址輸入
http://localhost:3000/
你會看到一段打招呼訊息！
ejs 是 javascript 社群常用的一款「模板引擎」套件
我們不是直接安裝 ejs 套件，而是安裝 ejs-locals 套件，這是一款把 ejs 整合進 express 的方便套件！
在載入 ejs-locals 之後，接著用 app.engine 告訴 express 我們要設定模板引擎
然後用 app.set 告訴 express 要去哪邊找到 模板檔案
最後，處理 http 請求的地方，把原本的 res.send 改成 res.render 並放進模板檔案名稱，就可以囉！
多看幾眼這段程式，這就是後端開發，用 node、express 來讀取一段 html，並且回應給瀏覽器的方式，不難吧！
課後作業
這次要練習使用 ejs 模板
請新建立 hw2 資料夾，採用以下結構
/repo
/hw2
/index.js
/homepage.ejs
並開發一個 app，打開首頁 http://localhost:3000/
會顯示 homepage.ejs 的內容作為部落格首頁，homepage.ejs 的內容先放這些 html 就好：
<h1>我的個人日記 APP</h1>
<div>
<h2>第一篇日記</h2>
<div>今天天氣很好，夏天太陽很大，讓我心情很好</div>
</div>
<div>
<h2>第二篇日記</h2>
<div>早起出門運動，回家沖個澡，整天心情很好</div>
</div>
<div>
<h2>第三篇日記</h2>
<div>下大雨一整天，整天在家追劇，滿舒服的</div>
</div>
完成以上任務，你就完成這次的課程目標了！
請更新你的 github 專案內容，此時應該變成這樣
/repo
/hw1
/index.js
/hw2
/index.js
/homepage.ejs
依此類推，之後就這樣交作業！
歡迎將作業成果，在下方留言，跟大家分享，讓大家給你一些回饋！
可以將每課學到的觀念、關鍵字，丟到網路上去搜尋、研究一下！
發問請在「討論專區」為主，或者分享學習筆記、寫學習心得！
貼文都會出現在個人檔案頁面，成為學習歷程、部落格紀錄！
未來面試時，分享給面試官看，會讓人知道你的積極程度！
作業 原來node的根目錄會跟著執行時目錄走