課程目標
- 使用 ejs 模板並讀取變數
課程內容
這一課來學習如何讀取變數之後，放進 ejs 模板呈現！
先來安裝之前用過的 readline-sync 套件
npm install readline-sync
替這課建立一個資料夾，然後建立 index.js hello.ejs users.json 這幾個檔案
此時資料夾會長類似這樣
repo
├── package.json
├── package-lock.json
├── node_modules
├── lesson1
│ └── index.js
├── lesson2
│ ├── hello.ejs
│ └── index.js
└── lesson3
├── users.json
├── hello.ejs
└── index.js
在 users.json 放入以下內容
[
{
"name": "小明",
},
{
"name": "小華",
},
{
"name": "小王",
}
]
在 hello.ejs 放入以下內容
<div>
<% for(var i = 0; i < users.length; i++) { %>
<p>
<%= users[i].name %>同學，你好！
</p>
<% } %>
</div>
在 index.js 放入以下內容
const express = require('express');
const app = express();
const engine = require('ejs-locals');
const fs = require('fs');
app.engine('ejs', engine);
app.set('views', './lesson3');
app.set('view engine', 'ejs');
app.get('/', function(req, res){
const data = fs.readFileSync('./lesson3/users.json');
const users = JSON.parse(data);
res.render('hello', { users: users });
});
app.listen(3000);
然後去終端機輸入
node lesson3/index.js
接著打開瀏覽器，在網址輸入
http://localhost:3000/
你會看到很多則訊息，分別跟多位同學打招呼！
這段程式不用我多加說明了吧！檔案讀取也是之前教過的內容！
這邊唯一多學的東西，就是 ejs 關於 for 迴圈的語法，反正就是 <% 跟 %> 之類的東西包起來而已
ejs 還有支援很多豐富的語法＆功能，有興趣的話，自行研究一下吧！
課後作業
這次要練習匯入資料到 ejs 模板
請新建立 hw3 資料夾，採用以下結構
/repo
/hw3
/index.js
/homepage.ejs
/posts.json
請修改 homepage.ejs 內容，將文章內容移出來，放在 posts.json 裡面
[
{
"title": "第一篇日記",
"content": "今天天氣很好，夏天太陽很大，讓我心情很好"
},
{
"title": "第二篇日記",
"content": "早起出門運動，回家沖個澡，整天心情很好"
},
{
"title": "第三篇日記",
"content": "下大雨一整天，整天在家追劇，滿舒服的"
}
]
這樣 homepage.ejs 內就不會只是 html 了，你會練習到 ejs 獨有的模板語法！
完成以上任務，你就完成這次的課程目標了！
請更新你的 github 專案內容，此時應該變成這樣
/repo
/hw1
/index.js
/hw2
/index.js
/homepage.ejs
/hw3
/index.js
/homepage.ejs
/posts.json
依此類推，之後就這樣交作業！
歡迎將作業成果，在下方留言，跟大家分享，讓大家給你一些回饋！
可以將每課學到的觀念、關鍵字，丟到網路上去搜尋、研究一下！
發問請在「討論專區」為主，或者分享學習筆記、寫學習心得！
貼文都會出現在個人檔案頁面，成為學習歷程、部落格紀錄！
未來面試時，分享給面試官看，會讓人知道你的積極程度！
課程內容
作業