zoukankan      html  css  js  c++  java
  • express中的中间件(middleware)、自定义中间件、静态文件中间件、路由中间件

    express文档地址

    什么是中间件呢(middleware)?它是谁的中间件呢?

    首先我们需要了解到请求和响应,

    请求就是客户端发送请求给服务器,

    响应就是,服务器根据客户端的请求返回给客户端的数据,

    那么中间件,就是当客户端请求服务端时,会向服务器传输一些数据,那么中间件就是处理这些客户端发送往服务器端的数据的,如果一个服务有好多个中间件,那么当客户端向服务器发送请求时,会先经历所有的中间件依次执行完后,再将请求发送给服务器。这就是中间件的作用;

    -------------------------------------------------------------------------------------------------------------

     我们先来简单的建一个express中间件,写一个简单的自定义中间件

    server.js

    var express = require("express");//引入express
    
    var app = express();//创建express实例
    
    app.use(function(req,res,next){//app.use()就是注册中间件的,我们传入的这个函数就是中间件,req代表请求,res,代表响应,next:调用next后会执行下一个中间件,不调用下下一个中间件就不会执行,从而,请求就不会传递到服务器
        console.log("first middleware");
        next();
    })
    
    app.use(function(req,res,next){//注册第二个中间件 第二个中间件 等到第一个中间件执行完后 调用next()之后才会执行   同理 一次类推
        console.log("secoded middleware");
        next();
    })
    
    app.get("/",function(req,res,next){//next参数可以不传  因为这一步响应就结束了 不用执行next
        res.send("ok")
    })
    
    app.listen(3000);
    console.log("listening to port 3000")

    当然,我们可以提前结束响应,比如我们想在第二个中间件中结束响应,我们可以这样做

    var express = require("express");//引入express
    
    var app = express();//创建express实例
    
    app.use(function(req,res,next){//app.use()就是注册中间件的,我们传入的这个函数就是中间件,req代表请求,res,代表响应,next:调用next后会执行下一个中间件,不调用下下一个中间件就不会执行,从而,请求就不会传递到服务器
        console.log("first middleware");
        next();
    })
    
    app.use(function(req,res,next){//注册第二个中间件 第二个中间件 等到第一个中间件执行完后 调用next()之后才会执行   同理 一次类推
        console.log("secoded middleware");
        res.send("响应结束");
        // next();
    })
    
    app.get("/",function(req,res,next){//next参数可以不传  因为这一步响应就结束了 不用执行next
        res.send("ok")
    })
    
    app.listen(3000);
    console.log("listening to port 3000")

    上面将第二个中间件中的next()注释掉,请求到第二个中间件就会停止,然后,我们调用了res.send()方法,告诉客户,请求结束

    下面来看一下middleware的执行顺序,我们另外又增加了一个middleware,在这三个middleware的next()后面都打印出一句话,我们来看看中间件的执行顺序是怎样的

    var express = require("express");//引入express
    
    var app = express();//创建express实例
    
    app.use(function(req,res,next){
        console.log("first middleware");
        next();
        console.log("first middleware after");
    })
    
    app.use(function(req,res,next){
        console.log("secoded middleware");
        next();
        console.log("secnded middleware after");
    })
    
    app.use(function(req,res,next){
        console.log("third middleware");
        next();
        console.log("third middleware after");
    })
    
    app.get("/",function(req,res,next){//next参数可以不传  因为这一步响应就结束了 不用执行next
        res.send("ok")
    })
    
    app.listen(3000);
    console.log("listening to port 3000")

    我们来看一下,这六个console打印执行的顺序:

    first middleware
    secoded middleware
    third middleware
    third middleware after
    secnded middleware after
    first middleware after

    可以看出,当下一个中间件完全执行完之后,才会去执行上一个中间件的next()后面的语句!!!!

     -------------------------------------------

    中间件还可以加一个路径参数,指定是哪个路由下的中间件,如:

    app.use("/home",function(req,res,next){//减伤这个路径参数后,只有访问这个home路由时才会执行此中间件!!!
        console.log("third middleware");
        next();
        console.log("third middleware after");
    })

    ------------------------------------------------------------------------------------------------

    下面来看一个内置的中间件,响应静态文件的中间件!!!

    server.js

    var express = require("express");//引入express
    
    var app = express();//创建express实例
    
    app.use(express.static('public'));//express.static是静态文件中间件,里面指定一个文件夹路径(其实就是静态文件的根目录),我们在客户端访问localhost:3000/touxiang.png就可以访问到public目录中的文件
    
    app.listen(3000);
    console.log("listening to port 3000")

    我们还需要在根路径上建立一个public文件夹,里面放一张图片,加入图片名称叫touxiang.png

    那么我们在浏览器上访问localhost:3000/touxiang.png  

    我们就可以在浏览器看到 这张图片了

    如果我们在public文件夹下再建立个文件夹assets文件夹,里面放一个index.html页面,我们就可以在浏览器这样访问这个html页面:localhost:3000/assets/index.html

    如果我们要给静态文件中间件指定一个路由呢?那这些静态文件应该如何访问呢?

    先给静态文件加一个路由,加入是assets

    app.use("/assets",express.static('public'));

    应该这样访问到刚才的俩静态文件

    http://localhost:3000/assets/touxiang.png
    http://localhost:3000/assets/assets/index.html

    只需要在刚才的访问路径前加上这个assets路由即可

    我们可以这样理解,express.static('路径')指定的是,当前路由下,静态文件的根目录!!!这样理解就很不错了

     -----------------------------------------------------------------------------------------------------------------

    下面来看一下路由中间件

    我们之前写的路由接口,都是写在server.js中的,有非常多的app.get(...)和app.post(...),这样都把路由写在一个文件中,就会显的非常臃肿,因为一般的应用都会有好多接口的,那么路由中间件就可以解决这样的问题

    加入我们的服务器入口文件里(server.js)有两个路由

    var express = require("express");//引入express
    
    var app = express();//创建express实例
    
    app.get("/users",function(req,res,next){
        res.send("users");
    })
    
    app.get("/",function(req,res,next){
        res.send("root");
    })
    
    app.listen(3000);
    console.log("listening to port 3000")

    一个根路由,一个users路由,我们想将这两类路由放到其它地方

    首先我们在跟目录建立一个routers文件夹,里面分别新建index.js和users.js

    index.js内容:

    var express = require("express");//引入express
    var router = express.Router();//注意Router首字母大写
    router.get("/",function(req,res,next){
        res.send("root");
    })
    
    module.exports = router;//导出router

    users.js内容

    var express = require("express");//引入express
    var router = express.Router();//注意Router首字母大写
    router.get("/",function(req,res,next){//注意 users.js中定义的路由 的路由要改成跟路由"/"
        res.send("users");
    })
    
    module.exports = router;//导出router

    server.js

    var express = require("express");//引入express
    
    var app = express();//创建express实例
    
    var indexRouter = require('./routers/index');//引入跟路由
    var usersRouter = require('./routers/users');//引入users路由
    
    app.use("/",indexRouter);//使用中间件
    app.use("/users",usersRouter);//使用中间件
    
    
    
    app.listen(3000);
    console.log("listening to port 3000")

    然后我们就可以在浏览器访问localhost:3000和localhost:3000/users    我们就可以得到相对应响应内容了!!

  • 相关阅读:
    牛客练习赛51
    [HZOI 2016] 偏序(CDQ套CDQ)
    AtCoder Beginner Contest 140
    [国家集训队] 拉拉队排练
    [CF91B] Queue
    [AT3867] Digit Sum 2
    [TJOI2007] 路标设置
    [HNOI2001] 求正整数
    [十二省联考2019] 异或粽子
    [SDOI2013] 直径
  • 原文地址:https://www.cnblogs.com/fqh123/p/11567603.html
Copyright © 2011-2022 走看看