express中的中間件(middleware)、自定義中間件、靜态檔案中間件、路由中間件

express文檔位址

什麼是中間件呢(middleware)？它是誰的中間件呢？

首先我們需要了解到請求和響應，

請求就是用戶端發送請求給伺服器，

響應就是，伺服器根據用戶端的請求傳回給用戶端的資料，

那麼中間件，就是當用戶端請求服務端時，會向伺服器傳輸一些資料，那麼中間件就是處理這些用戶端發送往伺服器端的資料的，如果一個服務有好多個中間件，那麼當用戶端向伺服器發送請求時，會先經曆所有的中間件依次執行完後，再将請求發送給伺服器。這就是中間件的作用；

-------------------------------------------------------------------------------------------------------------

 我們先來簡單的建一個express中間件，寫一個簡單的自定義中間件

server.js

var express = require("express");//引入express

var app = express();//建立express執行個體

app.use(function(req,res,next){//app.use()就是注冊中間件的，我們傳入的這個函數就是中間件，req代表請求，res，代表響應，next：調用next後會執行下一個中間件，不調用下下一個中間件就不會執行，進而，請求就不會傳遞到伺服器
    console.log("first middleware");
    next();
})

app.use(function(req,res,next){//注冊第二個中間件 第二個中間件 等到第一個中間件執行完後 調用next()之後才會執行   同理 一次類推
    console.log("secoded middleware");
    next();
})

app.get("/",function(req,res,next){//next參數可以不傳  因為這一步響應就結束了 不用執行next
    res.send("ok")
})

app.listen(3000);
console.log("listening to port 3000")      

當然，我們可以提前結束響應，比如我們想在第二個中間件中結束響應，我們可以這樣做

var express = require("express");//引入express

var app = express();//建立express執行個體

app.use(function(req,res,next){//app.use()就是注冊中間件的，我們傳入的這個函數就是中間件，req代表請求，res，代表響應，next：調用next後會執行下一個中間件，不調用下下一個中間件就不會執行，進而，請求就不會傳遞到伺服器
    console.log("first middleware");
    next();
})

app.use(function(req,res,next){//注冊第二個中間件 第二個中間件 等到第一個中間件執行完後 調用next()之後才會執行   同理 一次類推
    console.log("secoded middleware");
    res.send("響應結束");
    // next();
})

app.get("/",function(req,res,next){//next參數可以不傳  因為這一步響應就結束了 不用執行next
    res.send("ok")
})

app.listen(3000);
console.log("listening to port 3000")      

上面将第二個中間件中的next()注釋掉，請求到第二個中間件就會停止，然後，我們調用了res.send()方法，告訴客戶，請求結束

下面來看一下middleware的執行順序，我們另外又增加了一個middleware，在這三個middleware的next()後面都列印出一句話，我們來看看中間件的執行順序是怎樣的

var express = require("express");//引入express

var app = express();//建立express執行個體

app.use(function(req,res,next){
    console.log("first middleware");
    next();
    console.log("first middleware after");
})

app.use(function(req,res,next){
    console.log("secoded middleware");
    next();
    console.log("secnded middleware after");
})

app.use(function(req,res,next){
    console.log("third middleware");
    next();
    console.log("third middleware after");
})

app.get("/",function(req,res,next){//next參數可以不傳  因為這一步響應就結束了 不用執行next
    res.send("ok")
})

app.listen(3000);
console.log("listening to port 3000")      

我們來看一下，這六個console列印執行的順序：

first middleware
secoded middleware
third middleware
third middleware after
secnded middleware after
first middleware after      

可以看出，當下一個中間件完全執行完之後，才會去執行上一個中間件的next()後面的語句！！！！

 -------------------------------------------

中間件還可以加一個路徑參數，指定是哪個路由下的中間件，如：

app.use("/home",function(req,res,next){//減傷這個路徑參數後，隻有通路這個home路由時才會執行此中間件!!!
    console.log("third middleware");
    next();
    console.log("third middleware after");
})      

------------------------------------------------------------------------------------------------

下面來看一個内置的中間件，響應靜态檔案的中間件！！！

var express = require("express");//引入express

var app = express();//建立express執行個體

app.use(express.static('public'));//express.static是靜态檔案中間件，裡面指定一個檔案夾路徑(其實就是靜态檔案的根目錄)，我們在用戶端通路localhost:3000/touxiang.png就可以通路到public目錄中的檔案

app.listen(3000);
console.log("listening to port 3000")      

我們還需要在根路徑上建立一個public檔案夾，裡面放一張圖檔，加入圖檔名稱叫touxiang.png

那麼我們在浏覽器上通路localhost:3000/touxiang.png  

我們就可以在浏覽器看到 這張圖檔了

如果我們在public檔案夾下再建立個檔案夾assets檔案夾，裡面放一個index.html頁面，我們就可以在浏覽器這樣通路這個html頁面：localhost:3000/assets/index.html

如果我們要給靜态檔案中間件指定一個路由呢？那這些靜态檔案應該如何通路呢？

先給靜态檔案加一個路由，加入是assets

app.use("/assets",express.static('public'));      

應該這樣通路到剛才的倆靜态檔案

http://localhost:3000/assets/touxiang.png
http://localhost:3000/assets/assets/index.html      

隻需要在剛才的通路路徑前加上這個assets路由即可

我們可以這樣了解，express.static('路徑')指定的是，目前路由下，靜态檔案的根目錄！！！這樣了解就很不錯了

 -----------------------------------------------------------------------------------------------------------------

下面來看一下路由中間件

我們之前寫的路由接口，都是寫在server.js中的，有非常多的app.get(...)和app.post(...),這樣都把路由寫在一個檔案中，就會顯的非常臃腫，因為一般的應用都會有好多接口的，那麼路由中間件就可以解決這樣的問題

加入我們的伺服器入口檔案裡(server.js)有兩個路由

var express = require("express");//引入express

var app = express();//建立express執行個體

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

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

app.listen(3000);
console.log("listening to port 3000")      

一個根路由，一個users路由，我們想将這兩類路由放到其它地方

首先我們在跟目錄建立一個routers檔案夾，裡面分别建立index.js和users.js

index.js内容：

var express = require("express");//引入express
var router = express.Router();//注意Router首字母大寫
router.get("/",function(req,res,next){
    res.send("root");
})

module.exports = router;//導出router      

users.js内容

var express = require("express");//引入express
var router = express.Router();//注意Router首字母大寫
router.get("/",function(req,res,next){//注意 users.js中定義的路由 的路由要改成跟路由"/"
    res.send("users");
})

module.exports = router;//導出router      

var express = require("express");//引入express

var app = express();//建立express執行個體

var indexRouter = require('./routers/index');//引入跟路由
var usersRouter = require('./routers/users');//引入users路由

app.use("/",indexRouter);//使用中間件
app.use("/users",usersRouter);//使用中間件



app.listen(3000);
console.log("listening to port 3000")