Express全系列教程之(五)：Express的中间件

水深无声 2023-07-18 02:51 19阅读 0赞

# 一、中间件 #

从字面意思，我们可以了解到它大概就是做中间代理操作，事实也是如此；大多数情况下，中间件就是在做接收到请求和发送响应中间的一系列操作。事实上，express是一个路由和中间件的web框架，Express 应用程序基本上是一系列中间件函数的调用。

中间件函数可以执行以下任务：  
执行任何代码。  
对请求和响应对象进行更改。  
结束请求/响应循环。  
调用堆栈中的下一个中间件函数。

中间件也分为应用层中间件、路由中间件、内置中间件、错误处理中间件和第三方中间件。下面分别对以下进行说明：

## 1.应用层中间件 ##

应用级中间键绑定到app对象使用app.use和app.METHOD()-需要处理http请求的方法，例如GET、PUT、POST，将之前的get或者post替换为use就行。  
例如下面实例：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>const express=require(</code><code>"express"</code><code>);</code> &nbsp; <code>var</code>&nbsp;<code>app=express();</code> &nbsp; <code>//匹配路由之前的操作</code> <code>app.use(</code><code>function</code><code>(req,res){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"访问之前"</code><code>);</code> <code>});</code> &nbsp; <code>app.get(</code><code>"/"</code><code>,</code><code>function</code><code>(req,res){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res.send(</code><code>"主页"</code><code>);</code> <code>});</code> &nbsp; <code>app.listen(8080);</code> </td> 
 </tr> 
 </tbody> 
</table>

这时我们会发现http://localhost:8080/地址一直在加载，但命令行里显示了“访问之前”，说明程序并不会同步执行，如果使用next来是路由继续向下匹配，那么就能又得到主页数据了：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </td> 
 <td> <code>const express=require(</code><code>"express"</code><code>);</code> &nbsp; <code>var</code>&nbsp;<code>app=express();</code> &nbsp; <code>//匹配路由之前的操作</code> <code>app.use(</code><code>function</code><code>(req,res,next){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"访问之前"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>next();</code> <code>});</code> &nbsp; <code>app.get(</code><code>"/"</code><code>,</code><code>function</code><code>(req,res){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res.send(</code><code>"主页"</code><code>);</code> <code>});</code> &nbsp; <code>app.listen(8080);</code> </td> 
 </tr> 
 </tbody> 
</table>

当然也可以简化写法：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <code>const express=require(</code><code>"express"</code><code>);</code> &nbsp; <code>var</code>&nbsp;<code>app=express();</code> &nbsp; <code>app.use(</code><code>function</code><code>(req,res,next){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"访问之前"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>next();</code> <code>},</code><code>function</code><code>(req,res){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res.send(</code><code>"主页"</code><code>);</code> <code>});</code> &nbsp; <code>app.listen(8080);</code> </td> 
 </tr> 
 </tbody> 
</table>

因此，在进行路由匹配之前或再录又要继续向下执行时想做个操作，那么应用层中间件无疑是好的选择。

## 2.路由中间件 ##

路由级中间件和应用级中间件类似，只不过他需要绑定express.Router();

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>var</code>&nbsp;<code>router = express.Router()</code> </td> 
 </tr> 
 </tbody> 
</table>

在匹配路由时，我们使用 router.use() 或 router.VERB() ,路由中间件结合多次callback可用于用户登录及用户状态检测。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 </td> 
 <td> <code>const express = require(</code><code>"express"</code><code>);</code> <code>var</code>&nbsp;<code>app = express();</code> <code>var</code>&nbsp;<code>router=express.Router();</code> &nbsp; <code>router.use(</code><code>"/"</code><code>,</code><code>function</code><code>(req,res,next){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"匹配前"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>next();</code> <code>});</code> &nbsp; <code>router.use(</code><code>"/user"</code><code>,</code><code>function</code><code>(req,res,next){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"匹配地址："</code><code>,req.originalUrl);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>next();</code> <code>},</code><code>function</code><code>(req,res){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res.send(</code><code>"用户登录"</code><code>);</code> <code>});</code> &nbsp; <code>app.use(</code><code>"/"</code><code>,router);</code> &nbsp; <code>app.listen(8080);</code> </td> 
 </tr> 
 </tbody> 
</table>

总之在检测用户登录和引导用户应该访问哪个页面是，路由中间件绝对好用。

## 3.错误处理中间件 ##

顾名思义，它是指当我们匹配不到路由时所执行的操作。错误处理中间件和其他中间件基本一样，只不过其需要开发者提供4个自变量参数。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>app.use((err, req, res, next) =&gt; { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res.sendStatus(err.httpStatusCode).json(err);</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

一般情况下，我们把错误处理放在最下面，这样我们即可对错误进行集中处理。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 </td> 
 <td> <code>const express=require(</code><code>"express"</code><code>);</code> &nbsp; <code>var</code>&nbsp;<code>app=express();</code> &nbsp; <code>app.get(</code><code>"/"</code><code>,</code><code>function</code><code>(req,res,next){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>const err=</code><code>new</code>&nbsp;<code>Error(</code><code>'Not Found'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res.send(</code><code>"主页"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>next(err);</code> <code>});</code> &nbsp; <code>app.use(</code><code>"/user"</code><code>,</code><code>function</code><code>(err,req,res,next){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"用户登录"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>next(err);</code> <code>},</code><code>function</code><code>(req,res,next){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res.send(</code><code>"用户登录"</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>next();</code> <code>});</code> &nbsp; <code>app.use(</code><code>function</code><code>(req,res){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res.status(404).send(</code><code>"未找到指定页面"</code><code>);</code> <code>});</code> &nbsp; <code>app.listen(8080);</code> </td> 
 </tr> 
 </tbody> 
</table>

## 4.内置中间件 ##

从版本4.x开始，Express不再依赖Content，也就是说Express以前的内置中间件作为单独模块，express.static是Express的唯一内置中间件。

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>express.</code><code>static</code><code>(root, [options]);</code> </td> 
 </tr> 
 </tbody> 
</table>

通过express.static我们可以指定要加载的静态资源。root代表加载静态资源的路径，options作为可选参数拥有一下属性：

<table> &nbsp; 
 <tbody> 
 <tr> 
 <td>属性</td> 
 <td>描述</td> 
 <td>类型</td> 
 <td>缺省值</td> 
 </tr> 
 <tr> 
 <td>dotfiles</td> 
 <td>是否对外输出文件名以点（.）开头的文件。有效值包括“allow”、“deny”和“ignore”</td> 
 <td>字符串</td> 
 <td>“ignore”</td> 
 </tr> 
 <tr> 
 <td>etag</td> 
 <td>启用或禁用 etag 生成</td> 
 <td>布尔</td> 
 <td>true</td> 
 </tr> 
 <tr> 
 <td>extensions</td> 
 <td>用于设置后备文件扩展名。</td> 
 <td>数组</td> 
 <td>[]</td> 
 </tr> 
 <tr> 
 <td>index</td> 
 <td>发送目录索引文件。设置为 false 可禁用建立目录索引。</td> 
 <td>混合</td> 
 <td>“index.html”</td> 
 </tr> 
 <tr> 
 <td>lastModified</td> 
 <td>将 Last-Modified 的头设置为操作系统上该文件的上次修改日期。有效值包括 true 或 false。</td> 
 <td>布尔</td> 
 <td>true</td> 
 </tr> 
 <tr> 
 <td>maxAge</td> 
 <td>设置 Cache-Control 头的 max-age 属性（以毫秒或者 ms 格式中的字符串为单位）</td> 
 <td>数字</td> 
 <td>0</td> 
 </tr> 
 <tr> 
 <td>redirect</td> 
 <td>当路径名是目录时重定向到结尾的“/”。</td> 
 <td>布尔</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>setHeaders</td> 
 <td>用于设置随文件一起提供的 HTTP 头的函数。</td> 
 <td>函数</td> 
 <td>true</td> 
 </tr> 
 </tbody> 
</table>

以下示例将使用了 express.static 中间件，并且提供了一个详细的’options’对象（作为示例）：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 </td> 
 <td> <code>var</code>&nbsp;<code>options = { </code> <code>&nbsp;&nbsp;</code><code>dotfiles:&nbsp;</code><code>'ignore'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>etag:&nbsp;</code><code>false</code><code>,</code> <code>&nbsp;&nbsp;</code><code>extensions: [</code><code>'htm'</code><code>,&nbsp;</code><code>'html'</code><code>],</code> <code>&nbsp;&nbsp;</code><code>index:&nbsp;</code><code>false</code><code>,</code> <code>&nbsp;&nbsp;</code><code>maxAge:&nbsp;</code><code>'1d'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>redirect:&nbsp;</code><code>false</code><code>,</code> <code>&nbsp;&nbsp;</code><code>setHeaders:&nbsp;</code><code>function</code>&nbsp;<code>(res, path, stat) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>res.set(</code><code>'x-timestamp'</code><code>, Date.now());</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> &nbsp; <code>app.use(express.</code><code>static</code><code>(</code><code>'public'</code><code>, options));</code> </td> 
 </tr> 
 </tbody> 
</table>

## 5.第三方中间件 ##

形如之前我们的body-parser，采用引入外部模块的方式来获得更多的应用操作。如后期的cookie和session。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>var</code>&nbsp;<code>express = require(</code><code>'express'</code><code>);</code> <code>var</code>&nbsp;<code>app = express();</code> <code>var</code>&nbsp;<code>cookieParser = require(</code><code>'cookie-parser'</code><code>);</code> </td> 
 </tr> 
 </tbody> 
</table>

以上就是关于express中间件类型，在实际项目中，中间件都是必不可少的，因此熟悉使用各种中间件会加快项目的开发效率。