首頁 > web前端 > js教程 > 主體

express.js中間件的介紹(附範例)

不言
發布: 2019-03-19 10:38:19
轉載
1740 人瀏覽過

這篇文章帶給大家的內容是關於express.js中間件的介紹(附範例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

express的新開發人員往往對路由處理程序和中間件之間的差異感到困惑。因此他們也對app.use(),app.all(),app.get(),app.post(),app.delete()和app.put()方法的區別感到困惑。

在本文中,我將解釋中間件和路由處理程序之間的差異。以及如何正確使用app.use(),app.all(),app.get(),app.post(),app.delete()和app.put()方法。

路由處理

app.use(),app.all(),app.get(),app.post(),app.delete()和app.put()全部是用來定義路由的。這些方法都用來定義路由。路由用於處理HTTP請求。路由是路徑和回呼的組合,在請求的路徑匹配時執行。回呼被稱為路由處理程序。

它們之間的差異是處理不同類型的HTTP請求。例如: app.get()方法僅處理get請求,而app.all()處理GET、POST等請求。

下面是一個例子,如何定義一個路由:

var app = require("express")();

app.get("/", function(req, res, next){
    res.send("Hello World!!!!");
});

app.listen(8080);
登入後複製

每個路由處理程序都獲得對目前正在提供的HTTP請求的請求和回應物件的參考。

可以為單一HTTP請求執行多個路由處理程序。這是一個例子:
var app = require("express")();

app.get("/", function(req, res, next){
    res.write("Hello");
    next();
});

app.get("/", function(req, res, next){
    res.write(" World !!!");
    res.end();
});

app.listen(8080);
登入後複製

這裡第一個句柄寫入一些回應,然後呼叫next()next()方法用於呼叫與路徑路徑相符的下一個路由處理程序。

路由處理程序必須結束請求或呼叫下一個路由處理程序。

我們也可以將多個路由處理程序傳遞給app.all()app.get()app.post()app.delete()app.put()方法。

這是一個證明這一點的例子:
var app = require("express")();

app.get("/", function(req, res, next){
    res.write("Hello");
    next();
}, function(req, res, next){
    res.write(" World !!!");
    res.end();
});

app.listen(8080);
登入後複製

中間件

#中間件是一個位於實際請求處理程序之上的回呼。它採用與路由處理程序相同的參數。

要了解中間件,我們來看一個有dashboardprofile頁面的範例網站。要存取這些頁面,使用者必須登入。也會記錄對這些頁面的請求。

以下是這些頁面的路由處理程序的程式碼:
var app = require("express")();

function checkLogin(){
    return false;
}

function logRequest(){
    console.log("New request");
}

app.get("/dashboard", function(req, res, next){

    logRequest();

    if(checkLogin()){
        res.send("This is the dashboard page");
    }
    else{
        res.send("You are not logged in!!!");
    }
});

app.get("/profile", function(req, res, next){

    logRequest();

    if(checkLogin()){
        res.send("This is the dashboard page");
    }
    else{
        res.send("You are not logged in!!!");
    }
});

app.listen(8080);
登入後複製

這裡的問題是有很多重複的程式碼,也就是我們必須多次使用logRequest()checkLogin()函數。這也使得更新程式碼變得困難。因此,為了解決這個問題,我們可以為這兩條路徑寫一條通用路徑。

這是重寫的程式碼:
var app = require("express")();

function checkLogin(){
    return false;
}

function logRequest(){
    console.log("New request");
}

app.get("/*", function(req, res, next){
    logRequest();
    next();
})

app.get("/*", function(req, res, next){
    if(checkLogin()){
        next();
    }
    else{
        res("You are not logged in!!!");
    }
})

app.get("/dashboard", function(req, res, next){
    res.send("This is the dashboard page");
});

app.get("/profile", function(req, res, next){
    res.send("This is the dashboard page");
});

app.listen(8080);
登入後複製

這裡的程式碼看起來更清晰,更容易維護和更新。這裡將前兩個定義的路由處理程序稱為中間件,因為它們不處理請求,而是負責預處理請求。

Express為我們提供了app.use()方法,該方法專門用於定義中間件。 app.use()方法可能看起來與app.all()類似,但它們之間存在著許多差異,這使得app.use()非常適合聲明中間件。讓我們來看看app.use()方法是如何運作的:

app.use() 和 app.all() 的不同:

CALLBACK

#.app. use()只需要一個回調,而app.all()可以進行多次回調。

PATH

app.use()只查看url是否以指定路徑開頭,app.all()匹配完整路徑。

這裡有一個例子來說明:
app.use( "/product" , mymiddleware);
// will match /product
// will match /product/cool
// will match /product/foo

app.all( "/product" , handler);
// will match /product
// won't match /product/cool   <-- important
// won't match /product/foo    <-- important

app.all( "/product/*" , handler);
// won't match /product        <-- Important
// will match /product/cool
// will match /product/foo
登入後複製

NEXT()

#中間件內的next()呼叫下一個中間件或路由處理程序,取決於接下來聲明的那個。但是路由處理程序中的next()僅呼叫下一個路由處理程序。如果接下來有中間件,則跳過它。因此,必須在所有路由處理程序之前聲明中間件。

這裡有一個例子來說明:

var express = require('express');
var app = express();

app.use(function frontControllerMiddlewareExecuted(req, res, next){
  console.log('(1) this frontControllerMiddlewareExecuted is executed');
  next();
});

app.all('*', function(req, res, next){
  console.log('(2) route middleware for all method and path pattern "*", executed first and can do stuff before going next');
  next();
});

app.all('/hello', function(req, res, next){
  console.log('(3) route middleware for all method and path pattern "/hello", executed second and can do stuff before going next');
  next();
});

app.use(function frontControllerMiddlewareNotExecuted(req, res, next){
  console.log('(4) this frontControllerMiddlewareNotExecuted is not executed');
  next();
});

app.get('/hello', function(req, res){
  console.log('(5) route middleware for method GET and path patter "/hello", executed last and I do my stuff sending response');
  res.send('Hello World');
});

app.listen(80);
登入後複製

現在我們看到了app.use()方法的唯一性以及它用來宣告中間件的原因。

讓我們重寫我們的範例網站程式碼:
var app = require("express")();

function checkLogin(){
    return false;
}

function logRequest(){
    console.log("New request");
}

app.use(function(req, res, next){
    logRequest();
    next();
})

app.use(function(req, res, next){

    if(checkLogin()){
        next();
    }
    else{
        res.send("You are not logged in!!!");
    }
})

app.get("/dashboard", function(req, res, next){
    res.send("This is the dashboard page");
});

app.get("/profile", function(req, res, next){
    res.send("This is the dashboard page");
});

app.listen(8080);
登入後複製

本篇文章到這裡就已經全部結束了,更多其他精彩內容可以關注PHP中文網的JavaScript視頻教程專欄!

以上是express.js中間件的介紹(附範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板