課程目標
- 使用 node 與 express 處理 url 參數
課程內容
在瀏覽網站的時候，點擊不同頁面時，有時需要透過 url（網址）附帶一些參數
這課來學習如何用 node 處理 url 參數
替這課建立 lesson5 資料夾，內容跟 lesson4 一樣即可
在 index.js 加入這段程式碼
app.get('/view', (req, res) => {
const data = fs.readFileSync('./lesson5/users.json');
const users = JSON.parse(data);
const index = req.query.index;
const user = users[index];
res.send('<h1>' + user.name + '同學，你好！</h1>');
});
然後把 hello.ejs 的內容修改成
<div>
<% for(var i = 0; i < users.length; i++) { %>
<p>
<%= users[i].name %>同學，你好！
<a href="/view?index=<%= i %>">單獨打招呼頁面</a>
</p>
<% } %>
</div>
然後去終端機輸入
node lesson5/index.js
接著打開瀏覽器，在網址輸入
http://localhost:3000/
你會看到每段訊息旁邊，多了一個單獨連結，點下去，就會到單獨打招呼頁面！
操作看看吧！試試看「透過網址傳參數」的感覺！
在 http 協定中，網址中出現問號 ? 代表後面的部份是參數，參數的值應該可以單獨被抓出來
前面說過 (req, res) ，很多人會寫 (request, response)，兩者意思一樣，就是在 express 中代表請求＆回應的物件
這邊是我們第一次使用「請求」物件！我們在請求物件中，使用 req.query.index 找出名為 index 的參數
然後在首頁，透過迴圈，加上每個單獨頁面的連結，通通使用 index 作為參數傳遞
實務上，開發後端應用時，只要是 http get request，有時會透過網址本身代表參數，例如
/view/1
/view/2
/view/3
有時會透過 url parameter 傳遞參數，例如
/view?id=1
/view?id=2
/view?id=3
這是一個主觀偏好問題，其實都可以！效果也差不多
這兩種寫法，在各種程式語言中，處理起來有點不一樣
本課就以 url parameter 作為示範，先照做即可，別擔心！
課後作業
這次要開發「閱讀單篇文章」的功能
並且練習 url 參數的傳遞＆取得
請把 hw4 的內容複製到 hw5，然後增加 view.ejs 檔案
/repo
/hw5
/index.js
/homepage.ejs
/view.ejs
/posts.json
/public
/style.css
修改部落格首頁，替每篇文章加上 超連結，點擊之後會前往單篇文章的網址
舉例來說，第一篇文章的網址會是
<a href="/view?index=0">
第二篇的網址會是
<a href="/view?index=1">
第三篇的網址會是
<a href="/view?index=2">
接著修改主程式 index.js 的內容，讓網站能夠回應 /view 這種網址
然後根據從網址取得的索引參數，找出 posts.json 中對應的文章資料
接著把資料放進 view.ejs 模板中，回應顯示為網頁
請自行設計 view.ejs 的內容，簡單顯示一篇文章內容即可
請稍微加上一點樣式，弄得漂亮一點！
完成以上任務，你就完成這次的課程目標了！
歡迎將作業成果，在下方留言，跟大家分享，讓大家給你一些回饋！
可以將每課學到的觀念、關鍵字，丟到網路上去搜尋、研究一下！
發問請在「討論專區」為主，或者分享學習筆記、寫學習心得！
貼文都會出現在個人檔案頁面，成為學習歷程、部落格紀錄！
未來面試時，分享給面試官看，會讓人知道你的積極程度！
作業