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