建立第一支 Express 應用程式

發表於 | 更新於: | 分類於 ， |

原生的 Node.js 在某些方面表現不足以應對開發的需求, 因此我們需要框架來加快開發的效率, 框架的目的就是提高效率, 讓我們的程式碼更加簡潔統一。

Express官網

安裝

1
2
npm init -y
npm install --save express

初始化

在目錄中，建立名為 app.js 的檔案，並新增下列程式碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var express = require('express')
var app = express()

app.get('/', function (req, res) {
  res.send('Hello World')
})

app.get('/login', function (req, res) {
  res.send('Login!')
})

app.listen(3000, function () {
  console.lig('Server is listening on port 3000..')
})

應用程式會啟動伺服器，並在埠 3000 接聽連線。應用程式對指向根 URL (/) 或路由的要求，以 Hello World! 回應；指向 URL (/login)，以 Login! 回復。對於其他每一個路徑，它的回應是 404 找不到。

使用 nodemon 自動重啟應用程式

在開發 Node.js 時, 若要執行程式, 需要使用 node [應用程式檔名] 來啟動伺服器服務, 且每次修改程式碼時都必須重啟一次, 在大量調試開發的階段顯得非常不方便。
現在開始我們要使用 nodemon 這個工具來幫助我們自動 reload, 避免不必要的重複動作。nodemon 會監控程式碼有無變更, 並自動重啟服務, 只要刷新你的瀏覽器就能看到改動。

安裝

全域安裝(任意資料夾都可以執行, 建議使用)

1
npm install nodemon -g

單一專案安裝(需切到目標專案資料夾, 再執行install)

1
npm install --save-dev nodemon

使用

使用方法非常簡單, 以往是 node [應用程式檔名] 來開啟服務, 在安裝完 nodemon 之後, 可以使用 nodemon [應用程式檔名] 來開啟並且監控服務。

1
nodemon app.js

基本路由

路由簡單的解釋就是一張表, 它告訴你 url 與資源的映射關係。舉例來說, 某一棟大廈中, 有許多的公司(網站的各個分頁), 當你第一次來到這時, 並不知道你想去的那間公司(欲造訪的分頁)具體位在哪樓哪室, 這時候保全警衛扮演的角色就像路由, 它可以很清楚的告訴你你該去哪裡找到你的目標(url對應的資源)。

  • 路由器
    • 請求方法
    • 請求路徑
    • 請求處理函式

get

當以 GET 方法請求 / 時, 執行對應的處理函式

1
2
3
app.get('/', function (req, res) {
  res.send('Got a GET request')
})

post

當以 POST 方法請求 / 時, 執行對應的處理函式

1
2
3
app.post('/', function (req, res) {
  res.send('Got a POST request')
})

特性

Express 提供的 get、post ..等方法, 都支援鏈式, 就像 jQuery 一樣, 它會 return 一個 app 物件。因此你可以這麼做

1
2
3
4
5
app
  .get('/', function() {...})
  .get('/login', function() {...})
  .post('product', function() {...})
  // ....

在更大型的專案中, 你可以將這些路由另外放到一支 router.js 中, 統一管理, 讓你的專案更加容易閱讀，更加有條理。

公開靜態資源

在 用 Node.js 製作簡易的留言版 練習中, 在公開的靜態資源我們是這樣做處理的。

1
2
let urlObj = url.parse(req.url, true)
let pathname = urlObj.pathname
1
2
3
4
5
6
if (pathname.indexOf('/public/') === 0) {
  fs.readFile(`.${pathname}`, (err, data) => {
    if (err) return toErrorPage()
    res.end(data)
  })
}

而 Express 中, 提供了一個 API, 我們可以透過更簡單的方式來開放靜態資源資料夾。

當以 /public/ 開頭為請求路徑時, 去該專案下的 ./public/ 資料夾尋找對應的資源

1
app.use('/public/', express.static('./public/'))

例如請求的路徑是 127.0.0.1:3000/public/css/lib/bootstrap.css, 伺服器則會回應 ./public/css/lib/bootstrap.css 這個資料路徑的資源。

精簡請求路徑

另外若有需要, 還可以更加簡化請求 url

1
app.use(express.static('./public/'))

此時請求路徑可以省略 /public/, 現在可以透過 127.0.0.1:3000/css/lib/bootstrap.css url 來請求 ./public/css/lib/bootstrap.css 這個資源了。