1. Express框架介绍

1.1 是什么

Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。

丰富的 HTTP 快捷方法和任意排列组合的 Connect 中间件，让你创建健壮、友好的 API 变得既快速又简单。
Express 不对 Node.js 已有的特性进行二次抽象，我们只是在它之上扩展了 Web 应用所需的基本功能。

1.2 特色

  • 提供了简洁的路由定义方式
  • 对获取 http 请求参数进行了简化处理
  • 对模板引擎支持程度高，方便渲染动态HTML页面
  • 拥有中间件机制有效控制 HTTP 请求
  • 拥有大量第三方中间件对功能进行扩展

    1.3 安装

    首先假定你已经安装了 Node.js，接下来为你的应用创建一个目录，然后进入此目录并将其作为当前工作目录。
    1. npm install express

    2. Hello Express

    做一个简单的实例，在目录下创一个 app.js ```javascript // 引入 express 框架 const express = require(‘express’) // 创建网站服务器 const app = express()

app.get(‘/‘, (req, res) => { // send() // 1. send 方法内部会检测响应内容的类型 // 2. send 方法会自动设置 http 状态码 // 3. send 方法还会帮我们自动设置响应的内容类型以及编码 res.send(‘Hello Express’) })

app.get(‘/list’, (req, res)=> { // 向客户端直接响应一个对象 res.send({ name: ‘Liwker’, age: 22 }) })

// 监听端口 app.listen(3000, () => { console.log(‘网站服务器启动成功’) })

  1. 上面的代码启动一个服务并监听从 3000 端口进入的所有连接请求。对于我们设置了路由的进行响应。<br />对于其他所有路径全部返回 404 Not Found。
  3. 代码保存后，在终端执行 `node app.js`便开启服务。<br />然后在浏览器中打开 [http://localhost:3000/](http://localhost:3000/) 并查看输出结果。<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/22548696/1647052177955-1df61c00-290d-4a60-ba22-13d18057c7a0.png#clientId=u0d8e012f-5ca4-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=157&id=uc61c8500&margin=%5Bobject%20Object%5D&name=image.png&originHeight=196&originWidth=369&originalType=binary&ratio=1&rotation=0&showTitle=false&size=8585&status=done&style=none&taskId=u03990c4d-e3d7-4f2e-9631-85ba5dcc787&title=&width=295.2)![image.png](https://cdn.nlark.com/yuque/0/2022/png/22548696/1647052187837-997272b3-f3cf-4e3d-bdea-ac9a43da93ba.png#clientId=u0d8e012f-5ca4-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=142&id=u0a5a842b&margin=%5Bobject%20Object%5D&name=image.png&originHeight=178&originWidth=413&originalType=binary&ratio=1&rotation=0&showTitle=false&size=8682&status=done&style=none&taskId=ud86f6971-5fd6-4368-a243-dad265bff4c&title=&width=330.4)
  4. <a name="nEujD"></a>
  5. # 3. 路由 Router
  6. 路由是指如何定义应用的端点（URIs）以及如何响应客户端的请求。<br />路由是由一个 URI、HTTP 请求（GET、POST等）和若干个句柄组成，它的结构如下： <br />`app.METHOD(path, [callback...], callback)`<br />app 是 express 对象的一个实例， METHOD 是一个 HTTP 请求方法， path 是服务器上的路径， callback 是当路由匹配时要执行的函数。<br />比如上面的 **Hello Express** 实例里面，`app.get('/', ...)...`这个就是一个路由。
  7. <a name="CTGtR"></a>
  8. ## 3.1 路由的方法
  9. 路由方法源于 HTTP 请求方法，和 express 实例相关联。<br />下面这个例子展示了为应用跟路径定义的 GET 和 POST 请求：
  10. ```javascript
  11. // GET method route
  12. // 对网站首页的访问返回 "Hello World!" 字样
  13. app.get('/', function (req, res) {
  14.   res.send('Hello World!')
  15. })
  17. // 网站首页接受 POST 请求
  18. app.post('/', function (req, res) {
  19.   res.send('Got a POST request')
  20. })
  22. // /user 节点接受 PUT 请求
  23. app.put('/user', function (req, res) {
  24.   res.send('Got a PUT request at /user')
  25. })
  27. // /user 节点接受 DELETE 请求
  28. app.delete('/user', function (req, res) {
  29.   res.send('Got a DELETE request at /user')
  30. })

Express 定义了如下和 HTTP 请求对应的路由方法：
get, post, put, head, delete, options, trace, copy, lock, mkcol, move, purge, propfind, proppatch, unlock, report, mkactivity, checkout, merge, m-search, notify, subscribe, unsubscribe, patch, search, 和 connect。

有些路由方法名不是合规的 JavaScript 变量名，此时使用括号记法，比如：
app['m-search']('/', function ...
app.all() 是一个特殊的路由方法，没有任何 HTTP 方法与其对应，它的作用是对于一个路径上的所有请求加载中间件。

在下面的例子中，来自 “/secret” 的请求，不管使用 GET、POST、PUT、DELETE 或其他任何 http 模块支持的 HTTP 请求，句柄都会得到执行。

  1. app.all('/secret', function (req, res, next) {
  2.   console.log('Accessing the secret section ...')
  3.   next(); // pass control to the next handler
  4. })

3.2 路由句柄

可以为请求处理提供多个回调函数，其行为类似 中间件。

唯一的区别是这些回调函数有可能调用 next('route') 方法而略过其他路由回调函数。

可以利用该机制为路由定义前提条件，如果在现有路径上继续执行没有意义，则可将控制权交给剩下的路径。
路由句柄有多种形式，可以是一个函数、一个函数数组，或者是两者混合，如下所示

  1. 使用一个回调函数处理路由：

    1. app.get('/example/a', function (req, res) {
    2. res.send('Hello from A!')
    3. })

  2. 使用多个回调函数处理路由（记得指定 next 对象）:

    1. app.get('/example/b', function (req, res, next) {
    2. console.log('response will be sent by the next function ...')
    3. next()
    4. }, function (req, res) {
    5. res.send('Hello from B!')
    6. })

  3. 使用回调函数数组处理路由： ```javascript const cb0 = function (req, res, next) { console.log(‘CB0’) next() }

const cb1 = function (req, res, next) { console.log(‘CB1’) next() }

const cb2 = function (req, res) { res.send(‘Hello from C!’) }

app.get(‘/example/c’, [cb0, cb1, cb2])

  2. 4. 混合使用函数和函数数组处理路由：
  3. ```javascript
  4. const cb0 = function (req, res, next) {
  5.   console.log('CB0')
  6.   next()
  7. }
  9. const cb1 = function (req, res, next) {
  10.   console.log('CB1')
  11.   next()
  12. }
  14. app.get('/example/d', [cb0, cb1], function (req, res, next) {
  15.   console.log('response will be sent by the next function ...')
  16.   next()
  17. }, function (req, res) {
  18.   res.send('Hello from D!')
  19. })

3.3 app.route()

可使用 app.route() 创建路由路径的链式路由句柄。由于路径在一个地方指定，这样做有助于创建模块化的路由，而且减少了代码冗余和拼写错误。
下面这个示例程序使用 app.route() 定义了链式路由句柄。

  1. app.route('/book')
  2.   .get(function(req, res) {
  3.     res.send('Get a random book')
  4.   })
  5.   .post(function(req, res) {
  6.     res.send('Add a book');
  7.   })
  8.   .put(function(req, res) {
  9.     res.send('Update the book')
  10.   })

3.4 express.Router 模块化路由

可使用 express.Router 类创建模块化、可挂载的路由句柄。Router 实例是一个完整的中间件和路由系统，因此常称其为一个 “mini-app”。
下面的实例程序创建了一个路由模块，并加载了一个中间件，定义了一些路由，并且将它们挂载至应用的路径上。
在 app 目录下创建名为 birds.js 的文件，内容如下：

  1. const express = require('express')
  2. const router = express.Router()
  4. // 该路由使用的中间件
  5. router.use(function timeLog(req, res, next) {
  6.   console.log('Time: ', Date.now())
  7.   next()
  8. })
  9. // 定义网站主页的路由
  10. router.get('/', function(req, res) {
  11.   res.send('Birds home page')
  12. })
  13. // 定义 about 页面的路由
  14. router.get('/about', function(req, res) {
  15.   res.send('About birds')
  16. })
  18. module.exports = router

然后在应用中加载路由模块：

  1. const birds = require('./birds')
  2. ...
  3. app.use('/birds', birds)
  4. // 当然可以继续添加其他的路由模块
  5. // app.use('/food', fodd)

应用即可处理发自 /birds 和 /birds/about 的请求，并且调用为该路由指定的 timeLog 中间件。

4. 响应 Response

4.1 方法

下表中响应对象（res）的方法向客户端返回响应，终结请求响应的循环。如果在路由句柄中一个方法也不调用，来自客户端的请求会一直挂起。

方法 描述
res.download() 提示下载文件。
res.end() 终结响应处理流程。
res.json() 发送一个 JSON 格式的响应。
res.jsonp() 发送一个支持 JSONP 的 JSON 格式的响应。
res.redirect() 重定向请求。
res.render() 渲染视图模板。
res.send() 发送各种类型的响应。
res.sendFile 以八位字节流的形式发送文件。
res.sendStatus() 设置响应状态代码，并将其以字符串形式作为响应体的一部分发送。

5. Express托管静态文件

通过 Express 内置的 express.static 可以方便地托管静态文件，例如图片、CSS、JavaScript 文件等。
将静态资源文件所在的目录作为参数传递给 express.static 中间件就可以提供静态资源文件的访问了。例如，假设在 public 目录放置了图片、CSS 和 JavaScript 文件，你就可以：

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

现在，public 目录下面的文件就可以访问了：
http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html
所有文件的路径都是相对于存放目录的，因此，存放静态文件的目录名不会出现在 URL 中。

如果你希望所有通过 express.static 访问的文件都存放在一个“虚拟（virtual）”目录（即目录根本不存在）下面，可以通过为静态资源目录指定一个挂载路径的方式来实现，如下所示：

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

现在，你就可以通过带有 “/static” 前缀的地址来访问 public 目录下面的文件了。
http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

6. 使用中间件

Express 是一个自身功能极简，完全是由路由和中间件构成一个的 web 开发框架：从本质上来说，一个 Express 应用就是在调用各种中间件。

6.1 什么是中间件

中间件（Middleware） 是一个函数，它可以访问请求对象（request object (req)）, 响应对象（response object (res)）, 和 web 应用中处于请求-响应循环流程中的中间件，一般被命名为 next 的变量。
中间件一般由 中间件方法 和 请求处理函数 构成

  1. app.get('请求路径', '处理函数')    // 接收并处理 get 请求
  2. app.post('请求路径', '处理函数')    // 接收并处理 post 请求

中间件的功能包括：

  • 执行任何代码。
  • 修改请求和响应对象。
  • 终结请求-响应循环。
  • 调用堆栈中的下一个中间件。

如果当前中间件没有终结请求-响应循环，则必须调用 next() 方法将控制权交给下一个中间件，否则请求就会挂起。

Express 应用可使用如下几种中间件：

  • 应用级中间件
  • 路由级中间件
  • 错误处理中间件
  • 内置中间件
  • 第三方中间件

使用可选则挂载路径，可在应用级别或路由级别装载中间件。另外，你还可以同时装在一系列中间件函数，从而在一个挂载点上创建一个子中间件栈。

6.2 应用级中间件

应用级中间件绑定到 app 对象 使用 app.use() 和 app.METHOD()， 其中， METHOD 是需要处理的 HTTP 请求的方法，例如 GET, PUT, POST 等等，全部小写。例如：

  1. const app = express()
  3. // 没有挂载路径的中间件，应用的每个请求都会执行该中间件
  4. app.use(function (req, res, next) {
  5.   console.log('Time:', Date.now())
  6.   next()
  7. })
  9. // 挂载至 /user/:id 的中间件，任何指向 /user/:id 的请求都会执行它
  10. app.use('/user/:id', function (req, res, next) {
  11.   console.log('Request Type:', req.method)
  12.   console.log('id:' + req.params.id)
  13.   next()
  14. })
  16. // 路由和句柄函数(中间件系统)，处理指向 /user/:id 的 GET 请求
  17. app.get('/user/:id', function (req, res, next) {
  18.   res.send('USER')
  19. })
  21. 下面这个例子展示了在一个挂载点装载一组中间件。
  22. // 一个中间件栈，对任何指向 /user/:id 的 HTTP 请求打印出相关信息
  23. app.use('/user/:id', function(req, res, next) {
  24.   console.log('Request URL:', req.originalUrl)
  25.   next()
  26. }, function (req, res, next) {
  27.   console.log('Request Type:', req.method)
  28.   next()
  29. })
  32. // 在最后放置404
  33. app.use((req, res, next) => {
  34.   // 为客户端响应404状态码以及提示信息
  35.   res.status(404).send('当前访问的页面是不存在的');
  36. })
  38. app.listen(3000)

作为中间件系统的路由句柄，使得为路径定义多个路由成为可能。在下面的例子中，为指向 user/:id 的 GET 请求定义了两个路由。
第二个路由虽然不会带来任何问题，但却永远不会被调用，因为第一个路由已经终止了请求-响应循环。

  1. // 一个中间件栈，处理指向 /user/:id 的 GET 请求
  2. app.get('/user/:id', function (req, res, next) {
  3.   console.log('ID:', req.params.id)
  4.   next()
  5. }, function (req, res, next) {
  6.   res.send('User Info')
  7.   // 这里没有调用 next()，因此下面的中间件没有被调用
  8. })
  10. // 处理 /user/:id， 打印出用户 id
  11. app.get('/user/:id', function (req, res, next) {
  12.   res.end(req.params.id)
  13. })

如果需要在中间件栈中跳过剩余中间件，调用 next('route') 方法将控制权交给下一个路由。
注意： next(‘route’) 只对使用 app.VERB() 或 router.VERB() 加载的中间件有效。

  1. // 一个中间件栈，处理指向 /user/:id 的 GET 请求
  2. app.get('/user/:id', function (req, res, next) {
  3.   // 如果 user id 为 0, 跳到下一个路由
  4.   if (req.params.id == 0) next('route')
  5.   // 否则将控制权交给栈中下一个中间件
  6.   else next()
  7. }, function (req, res, next) {
  8.   // 渲染常规页面
  9.   res.render('regular')
  10. })
  12. // 处理 /user/:id， 渲染一个特殊页面
  13. app.get('/user/:id', function (req, res, next) {
  14.   res.render('special')
  15. })

6.2 路由级中间件

路由级中间件和应用级中间件一样，只是它绑定的对象为 express.Router()

  1. const router = express.Router()

路由级使用 router.use() 或 router.VERB() 加载。
上述在应用级创建的中间件系统，可通过如下代码改写为路由级：

  1. const app = express()
  2. const router = express.Router()
  4. // 没有挂载路径的中间件，通过该路由的每个请求都会执行该中间件
  5. router.use(function (req, res, next) {
  6.   console.log('Time:', Date.now())
  7.   next()
  8. })
  10. // 一个中间件栈，显示任何指向 /user/:id 的 HTTP 请求的信息
  11. router.use('/user/:id', function(req, res, next) {
  12.   console.log('Request URL:', req.originalUrl)
  13.   next()
  14. }, function (req, res, next) {
  15.   console.log('Request Type:', req.method)
  16.   next()
  17. })
  19. // 一个中间件栈，处理指向 /user/:id 的 GET 请求
  20. router.get('/user/:id', function (req, res, next) {
  21.   // 如果 user id 为 0, 跳到下一个路由
  22.   if (req.params.id == 0) next('route')
  23.   // 负责将控制权交给栈中下一个中间件
  24.   else next() //
  25. }, function (req, res, next) {
  26.   // 渲染常规页面
  27.   res.render('regular')
  28. })
  30. // 处理 /user/:id， 渲染一个特殊页面
  31. router.get('/user/:id', function (req, res, next) {
  32.   console.log(req.params.id)
  33.   res.render('special')
  34. })
  36. // 将路由挂载至应用
  37. app.use('/', router)    // 如果不填路径，则默认为 '/' 根目录

6.3 错误处理中间件

错误处理中间件有 4 个参数，定义错误处理中间件时必须使用这 4 个参数。
即使不需要 next 对象，也必须在签名中声明它，否则中间件会被识别为一个常规中间件，不能处理错误。
错误处理中间件和其他中间件定义类似，只是要使用 4 个参数，而不是 3 个，其签名如下：
(err, req, res, next)

  1. app.get('/error', (req, res) => {
  2.     // 创建一个错误实例并抛出
  3.     throw new Error('错误，这里是错误！');
  4. })
  6. // 错误处理中间件
  7. app.use((err, req, res, next) => {
  8.   console.error(err.stack)
  9.   res.status(500).send(err.message)
  10. })

image.png
当程序出现错误时，调用 next() 方法，并且将错误信息通过参数的形式传递给 next(err)方法，即可触发错误处理中间件。

6.4 内置中间件

从 4.x 版本开始，, Express 已经不再依赖 Connect 了。除了 express.static, Express 以前内置的中间件现在已经全部单独作为模块安装使用了。

  1. express.static(root, [options])

express.static 是 Express 唯一内置的中间件。它基于 serve-static，负责在 Express 应用中提托管静态资源。
参数 root 指提供静态资源的根目录。
可选的 options 参数拥有如下属性。

属性 描述 类型 缺省值
dotfiles 是否对外输出文件名以点（.）开头的文件。可选值为 “allow”、“deny” 和 “ignore” String “ignore”
etag 是否启用 etag 生成 Boolean true
extensions 设置文件扩展名备份选项 Array []
index 发送目录索引文件，设置为 false 禁用目录索引。 Mixed “index.html”
lastModified 设置 Last-Modified 头为文件在操作系统上的最后修改日期。可能值为 true 或 false。 Boolean true
maxAge 以毫秒或者其字符串格式设置 Cache-Control 头的 max-age 属性。 Number 0
redirect 当路径为目录时，重定向至 “/”。 Boolean true
setHeaders 设置 HTTP 头以提供文件的函数。 Function

6.5 第三方中间件

通过使用第三方中间件从而为 Express 应用增加更多功能。
安装所需功能的 node 模块，并在应用中加载，可以在应用级加载，也可以在路由级加载。

下面的例子安装并加载了一个解析 cookie 的中间件： cookie-parser
npm install cookie-parser

  1. const express = require('express')
  2. const app = express()
  3. const cookieParser = require('cookie-parser')
  5. // 加载用于解析 cookie 的中间件
  6. app.use(cookieParser())

7. 在Express中使用模板引擎

需要在应用中进行如下设置才能让 Express 渲染模板文件：

  • views, 放模板文件的目录，比如： app.set('views', './views')
  • view engine, 模板引擎，比如： app.set('view engine', 'ejs')

    art-template

    art-template for express 4.x.
    1. npm install --save art-template
    2. npm install --save express-art-template
    example: ```javascript const express = require(‘express’) const app = express()

// view engine setup app.engine(‘art’, require(‘express-art-template’)) app.set(‘view’, { debug: process.env.NODE_ENV !== ‘production’ })

// 为系统变量“views”和“view engine”指定值 app.set(‘views’, path.join(__dirname, ‘views’)) app.set(‘view engine’, ‘art’)

// routes app.get(‘/‘, function (req, res) { res.render(‘index.art’, { user: { name: ‘aui’, tags: [‘art’, ‘template’, ‘nodejs’] } }) }) ```