課程目標

  • 使用 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> 超連結,點擊之後會前往單篇文章的網址

舉例來說,第一篇文章的網址會是

<a href="/view?index=0">

第二篇的網址會是

<a href="/view?index=1">

第三篇的網址會是

<a href="/view?index=2">

接著修改主程式 index.js 的內容,讓網站能夠回應 /view 這種網址

然後根據從網址取得的索引參數,找出 posts.json 中對應的文章資料

接著把資料放進 view.ejs 模板中,回應顯示為網頁

請自行設計 view.ejs 的內容,簡單顯示一篇文章內容即可

請稍微加上一點樣式,弄得漂亮一點!

完成以上任務,你就完成這次的課程目標了!


歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!

可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!

發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!

貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!

未來面試時,分享給面試官看,會讓人知道你的積極程度!


共有 3 則留言