express

待我称王封你为后i 2023-06-23 07:57 5阅读 0赞

## 概述 ##

Express 是基于 node.js 平台的一个简洁而灵活的应用程序开发框架；express 为 Web 和移动应用程序提供了一系列强大功能和丰富的 HTTP 实用工具和中间件，可帮助开发者创建各种 Web 应用；它进一步封装了 http 模块并没有覆盖原生 http 模块中的方法，让用户的体验更好；通过 Express 可以快速地搭建一个完整功能的网站。

## 安装 ##

在项目的根目录下执行如下命令：

> npm install express

下载成功后在需要的文件中导入 express 模块后就可以使用了

## 相关方法 ##

##### 初始化 #####

**[express()][express]**：初始化 express，相当于 `http.createServer()`

*  `express` 导入的 express 模块

// 导入模块
    const express = require('express')
    // 初始化
    let app = express()

##### 启动服务 #####

**[app.listen(\[port\[, host\[, backlog\]\]\]\[, callback\])][app.listen_port_ host_ backlog_ callback]**：用于启动服务监听端口；相当于 Nodejs 中的 `server.listen()`

*  `app` 初始化的 express

参数：

*  `port` 端口；如果端口被省略或为0，操作系统会分配一个空闲的端口
 *  `host` 主机名
 *  `backlog` 连接队列的最大长度
 *  `callback` 回调函数，当服务器开始监听时，会触发侦听事件，该函数会作为事件的侦听器使用

// 导入模块
    const express = require('express')
    // 初始化
    let app = express()
    // 监听端口
    app.listen(3000, () => { 
      console.log('服务器已启动，访问地址：localhost:3000')
    })

##### 接收 get 请求 #####

**[app.get(path,callback\[,callback\])][app.get_path_callback_callback]**：接收并处理 GET 请求

参数：

*  `path` 请求路径
 *  `callback` 请求处理函数；该函数由两个参数：
    
     *  `request` 请求信息对象，存储请求信息
     *  `response` 响应信息对象，存储响应信息

// 引入模块
    const express = require('express')
    // 初始化
    let app = express()
    // 接收 get 请求
    app.get('/', (req, res) => { 
      // 终端打印内容
      console.log('get 请求')
    })

通过 get() 只是接受了指定路径的 get 请求，并没有对请求进行处理，所以客户端会一直处在等待状态。

###### 请求对象相关属性和方法： ######

**[req.query][]**：获取 GET 请求中的查询字符串部分（对象的形式），express 内部会自动将查询参数转成对象

const express = require('express')
    const app = express()
    
    app.get('/', (req, res) => { 
      // 打印
      console.log(req.query)
    })
    app.listen(3000, () => { 
      console.log('服务已启动， 访问地址：localhost:3000')
    })

![在这里插入图片描述][20191223153747391.png]

**[req.path][]**：获取 URL 中的路径部分

###### 响应对象相关方法： ######

**[res.set(field \[, value\])][res.set_field _ value]**：设置响应头

参数：

*  `field` 字段
 *  `value` 值

res.set('Content-Type', 'text/plain');
    
    // 当同时设置多个字段时可以传递一个 对象 作为参数
    res.set({ 
      'Content-Type': 'text/html;charset=utf-8',
      'Content-Length': '111'
    })

**[res.redirect(\[status,\] path)][res.redirect_status_ path]**：重定向到指定的 URL

参数：

*  `status` 状态码；默认为 302（临时重定向）
 *  `path` 重定向的 URL

res.redirect(301, '/login')

**[res.status(statusCode)][res.status_statusCode]**：设置响应状态的状态码

参数

*  `statusCode` 状态码；200 表示成功，404 表示找不到资源，500 表示服务端内部错误，403 服务器接受请求，但拒绝提供服务

res.status(200)

**[res.render(view \[, locals\] \[, callback\])][res.render_view _ locals_ _ callback]**：渲染页面，并将渲染后的页面响应给客户端

参数

*  `view` 视图文件的路径，为相对路径时默认会相对于 views 文件夹查找文件
 *  `locals` 视图文件需要的数据
 *  `callback` 回调函数；该函数有两个参数 err 和 html，如果指定了该函数，就必须要显式的发送渲染的页面（html）。

**[res.send(\[body\])][res.send_body]**：发送 HTTP 响应内容，结束响应

参数：

*  `body` 响应体；如果发送的内容为数组或对象会先被转成 json 格式的字符串再发送给客户端

// 引入模块
    const express = require('express')
    // 初始化
    let app = express()
    // 接收 get 请求
    app.get('/', (req, res) => { 
      // 发送响应内容，结束响应
      res.send({ uname: '蓬莱老仙', age: 999, hobby: '代码使我快乐'})
    })
    // 监听端口
    app.listen(3000, () => { 
      console.log('服务器已启动，访问地址：localhost:3000')
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]

默认情况下，请求是从上到下依次匹配中间件，一旦匹配成功，终止匹配；可以针对同一个请求设置多个中间件，对同一个请求进行多次处理。

请求处理函数中还有一个参数 next ，可以调用 next 方法将请求的控制权交给下一个中间件，直到遇到结束请求的中间件。

const express = require('express')
    
    let app = express()
    
    // 请求1
    app.get('/home', function(req, res, next) { 
      req.name = '熊本熊'
      console.log('接收到了请求')
      // 调用下一个中间件
      next()
    })
    // 请求2
    app.get('/home', function(req, res) { 
      // 结束请求
      res.send(req.name)
    })
    
    app.listen(3000, function() { 
      console.log('服务器已启动，访问地址：localhost:3000')
    })

**[res.sendFile(path \[, options\] \[, fn\])][res.sendFile_path _ options_ _ fn]**：将指定路径的文件发送给客户端

参数：

*  `path` 需要传输的文件的路径；该路径必须是**绝对路径**，如果不是绝对路径就需要使用第二个参数指定根路径
 *  `options` 该参数为一个对象
 *  `fn` 发送完成后执行的回调函数；该函数拥有一个错误参数对象 err，用于存储错误信息

const express = require('express')
    const path = require('path')
    const app = express()
    
    app.get('/', (req, res) => { 
      // 将指定的文件发送给客户端，直接使用根路径
      res.sendFile(path.join(__dirname, './public/home.html'), err => { 
      // 指定根路径，上一行代码等价于这一行代码
      // res.sendFile('./public/home.html', { root: __dirname }, err => { 
        if (err) { 
          console.log(err)
        }
      })
    })
    
    app.listen(3000, () => { 
      console.log('服务器已启动，访问地址：localhost:3000')
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]

##### 接收 post 请求 #####

**[app.post(path, callback \[, callback …\])][app.post_path_ callback _ callback]**：用于接收并处理 post 请求

参数：

*  `path` 请求路径
 *  `callback` 请求处理函数

// 引入模块
    const express = require('express')
    // 初始化
    let app = express()
    // 接收 post 请求
    app.post('/', (req, res) => { 
      console.log('post 请求')
    })

##### 处理 post 请求参数 #####

express 处理 post 请求需要借助第三方插件 `body-parser`，在使用时首先要进行配置：

// extended 的值为 false 时，使用内部的 querystring 模块处理请求参数的格式；
    // 值为 true 时，使用第三方 qs 模块处理请求参数的格式
    app.use(bodyParser.urlencoded({  extended: false }))

配置完成后在请求处理方法中通过 `req.body` 就可以获取 post 请求参数。

// 引入模块
    const bodyParser = require('body-parser')
    // 配置 body-parser
    app.use(bodyParser.urlencoded({  extended: false }))
    // 处理相关请求
    app.post('/', (req, res) => { 
      // 打印请求体
      console.log(req.body)
    })

##### 接收任意请求方式的请求 #####

**[app.all(path, callback \[, callback …\])][app.all_path_ callback _ callback]**：接收任意请求方式的指定 url 请求；不管是 get 请求还是 post 请求等，只要请求路径匹配就会接收请求。

参数：

*  `path` 请求路径
 *  `callback` 回调函数

// 引入模块
    const express = require('express')
    // 初始化
    let app = express()
    // 接收任意请求方式的请求
    app.all('/index', (req, res) => { 
      // 终端打印内容
      console.log('任意请求方式')
    })

##### 使用中间件 #####

**[app.use(\[path,\] callback \[, callback…\])][app.use_path_ callback _ callback]**：该方法用于安装指定的中间件功能（注册中间件）；当请求的路径的根路径为 path 时，这些请求都会交给中间件函数处理。

参数：

*  `path` 用于调用中间件功能的请求路径
 *  `callback` 行为类似于中间件功能的回调函数；是一系列中间件功能(由逗号分隔)、一组中间件函数、所有这些的结合。

举个例子：

use.js

const express = require('express')
    let app = express()
    
    // 使用中间件
    app.use('/public/', express.static('./public/'))
    
    app.listen(3000, () => { 
      console.log('服务器已启动，访问地址：localhost:3000')
    })

public/index.html 主要代码

<h1>hello express</h1>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 2]  
当省略 use 中的 path 参数时，访问的路径也要省略对应的根路径，执行中间件时会到指定的路径下获取资源

小栗子：

/public/static/index.html 主要代码：

<h1>hello static</h1>

use.js

const express = require('express')
    let app = express()
    
    // 省略 path 参数，使用中间件
    app.use(express.static('./public/static'))
    
    app.listen(3000, () => { 
      console.log('服务器已启动，访问地址：localhost:3000')
    })

![在这里插入图片描述][20191218155612819.png]  
当 use中的 path 参数的路径与执行的中间件中的路径不同时，path 则表示中间件中路径的别名

举个例子：

const express = require('express')
    
    let app = express()
    
    //use 的 path 与 中间件的 path 不一致
    app.use('/www/', express.static('./public/static'))
    
    app.listen(3000, () => { 
      console.log('服务器已启动，访问地址：localhost:3000')
    })

![在这里插入图片描述][20191218160355977.png]

##### 中间件 #####

express 框架中的中间件分为 5 种

1.  应用级别的中间件
    
    挂载到 app （调用 express() 后的返回值）上的中间件 ，比如：app.get()
2.  路由级别的中间件
    
    挂载到 router 对象上的中间件，比如： router.get()
3.  错误级别的中间件
    
    在回调函数中有四个参数，通过提供四个参数将其标识为错误处理中间件函数；比如：`app.use((err, req, res, next) => {}))`。
    
    当程序出现错误时，调用 next() 方法，并且将错误信息通过参数的形式传递给 next() 方法，即可触发错误处理中间件。
    
    在 Node.js 中，也可以通过 `Error` 构造函数手动的抛出一个错误，例如：`throw new Error('错误信息')`，执行该代码后就会触发错误处理中间件。
    
    需要注意的是：错误处理中间件只能捕捉到同步代码执行时的错误，无法捕获到异步代码在执行过程中的错误，这时就需要通过判断手动触发，例如： `if (err) { next(err) }`。
    
    `try catch` 语法可以捕获异步函数以及同步代码在执行过程中发生的错误。
4.  内置的中间件
    
    挂载到 express 上的中间件 ，比如： express.static()
5.  第三方中间件
    
    非 express 框架提供的，需要开发人员手动安装才能使用的中间件，比如： `body-parser` 就属于第三方中间件

##### 处理静态资源的中间件 #####

**[express.static(root, \[options\])][express.static_root_ _options]**：express 内置的中间件，用于处理静态资源（快速托管静态资源）

参数：

*  `root` 静态资源的根路径
 *  `options` 该参数是一个对象，是个可选参数

##### 路由 #####

所谓的路由就是对应关系，前端请求的 URL 地址需要对应一个后端的处理函数，这种 URL 地址到处理函数之间的对应关系就是路由； express 中的路由主要是将客户端的请求分发到对应的处理函数中。

想要使用路由对象需要通过 express 的 `router()` 方法来创建路由对象:

**[express.router(\[options\])][express.router_options]**：创建路由对象

*  `express` 导入的 express 模块

参数：

*  `options` 是个可选参数，用于指定路由器的行为

创建完成后为路由对象设置相关路由再使用 use() 方法就可以使用路由了。

示例：

router.js

const express = require('express')
    // 创建路由对象
    const router = express.Router()
    const app = express()
    
    // 设置路由
    router.get('/', (req, res) => { 
      // 将指定路径下的文件发送给客户端
      res.sendFile('./public/home.html', {  root: __dirname }, err => { 
        if (err) { 
          console.log(err)
        }
      })
    })
    // 设置路由
    router.get('/home/', (req, res) => { 
      // 将指定路径下的文件发送给客户端
      res.sendFile('./public/a.txt', {  root: __dirname }, err => { 
        if (err) { 
          console.log(err)
        }
      })
    })
    // 设置路由
    router.get('/home2/', (req, res) => { 
      // 将指定路径下的文件发送给客户端
      res.sendFile('./public/b.txt', {  root: __dirname }, err => { 
        if (err) { 
          console.log(err)
        }
      })
    })
    // 设置路由
    router.get('/home3/', (req, res) => { 
      // 将指定路径下的文件发送给客户端
      res.sendFile('./public/c.txt', {  root: __dirname }, err => { 
        if (err) { 
          console.log(err)
        }
      })
    })
    
    // 安装路由
    app.use(router)
    
    app.listen(3000, () => { 
      console.log('服务器已启动，访问地址：localhost:3000')
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 3]

##### 路由参数 #####

express 中可以通过 `:` 的形式指定路由参数，在路由处理函数中通过 `req.params` 获取参数（对象的形式）；需要注意的是：当设置了路由参数后，客户端在请求时必须要按照请求参数的格式发送请求。

示例：

const express = require('express')
    const app = express()
    
    // 设置参数
    app.get('/home/:name/:age/:sex', (req, res) => { 
      // 获取请求参数
      console.log(req.params)
      res.end()
    })
    
    app.listen(3000, () => { 
      console.log('服务已启动， 访问地址：localhost:3000')
    })

![在这里插入图片描述][20191223162248309.png]

[express]: http://www.expressjs.com.cn/4x/api.html#express
[app.listen_port_ host_ backlog_ callback]: http://www.expressjs.com.cn/4x/api.html#app.listen
[app.get_path_callback_callback]: http://www.expressjs.com.cn/4x/api.html#app.get
[req.query]: http://www.expressjs.com.cn/4x/api.html#req.query
[20191223153747391.png]: https://img-blog.csdnimg.cn/20191223153747391.png
[req.path]: http://www.expressjs.com.cn/4x/api.html#req.path
[res.set_field _ value]: http://www.expressjs.com.cn/4x/api.html#res.set
[res.redirect_status_ path]: http://www.expressjs.com.cn/4x/api.html#res.redirect
[res.status_statusCode]: http://www.expressjs.com.cn/4x/api.html#res.status
[res.render_view _ locals_ _ callback]: http://www.expressjs.com.cn/4x/api.html#res.render
[res.send_body]: http://www.expressjs.com.cn/4x/api.html#res.send
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191218194410883.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[res.sendFile_path _ options_ _ fn]: http://www.expressjs.com.cn/4x/api.html#res.sendFile
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191218194718320.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[app.post_path_ callback _ callback]: http://www.expressjs.com.cn/4x/api.html#app.post.method
[app.all_path_ callback _ callback]: http://www.expressjs.com.cn/4x/api.html#app.all
[app.use_path_ callback _ callback]: http://www.expressjs.com.cn/4x/api.html#app.use
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2019121815502930.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[20191218155612819.png]: https://img-blog.csdnimg.cn/20191218155612819.png
[20191218160355977.png]: https://img-blog.csdnimg.cn/20191218160355977.png
[express.static_root_ _options]: http://www.expressjs.com.cn/4x/api.html#express.static
[express.router_options]: http://www.expressjs.com.cn/4x/api.html#express.router
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191219110754834.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[20191223162248309.png]: https://img-blog.csdnimg.cn/20191223162248309.png