iT邦幫忙

2022 iThome 鐵人賽

DAY 1
1
自我挑戰組

30 天線上自學前端系列 第 10

[Day 10] [Express] 用 express 做一個 server: 了解跟試著做做看 Routes

  • 分享至 

  • xImage
  •  

昨天用 app.get 做了一個 callback:

app.get('/', function(request, response){
    response.send('<h1><font color="#A3A3FF">hello!! ?</font></h1>')
})

今天要來做 Routes。因為課程是英文的,所以去查了一下中文的對應翻譯,沒想到查到一篇算滿詳細的說明:

ref. [Day21] Route 路由

Route ,翻譯成中文為路由,這個 Route 不是指硬體設備的 Route ,而是指軟體網站,路徑的『中間站』。
Route 是現代網站開發很重要的概念,傳統的網站開發,會直接網頁名稱和路徑相符,例如 /users/profile的路徑,就一定會在 users 資料夾下,有個叫 profile.php 或是 profile.html 的檔案。

路徑產生器
在許多的程式語言中, Route 都有提供路徑產生的機制,在 Ruby 中,就有專門為 RESTful API 的設計方式,設計的 Route function ,可以產生一組對應的路徑。例如我們如果要產生如下的路徑:GET 獲取所有漫畫資料 www.comicking.com/comics GET 獲取特定漫畫資料 www.comicking.com/commic/:id POST 新增漫畫資料 www.comicking.com/commic PUT 更新特定漫畫資料 www.comicking.com/commic/:id DELETE 刪除特定漫畫資料 www.comicking.com/commic/:id ps: :id 指的就會是資料參數,看是第幾筆,就是該筆的 id。

課程裡的解說例子是這樣:

app.get('/contact', function(request, response){
    response.send('<h1><font color="#A3A3FF">Contact Me Now!</font></h1>')
})

意思就是,當我到 http://localhost:3000/contact 的時候,就會出現 Contact Me Now! ,這樣就可以為各種不同 routes 設定好程式碼。

課程中的小練習:做一個新的路徑,當進入 about 這個頁面時,可以看見專屬 about 的資訊。

小練習的結果:
https://ithelp.ithome.com.tw/upload/images/20220910/20151588kWsbeHrdER.png

因為每次都要重新 save + node js. file,所以課程終於介紹了 nodemon,這樣就可以自動 reload 不用再多這一個步驟了~ 用 npm install -g nodemon 把他裝好,試試看隨便改一下 .js 然後按儲存,真的可以馬上 reload chrome 來看到結果。


上一篇
[Day 9] [Express] 用 express 做一個 server: the GET request
下一篇
[Day 11] [Express] 用 Express 和 Node 做一個簡單的 web application
系列文
30 天線上自學前端72
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言