十年老IT知识分享 – express的中间件app.use()的使用

1、Express框架

express框架就是node框架的一种。

安装express框架

npm install express --save

express的简单使用

安装好了express框架后,会在项目目录中看到node_modules依赖文件包,在项目的目录下新建一个routes目录,并在routes目录下新建index.js文件用于将不同方式请求的路由数据导出。

  • 新建的routes下的index.js文件undefined一般的数据格式是为json的数据格式
exports.getHome = (req,res) => {

    res.send('get获取的首页数据')

}

exports.getStudent = (req,res) => {

    res.send('get获取到的学生数据')

}

exports.postHome = (req,res) => {

    res.send('post获取到的首页数据')

}

exports.postStudent = (req,res) => {

    res.send('post获取到的学生数据')

}

然后再去项目的目录下新建一个demo.js文件去使用express并且通过express框架去获取routes中的数据内容。

  • demo.js文件
// 引入express

const express = require('express');

// console.log(express);

// 创建应用程序

const app = express();

// use()使用

// app.use(function(req,res){

//     res.send({

//         name:'xiaochen',

//         age:20

//     })

// })

// 导入页面的路由文件

const routes = require('./routes/index');

//访问首页根目录时,get获取到的数据

app.get('/', routes.getHome);

app.get('/student', routes.getStudent);

//访问student目录时,post获取到的数据

app.post('/', routes.postHome);

app.post('/student', routes.postStudent);

// 监听端口

app.listen(3000, () => {

    console.log('server start at 3000 port....');

})

部分结果.png

可以看到,数据的内容就可以通过post方式去请求到,这就是express的简单的一个使用方式。

2、中间件

2.1、中间件的功能

中间件可以执行任何代码,修改请求和响应对象,也可以终止请求响应循环。

  • 应用场景:可用于网站维护公告
2.2、中间件的使用app.use()

app.use()中间件有两个参数,

  • 一个是Path路径,表示可以指定对应的路径才会执行该中间件。
  • 另外一个是一个回调函数,用于处理当前中间件的逻辑部分

app.use()的第二个参数回调函数具有三个参数,第一个参数是request,请求的数据,第二个是response,响应回来的数据,以及第三个参数尾函数next,如果中间件里不调用next函数,整个请求响应流程就会中断,不会再往后面执行了。

  • 新建中间件的js文件undefined下面这部分代码是通过中间件的使用来简单模拟一下网站维护公告的部分逻辑,在第一个中间件里通过Date()的时间函数,来获取目前的时间点,然后通过对时间的判断是否超过了晚上多少点,超过了就终止数据的获取请求,显示网站维护界面,没有超过,则通过中间件的尾函数next()去下一个中间件app.use()去获取接口响应的数据至前端去。
// 引入express框架

const express = require('express');

// 创建程序

const app = express();

// 创建中间件app.use()

app.use(function (request, response, next) {

    let date = new Date();

    let hours = date.getHours();

    let minute = date.getMinutes();

    let seconds = date.getSeconds();

    // response.send(hours + ':' + minute + ':' + seconds)

    // 判断当前时间是否过了晚上十点

    if (hours >= 22) {

        // 超过了晚上10点,就在这里终止住

        response.send('<h1>网站维护中......</h1>')

    } else {

        // 如果没有超过晚上10点,那么就利用中间件的尾函数去获取网站的数据

        next();

    }

})

// 上述的代码执行到next()时候才会执行这个中间件

app.use(function (request, response, next) {

    response.send({

        name: '小陈',

        addr: 'china',

        data: {

            height: 1,

            weight: 1

        }

    });

})

app.listen(3000, () => {

    console.log('Server start at 3000 port.....')

})

11点超过了10点则显示网站维护.png

  • 将判断修改小于10点的,让中间件通过尾函数去获取下一个中间件的数据内容
// 引入express框架

const express = require('express');

// 创建程序

const app = express();

// 创建中间件app.use()

app.use(function (request, response, next) {

    let date = new Date();

    let hours = date.getHours();

    let minute = date.getMinutes();

    let seconds = date.getSeconds();

    // response.send(hours + ':' + minute + ':' + seconds)

    if (hours < 22) {

        response.send('<h1>网站维护中......</h1>')

    } else {

        next();

    }

})

// 上述的代码执行到next()时候才会执行这个中间件

app.use(function (request, response, next) {

    response.send({

        name: '小陈',

        addr: 'china',

        data: {

            height: 1,

            weight: 1

        }

    });

})

app.listen(3000, () => {

    console.log('Server start at 3000 port.....')

})

通过尾函数进入下一个中间件.png

2.3、中间件的分类

中间件可以根据参数分为带路径的中间件和不带路径的中间件。

带路径的中间件:

// 带路径的中间件

app.use('/student',(req,res,next)=>{

    res.send('当前是student页面...')

})

只有地址栏带有student.png

不带路径的中间件:

// 不带路径的中间件

app.use((req,res,next)=>{

    res.send('不带路径的中间件,都能被访问到....');

    next()

})

能被任何访问.png

2.4、具有多个回调函数的中间件

在中间件的第二个参数中,它不局限于只拥有一个回调函数,它可以带有多个回调函数。

具体的写法:

// 多个回调函数的中间件

app.use('/demo', (req, res, next) => {

    console.log('第一个尾函数之前.....');

    next();

    console.log('第一个尾函数之后.....');

}, (req, res, next) => {

    console.log('第二个尾函数之前.....');

    next();

    console.log('第二个尾函数之后.....');

}, (req, res, next) => {

    console.log('第三个尾函数之前.....');

    next();

    console.log('第三个尾函数之后.....');

})

powershell打印结果.png

中间件的执行模式在官网上以及很多地方被称为洋葱模式

正文完