express的中间件app.use()的使用

2021-11-24 14:10:49 浏览数 (1)

1、Express框架

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

安装express框架

npm install express --save

express的简单使用

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

  • 新建的routes下的index.js文件undefined一般的数据格式是为json的数据格式
代码语言:txt复制
exports.getHome = (req,res) => {
代码语言:txt复制
    res.send('get获取的首页数据')
代码语言:txt复制
}
代码语言:txt复制
exports.getStudent = (req,res) => {
代码语言:txt复制
    res.send('get获取到的学生数据')
代码语言:txt复制
}
代码语言:txt复制
exports.postHome = (req,res) => {
代码语言:txt复制
    res.send('post获取到的首页数据')
代码语言:txt复制
}
代码语言:txt复制
exports.postStudent = (req,res) => {
代码语言:txt复制
    res.send('post获取到的学生数据')
代码语言:txt复制
}

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

  • demo.js文件
代码语言:txt复制
// 引入express
代码语言:txt复制
const express = require('express');
代码语言:txt复制
// console.log(express);
代码语言:txt复制
// 创建应用程序
代码语言:txt复制
const app = express();
代码语言:txt复制
// use()使用
代码语言:txt复制
// app.use(function(req,res){
代码语言:txt复制
//     res.send({
代码语言:txt复制
//         name:'xiaochen',
代码语言:txt复制
//         age:20
代码语言:txt复制
//     })
代码语言:txt复制
// })
代码语言:txt复制
// 导入页面的路由文件
代码语言:txt复制
const routes = require('./routes/index');
代码语言:txt复制
//访问首页根目录时,get获取到的数据
代码语言:txt复制
app.get('/', routes.getHome);
代码语言:txt复制
app.get('/student', routes.getStudent);
代码语言:txt复制
//访问student目录时,post获取到的数据
代码语言:txt复制
app.post('/', routes.postHome);
代码语言:txt复制
app.post('/student', routes.postStudent);
代码语言:txt复制
// 监听端口
代码语言:txt复制
app.listen(3000, () => {
代码语言:txt复制
    console.log('server start at 3000 port....');
代码语言:txt复制
})

部分结果.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()去获取接口响应的数据至前端去。
代码语言:txt复制
// 引入express框架
代码语言:txt复制
const express = require('express');
代码语言:txt复制
// 创建程序
代码语言:txt复制
const app = express();
代码语言:txt复制
// 创建中间件app.use()
代码语言:txt复制
app.use(function (request, response, next) {
代码语言:txt复制
    let date = new Date();
代码语言:txt复制
    let hours = date.getHours();
代码语言:txt复制
    let minute = date.getMinutes();
代码语言:txt复制
    let seconds = date.getSeconds();
代码语言:txt复制
    // response.send(hours   ':'   minute   ':'   seconds)
代码语言:txt复制
    // 判断当前时间是否过了晚上十点
代码语言:txt复制
    if (hours >= 22) {
代码语言:txt复制
        // 超过了晚上10点,就在这里终止住
代码语言:txt复制
        response.send('<h1>网站维护中......</h1>')
代码语言:txt复制
    } else {
代码语言:txt复制
        // 如果没有超过晚上10点,那么就利用中间件的尾函数去获取网站的数据
代码语言:txt复制
        next();
代码语言:txt复制
    }
代码语言:txt复制
})
代码语言:txt复制
// 上述的代码执行到next()时候才会执行这个中间件
代码语言:txt复制
app.use(function (request, response, next) {
代码语言:txt复制
    response.send({
代码语言:txt复制
        name: '小陈',
代码语言:txt复制
        addr: 'china',
代码语言:txt复制
        data: {
代码语言:txt复制
            height: 1,
代码语言:txt复制
            weight: 1
代码语言:txt复制
        }
代码语言:txt复制
    });
代码语言:txt复制
})
代码语言:txt复制
app.listen(3000, () => {
代码语言:txt复制
    console.log('Server start at 3000 port.....')
代码语言:txt复制
})

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

  • 将判断修改小于10点的,让中间件通过尾函数去获取下一个中间件的数据内容
代码语言:txt复制
// 引入express框架
代码语言:txt复制
const express = require('express');
代码语言:txt复制
// 创建程序
代码语言:txt复制
const app = express();
代码语言:txt复制
// 创建中间件app.use()
代码语言:txt复制
app.use(function (request, response, next) {
代码语言:txt复制
    let date = new Date();
代码语言:txt复制
    let hours = date.getHours();
代码语言:txt复制
    let minute = date.getMinutes();
代码语言:txt复制
    let seconds = date.getSeconds();
代码语言:txt复制
    // response.send(hours   ':'   minute   ':'   seconds)
代码语言:txt复制
    if (hours < 22) {
代码语言:txt复制
        response.send('<h1>网站维护中......</h1>')
代码语言:txt复制
    } else {
代码语言:txt复制
        next();
代码语言:txt复制
    }
代码语言:txt复制
})
代码语言:txt复制
// 上述的代码执行到next()时候才会执行这个中间件
代码语言:txt复制
app.use(function (request, response, next) {
代码语言:txt复制
    response.send({
代码语言:txt复制
        name: '小陈',
代码语言:txt复制
        addr: 'china',
代码语言:txt复制
        data: {
代码语言:txt复制
            height: 1,
代码语言:txt复制
            weight: 1
代码语言:txt复制
        }
代码语言:txt复制
    });
代码语言:txt复制
})
代码语言:txt复制
app.listen(3000, () => {
代码语言:txt复制
    console.log('Server start at 3000 port.....')
代码语言:txt复制
})

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

2.3、中间件的分类

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

带路径的中间件:

代码语言:txt复制
// 带路径的中间件
代码语言:txt复制
app.use('/student',(req,res,next)=>{
代码语言:txt复制
    res.send('当前是student页面...')
代码语言:txt复制
})

只有地址栏带有student.png

不带路径的中间件:

代码语言:txt复制
// 不带路径的中间件
代码语言:txt复制
app.use((req,res,next)=>{
代码语言:txt复制
    res.send('不带路径的中间件,都能被访问到....');
代码语言:txt复制
    next()
代码语言:txt复制
})

能被任何访问.png

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

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

具体的写法:

代码语言:txt复制
// 多个回调函数的中间件
代码语言:txt复制
app.use('/demo', (req, res, next) => {
代码语言:txt复制
    console.log('第一个尾函数之前.....');
代码语言:txt复制
    next();
代码语言:txt复制
    console.log('第一个尾函数之后.....');
代码语言:txt复制
}, (req, res, next) => {
代码语言:txt复制
    console.log('第二个尾函数之前.....');
代码语言:txt复制
    next();
代码语言:txt复制
    console.log('第二个尾函数之后.....');
代码语言:txt复制
}, (req, res, next) => {
代码语言:txt复制
    console.log('第三个尾函数之前.....');
代码语言:txt复制
    next();
代码语言:txt复制
    console.log('第三个尾函数之后.....');
代码语言:txt复制
})

powershell打印结果.png

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

0 人点赞