node.js中的Express-路由-express中间件-express接口编写_express 接口

一.express用来干啥的？

• Web网站服务器：专门对外提供Web网页资源的服务器。
• API接口服务器：专门对外提供API接口的服务器。
  express是一个第三方的npm包，使用Express，更加方便创建Web网站的服务器和API接口的服务器

1.安装

npm i express@4.17.1
1

2.创建基本的web服务器

安装express后创建基本的Web服务器，调用express（）即可创建一个服务器实例

//1.导入express
const express = require('express')
    //2.创建web服务器
const app = express()
    //3.调用app.listen(端口号，启动成功后的回调函数)，启动服务器
app.listen(8080, () => {
    console.log('express server running at http://127.0.0.1');
})
1
2
3
4
5
6
7
8

3.监听GET和POST请求，send（）方法

    //1.导入express
const express = require('express')
    //2.创建web服务器
const app = express()
    //3.监听客户端的GET和POST请求，并向客户端响应具体的内容
app.get('/user', (req, res) => {
    //调用express提供的res.send方法，向客户端响应一个JSON对象
    res.send({ name: 'zs', age: '20', gender: '男' })
})
app.post('/user', (req, res) => {
     //调用express提供的res.send方法，向客户端响应一个字符串
        res.send('请求成功')
    })
    //4.调用app.listen(端口号，启动成功后的回调函数)，启动服务器
app.listen(8080, () => {
    console.log('express server running at http://127.0.0.1');
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

4.通过req.qurey对象获取URL中携带的查询参数

可以访问到客户端通过查询字符串的形式，发送到服务器的参数
‘/user/：id’,冒号是固定写法，冒号后面的可以自由写，而且可以有多个动态参数，‘/user/：id/：name’

//注意这里的：id是一个动态的参数
app.get('/user/:id', (req, res) => {
        console.log(req.params);
        //req.params是动态匹配到的URL参数，默认也是一个空对象
        res.send(req.params)
    })
1
2
3
4
5
6

5.对外提供静态资源

nodemon

安装nodemon

npm install -g nodemon
1

二、路由

1.路由概述

在express中，路由指的是客户端请求与服务器处理函数之间的映射关系
每当一个请求到达服务器之后，需要先经过路由匹配，只有匹配成功，才会调用相应处理函数。
匹配的时候，会按照陆游的顺序进行匹配，若请求类型和请求的url同时匹配成功，则Express会将这次请求，转交给对应的function函数进行处理

const express = require('express')
const app = express()
    //挂载路由
app.get('/', (req, res) => {
    res.send('hello')
})
app.post('/', (req, res) => {
    res.send('post')
})
app.listen(8000, () => {
    console.log('http://127.0.0.1');
})
1
2
3
4
5
6
7
8
9
10
11
12

2.路由模块化

为了方便对路由进行模块化的管理，express不建议直接将路由挂载到app上，而是推荐将路由抽离为单独的模块。
代码如下：

//这是路由模块
//1.导入expres
const express = require('express')
    //2.创建路由对象
const router = express.Router()
    //3.挂载具体的路由
router.get('/user/list', (req, res) => {
    res.send('get user list')
})
router.post('/user/add', (req, res) => {
        res.send('add new user')
    })
    //导出路由对象
module.exports = router
1
2
3
4
5
6
7
8
9
10
11
12
13
14

注册路由模块：app.use()函数的作用，是注册全局中间件

const express = require('express')
const app = express()
    //挂载路由
    //1.导入路由模块
const router = require('./模块化路由')
    //2.注册路由模块
app.use(router)
app.listen(8000, () => {
    console.log('http://127.0.0.1');
})
1
2
3
4
5
6
7
8
9
10

为路由模块添加/api访问前缀的方法

app.use('/api',userRouter)
1

三.Express中间件

1.什么是Express中间件

Express中间件，本质上就是一个function处理函数，Express中间件的格式如下：

app.get('/',function(req,res,next)=>{next();})
1

中间件的格式与路由相似，区别在于中间件必须包含next参数。而路由处理函数中只包含req和res.
next函数是实现多个中间件连续调用的关键，表示处理完毕了，且把流转关系转交给下一个中间件或者路由

1.1定义中间件函数

const express = require('express')
const app = express()
    //定义一个最简单的中间件函数
const mw = function(req, res, next) {
    console.log('这是最简单的中间件函数');
    //把流转关系转交给下一个中间件或路由
    next();
}
app.listen(80, () => {
    console.log('http://127.0.0.1');
})
1
2
3
4
5
6
7
8
9
10
11

2.全局生效的中间件

客户端发起的任何请求，到达服务器之后，都会触发的中间件，叫做全局生效的中间件
实现方式：调用app.use(中间件函数)。即可定义一个全局生效的中间件

app.use(mw)
app.get('/', (req, res) => {
    res.send('home page')
})
app.get('/', (req, res) => {
    res.send('user page')
})
1
2
3
4
5
6
7

3.中间件的作用

做个中间价之间，共享同一份req和res，基于这样的特性，我们可以在上游的中间件中，统一为req或res对象添加自定义的属性和方法，供下游的中间件或路由使用。
eg:在中间件中为req挂载startTime属性值，后面的两个路由均能使用

4.定义多个全局中间件

使用app.use（）连续定义多个中间件。客户端请求到达服务器，会按照中间件的定义的前后顺序调用

//定义第一个全局中间件

app.use((req, res, next) => {
        console.log('调用了第一个全局中间件');
        next();
    })
    //定义第二个中间件
app.use((req, res, next) => {
    console.log('调用了第二个全局中间件');
    next();
})
app.get('/user', (req, res) => {
    console.log('调用了/user这个路由');
    res.send('user page')
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

测试结果：

5.局部生效的中间件

局部生效的中间件指的是 **不使用app.use()**定义的中间件，且只在调用的路由中起作用，如下面的代码，终端只响应第一个路由输出的结果

测试结果如下：

6.定义多个局部中间件

调用第一个中间件执行这次请求，接着调用第二个中间件执行这次请求，最后把请求交给路由

7.中间件的使用注意项

• 一定要在路由之前注册中间件，否则中间件无法正常作用
• 客户端发送过来的请求，可以连续调用多个中间件进行处理
• 执行完中间件的业务代码之后，不要忘记调用next（）函数
• 防止代码逻辑混乱，调用了next（）函数后不要写额外的代码
• 连续调用多个中间件时，多个中间件之间，共享req和res对象

8.中间件的分类

1. 应用级别的中间件
2. 路由级别的中间件
3. 错误级别的中间件
4. Express内置的中间件
5. 第三方中间件

8.1.应用级别的中间件

通过app.use()或app.get()或app.post（），绑定到app实例上的中间件，叫做应用级别的中间件。

8.2.路由级别的中间件

绑定到express.Router实例上的中间件，叫做路由中间件，用法与应用级中间件没区别，应用级中间件只是绑定到app实例上，路由级别中间件绑定到router上

8.3.错误级别中间件

专门用来捕获整个项目中发生的异常错误，从而防止项目异常崩溃的问题。错误级别中间件的处理函数中，必须有四个形参，（err,req,res,next）
错误路由在前，错误级别中间件在后

app.get('/', (req, res) => {
        //人为制造的错误
        throw new Error('服务器内部发生了错误')
        res.send('user page')
    })
    //定义错误级别的中间件，捕获整个项目的异常，防止程序的崩溃
app.use((err, req, res, next) => {
    console.log('发生了错误' + err.message);
    res.send('Error!' + err.message)
})

1
2
3
4
5
6
7
8
9
10
11
12

8.4.express内置中间件

1. express.static快速托管静态资源的内置中间件 如：,html文件，图片，css样式等（无兼容性）
2. express.json 解析JSON格式的请求体数据（有兼容性，4.16.0+版本可用）
3. express.urlencoded解析URL-encoded格式的请求体数据（有兼容性，4.16.0+版本可用）

eg: express.json（） 代码：

//通过express.json()这个中间件，解析表单数据
app.use(express.json())
app.post('/user', (req, res) => {
    //在服务器，使用req.body这个属性，来接受客户端发送过来的请求体数据
    //默认情况下，如果不配置解析表单数据的中间件，则req.body默认等于undefined
    console.log(req.body);
    res.send('ok')
})
1
2
3
4
5
6
7
8

在postman里面发送json格式的数据给服务器，服务器需要配置express.json()对数据进行解析，中间件对JSON数据进行解析后，结果挂载在req的包里，后续路由就可以访问req包里面的数据

经测试，服务器端拿到了解析后的数据

8.5第三方的中间件

第三方开发出来的中间件，项目中按需下载并配置第三方中间件，提高项目开发效率
如body-parser的使用

1. 运行npm install body-parser安装中间件
2. require导入中间件
3. 调用app.use()注册并使用中间件

使用代码如下：

//1.导入解析表单数据的中间件body-parser
const parser = require('body-parser')

//通过express.json()这个中间件，解析表单数据
app.use(parser.urlencoded({ extended: false }))
app.post('/user', (req, res) => {
    //在服务器，使用req.body这个属性，来接受客户端发送过来的请求体数据
    //默认情况下，如果不配置解析表单数据的中间件，则req.body默认等于undefined
    console.log(req.body);
    res.send('ok')
})

1
2
3
4
5
6
7
8
9
10
11
12

给服务器端发送数据

经过中间件处理后，服务器端成功接受到数据

Express内置的express.urlencoded中间件，就是基于body-parser这个第三方中间件进行封装的，因此用法很相似。

8.6自定义中间件

1. 定义中间件（使用app.use定义全局生效的中间件）
2. 监听req的data事件
3. 监听req的end事件（请求体数据接收完毕，自动触发req的end事件）
4. 使用querystring模块解析请求数据体（Node.js内置这个模块，专门用来处理查询字符串，通过此模块提供的parse()函数查询字符串，解析成对象格式）
5. 讲解析出来的数据对象挂载为req.body（上游中间件和下游中间件以及路由之间，共享一份req和res,将解析出来的数据，挂载为req的自定义属性，命名为req.body）
6. 将自定义中间件封装为模块

自定义中间件模块化代码：

const express = require('express')
const app = express()
//导入node.js内置的querystring模块
const qs = require('querystring')
const bodyParser = (req, res, next) => {
    //定义中间件的具体业务逻辑
    //1.定义一个str字符串，专门用来存储客户端发送过来的请求体数据
    let str = ''
        //2.监听req的data事件
    req.on('data', (chunk) => {
        str += chunk
    })
    req.on('end', () => {
        //打印完整的请求体数据
        console.log(str);
        //把字符串格式的请求体数据，解析成对象格式
        const body = qs.parse(str)
        req.body = body
        next()
    })
    app.post('/user', (req, res) => {
        res.send('ok')
    })
}
module.exports = bodyParser
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

调用代码

const express = require('express')
const app = express()
    //导入node.js内置的querystring模块
const customBodyParser = require('./11.对自定义中间件进行模块化分装')
app.use(customBodyParser)
app.post('/user', (req, res) => {
    res.send(req.body)
})
app.listen(8080, () => {
    console.log('http://127.0.0.1:8080');
})
1
2
3
4
5
6
7
8
9
10
11

四、使用Exprss写接口

1.编写GET接口

   //在这里挂载对应的路由
router.get('/get', (req, res) => {
    //通过req.query获取客户端通过查询字符串，发送到服务器的数据
    const query = req.query
        //调用send方法，向客户端响应处理的结果
    res.send({
        status: 0,//0表示处理成功，1表示处理失败
        msg: 'GET请求成功！',//状态描述
        data: query //需要响应给客户端的数据
    })
})
1
2
3
4
5
6
7
8
9
10
11

2.编写POST接口

    //定义post接口
router.post('/post', (req, res) => {
    //通过req.body获取请求体中包含的url-encoded格式的数据
    const body = req.body
        //通过res.send()方法，向客户端响应结果
    res.send({
        status: 0, //0表示处理成功，1表示处理失败
        msg: 'GET请求成功！', //状态描述
        data: body //需要响应给客户端的数据
    })
})
1
2
3
4
5
6
7
8
9
10
11

向服务器发送了这条数据，服务器原封不动的响应回客户端

3.接口的跨域问题

上面编写的GET和POST接口，存在一个很严重的问题：不支持跨域请求。
解决接口跨域问题的方案主要有两种
1.CORS(主流的解决方案)
2.JSONP(有缺陷的解决方案，只支持GET请求)

3.1 使用cors中间件解决跨域问题

cors是Express的一个第三方中间件,由一系列HTTP响应头组成，这些HTTP响应头决定浏览器是否阻止前端js代码跨域获取资源，主要在服务器端进行配置，客户端无需做任何额外的配置，即可请求开启了CORS的接口。

浏览器的同源安全策略默认会阻止网页‘跨域’获取资源，但如果接口服务器配置了CORS的相关http响应头，就可以解除浏览器端的跨域访问限制。
1.运行npm install cors安装中间件
2.使用const cors=require('cors')导入中间件
3.在路由之前调用app.use(cors())

4.代码实现

创建接口代码：

const express = require('express')
const app = express()
//一定要在路由之前，配置cors这个中间件，从而解决接口跨域的问题
const cors = require('cors')
app.use(cors())
    //导入路由模块
const router = require('./02apiRouter')
//配置解析表单数据的中间件
app.use(express.urlencoded({ extended: false }))
 //把路由模块注册到app上
app.use('/api', router)
app.listen(8080, () => {
    console.log('http://127.0.0.1:8080');
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

路由模块代码如下：

const express = require('express')
const router = express.Router()
    //在这里挂载对应的路由
router.get('/get', (req, res) => {
        //通过req.query获取客户端通过查询字符串，发送到服务器的数据
        const query = req.query
            //调用send方法，向客户端响应处理的结果
        res.send({
            status: 0, //0表示处理成功，1表示处理失败
            msg: 'GET请求成功！', //状态描述
            data: query //需要响应给客户端的数据
        })
    })
    //定义post接口
router.post('/post', (req, res) => {
    //通过req.body获取请求体中包含的url-encoded格式的数据
    const body = req.body
        //通过res.send()方法，向客户端响应结果
    res.send({
        status: 0, //0表示处理成功，1表示处理失败
        msg: 'GET请求成功！', //状态描述
        data: body //需要响应给客户端的数据
    })
})
module.exports = router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25