在瀏覽網站的時候,點擊不同頁面時,有時需要透過 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> 超連結,點擊之後會前往單篇文章的網址
舉例來說,第一篇文章的網址會是
<a href="/view?index=0">
第二篇的網址會是
<a href="/view?index=1">
第三篇的網址會是
<a href="/view?index=2">
接著修改主程式 index.js 的內容,讓網站能夠回應 /view
這種網址
然後根據從網址取得的索引參數,找出 posts.json 中對應的文章資料
接著把資料放進 view.ejs 模板中,回應顯示為網頁
請自行設計 view.ejs 的內容,簡單顯示一篇文章內容即可
請稍微加上一點樣式,弄得漂亮一點!
完成以上任務,你就完成這次的課程目標了!
歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!
可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!
發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!
貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!
未來面試時,分享給面試官看,會讓人知道你的積極程度!
作業