8. Node 之 Express 模块

291 阅读6分钟

一、初识 Express

1. 什么是Express

官方给出的概念: Express是 基于 Node.js 平台快速、开发、极简Web 开发框架

通俗的理解: Express 的作用 和 Node.js 内置的 http 模块类似,是专门用来创建 Web 服务器

Express 的本质: 就是一个 npm 上的第三方,提供了快速创建 Web 服务器的便捷方法。

Express的中文官网:www.expressjs.com.cn/starter/ins…

2. 进一步理解 Express

思考: 不使用 Express 能否创建 Web 服务器 ?
答案: 能,使用 Node.js 提供的 原生 http 模块即可

思考: 有了 http 模块,为啥还要用 Express ?
答案: http 内置模块用起来复杂,开发效率低。 Express 是基于 内置的 http 模块进一步封装出来的,能提高开发效率。

思考: http 内置模块 与 Express 是什么关系?
答案: 类似于浏览器中的 Web API 和 jQuery 的关系,后者是基于前者进一步封装出来的。

3. Express 能做什么

对于前端人来说,最常见的 2 种服务器,分别是:

  • Web 网站服务器:专门对外提供 Web 网页资源的服务器
  • API 接口服务器: 专门对外提供 API 接口的服务器

使用 Express, 可以方便、快捷的创建 Web 网站的服务器 或 API 接口服务器。

二、Express 的基本使用

1. 安装 Express

在项目所处的目录中,运行如下的终端命令,即可将 Express 安装到项目中使用:

npm i express@4.17.1

2. 使用 Express 创建服务器

// 导入 express
const express = require('express');

// 创建服务器
const app = express()

// 启动服务器
app.listen(80, ()=> {
    console.log('runing in http://127.0.0.1')
})

3. Express 监听 GET 、POST 请求

通过 app.get() 方法,可以监听客户端的 GET 请求
通过 app.post() 方法,可以监听客户端的 POST 请求

参数1:客户端请求的 URL 地址
** 参数2**:请求对应的处理函数,req 请求对象; res: 响应对象。

通过 res.send() 方法,可以把处理好的内容,发送给客户端

// 导入 express
const express = require('express');

// 创建服务器
const app = express()

// 调用 get 请求
app.get('/user', (req, res)=> {
    // 调用 express 提供的 res.send() 方法,向客户端响应一个 JSON 对象
    res.send({'name':'xxl', age: 18})
})

// 调用 post 请求
app.post('/user', (req, res) => {
    // 调用 express 提供的 res.send() 方法,向客户端响应一个 文本字符串
    res.send('请求成功')
})

// 启动服务器
app.listen(80, ()=> {
    console.log('runing in http://127.0.0.1')
})

4. 获取 uRL 中携带的查询参数

通过 req.query 对象,可以访问到客户端通过 查询字符串 的形式,发送到服务器的参数:
注意:req.query 默认是一个 空对象

// 导入 express
const express = require('express');

// 创建服务器
const app = express()

// 获取 url 中携带的查询参数
app.get('/', (req, res) => {
    let query = req.query;
    console.log(query)
    res.send(query)
})

// 启动服务器
app.listen(80, ()=> {
    console.log('runing in http://127.0.0.1')
})

image.png

5. 获取 URL 中的 动态参数

通过 req.params 对象,可以访问到 URL 中, 通过 【冒号】 :匹配到动态参数
注意:req.parmas 默认是一个空对象

// 导入 express
const express = require('express');

// 创建服务器
const app = express()

// url 地址中,可以通过 :参数名 的形式,匹配动态参数值
app.get('/user/:id/:name', (req, res) => {
    let paramsObj = req.params;
    console.log(paramsObj, 'paramsObj')
    res.send(paramsObj)
})

// 启动服务器
app.listen(80, ()=> {
    console.log('runing in http://127.0.0.1')
})

d2a0f6fe3343413aa01b77d5b4e3ae32_tplv-k3u1fbpfcp-watermark.png

6. Express.static() 托管静态资源

express 提供了一个非常好用的函数,叫做 express.static(),通过它, 可以非常方便的创建一个 静态资源服务器.
例如,通过如下代码就可以把 static 目录下的图片,CSS 文件、JS 文件 对外开放访问了: image.png

const express = require('express');

const app = express();

// 调用 express.static() 方法,快速对外提供静态资源
app.use(express.static('./static'))

app.listen(80, () => {
    console.log(`runing in http://127.0.0.1`)
})

现在,就可以访问 static 目录下中的所有文件了

注意: Express 在 指定的 静态目录中查找文件,并对外提供资源的访问路径。因此,存放静态文件的目录名不会出现在 URL 中

7. Express 托管多个静态资源目录

如果要托管多个静态资源目录,请多次调用 express.static()函数:
访问静态资源文件时,express.static() 函数会根据目录的顺序查找所需的文件\

例如:要访问 http://127.0.0.1/index.html, 按照下面的写法,先从 file 目录中查找 index.html, 如果没找到去 static 目录中查看。

// 调用 express.static() 方法,快速对外提供静态资源
app.use(express.static('./file'))
app.use(express.static('./static'))

8. 托管静态资源-挂载路径前缀

如果希望在托管的 静态资源访问路径 之前,挂载路径前缀,可以使用如下的方法:

app.use('/file',express.static('./file'))

这样,就可以通过带有 /file 前缘地址来访问 file 目录中的文件了:

四、nodemon

1. 为什么要使用 nodemon

在编写调试 Node.js 项目的时候,如果修改了项目的代码,则需要手动频繁的重启服务才会生效。这时我们可以下载 nodemon , 它 能够监听项目文件的变动,当代码被修改后,会 自动在我们重启项目

2. 安装 和使用 nodemon

安装

npm i nodemon -g

在终端使用:用 nodemon 替换 node

nodemon .\index.js

五、express 中的路由

1. 路由的概念

什么是路由,广义上来讲,路由就是映射关系。

2. 现实生活中的路由

image.png

3. express 中路由的概念

在 Express 中,路由指的是 客户端的请求 与 服务器处理函数 之间的映射关系
Express 中的路由分 3 部分组成, 分别是 请求的类型、请求的 URL地址、处理函数,格式如下

app.METHOD(PAHHANDLER)

## 例如如:
app.get('/user', (req, res)=> {
    
})

app.post('/user', (req, res)=> {
    
})

4. Express 路由的匹配过程

每当一个请求到达服务器之后 ,需要先经过路由的匹配,只有匹配成功之后,才会调用对应的处理函数。
在匹配时,会按钮路由的顺序进行匹配,如果** 请求类型** 和 请求的 URL 同时匹配成功,则 Express 会将这次请求,转交给对应的 function 函数进行处理。

image.png

5. Express 路由的使用

在 Express 中使用路由最简单的方式,就是把路由挂载到 app 上,示例代码如下:

// 导入 express
const express = require('express');
// 创建服务器
const app = express()

// 挂载路由
app.get('/user', (req, res)=> {res.send('get 请求')})
app.post('/user', (req, res)=> {res.send('post 请求')})

// 启动服务器
app.listen(80, ()=> {
    console.log('runing in http://127.0.0.1')
})

6. Express 模块化路由

为了 方便对路由进行模块化的管理, Express 不建议将路由直接挂载到 app 上,而是 推荐将路由抽离为单独的模块
将路由抽离为单独模块的步骤如下:

  1. 创建路由模块对应的 .js 文件
  2. 调用 express.Router() 函数创建路由对象
  3. 向路由对象上挂载具体的路由
  4. 使用 module.exports 向外共享路由对象
  5. 使用 app.use() 函数注册路由模块

示例目录如下:router.js 为 路由模块的文件, index.js 是引入路由模块的文件

image.png

a. 创建路由模块, 在 router.js 里
# router.js

const express = require('express')
// 调用 express.Router() 方法创建路由对象
const router = express.Router()

router.get('/user/list', (req, res) => {
    res.send('get request')
})

router.post('/user/add', (req, res) => {
    res.send('post request')
})

module.exports = router;
b. 导入路由模块并注册
const express = require('express');

const app = express()

// 导入路由模块
const userRouter = require('./router')
// 注册路由
app.use(userRouter)

// 给路由注册,并添加前缀
app.use('/api', userRouter)

app.listen(80, () => {
    console.log('running in http://127.0.0.1')
})

image.png

注意: app.use() 函数的作用,就是来注册全局中间介

7. 为路由模块添加前缀

类似于托管静态资源时,为静态资源统一挂载访问前缀一样,路由模块添加前缀的方式也同样:

// 1. 导入路由模块
const userRouter = require('./router')

// 2. 使用 app.use() 注册路由模块,并添加统一的访问前缀 /api
app.use('/api', userRouter)