全端勇士之路 Node.js 基礎學習-Express middleware 篇

發表於 | 更新於 | 分類於

前言

這一篇將要來講一個很重要的東西，也就是 middleware，又稱中介軟體、中間組件等等，那在 Express 開發上其實是非常常見的

middleware

通常 middleware 很常見於登入守衛 (守門員、導航守衛等)，那該如何使用呢?這邊會使用的是 router.use 語法，讓我們來看看

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var express = require('express');
var router = express();
var port = 8080;

router.get('/', function(req, res) {
  // req → request
  // res → response
  res.send('HelloWorld');
})

router.get('/admin', function(req, res) {
  // req → request
  // res → response
  res.send('Hello Admin!');
})

router.use(function(req,res,next) {
  console.log('有人進入 USER頁面');
  next();
})

router.get('/user', function(req, res) {
  // req → request
  // res → response
  res.send('Hello User!');
})


router.listen(port, function() {
  console.log('已開啟 port: ' + port);
})

這時候我們可以在瀏覽器上輸入 http://localhost:8080/user/，你會在終端機上看到提示訊息

有人進入 USER頁面

由此可知我們可以在 router.use 裡面做一些判定，當然我們可以進階一點的做法，如果今天使用者輸入的頁面不存在呢?一樣是使用 router.use

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var express = require('express');
var router = express();
var port = 8080;

router.get('/' ,function(req, res) {
  // req → request
  // res → response
  res.send('HelloWorld');
})

router.get('/admin', function(req, res) {
  // req → request
  // res → response
  res.send('Hello Admin!');
})

router.get('/user', function(req, res) {
  // req → request
  // res → response
  res.send('Hello User!');
})

router.use(function(req,res,next){
  res.status(404);
  res.send('404 畫面');
})

router.listen(port, function() {
  console.log('已開啟 port: ' + port);
})

這時候我們隨便輸入一個沒有的 router，那麼你就會得到一個 404 頁面

404

那如果是程式碼錯誤呢?程式碼錯誤當然不可以給使用者看到這個畫面

ReferenceError

一樣也是使用 router.use

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
var express = require('express');
var router = express();
var port = 8080;

router.get('/' ,function(req, res) {
  // req → request
  // res → response
  qq();
  res.send('HelloWorld');
})

router.get('/admin', function(req, res) {
  // req → request
  // res → response
  res.send('Hello Admin!');
})

router.get('/user', function(req, res) {
  // req → request
  // res → response
  res.send('Hello User!');
})

router.use(function(req,res,next){
  res.status(404);
  res.send('404 畫面');
})

router.use(function(err,req,res,next) { // 這邊可以看到多了一個 err
  res.status(500);
  res.send('程式碼出現錯誤');
})

router.listen(port, function() {
  console.log('已開啟 port: ' + port);
})

這樣當程式碼錯誤的時候，就不會出現錯誤訊息哩

程式碼出現錯誤

但是一般來講開發下最好要開啟錯誤訊息，否則你會很難 debug

補充 middleware 其他寫法

如果我們有一個驗證會不停地重複使用，那麼就可以用這種寫法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
var express = require('express');
var router = express();
var port = 8080;


var login = function(req, res, next) {
  console.log('驗證成功')
  next();
}

router.get('/',login ,function(req, res) { // 在中間增加一個 login
  // req → request
  // res → response
  res.send('HelloWorld');
})

router.get('/admin',login ,function(req, res) { // 在中間增加一個 login
  // req → request
  // res → response
  res.send('Hello Admin!');
})

router.get('/user', function(req, res) {
  // req → request
  // res → response
  res.send('Hello User!');
})

router.use(function(req,res,next){
  res.status(404);
  res.send('404 畫面');
})

router.use(function(err,req,res,next) {
  res.status(500);
  res.send('程式碼出現錯誤');
})

router.listen(port, function() {
  console.log('已開啟 port: ' + port);
})

驗證成功

0%