ExpressJs--中间件（app.use()、body-parser（获取post请求的参数））

Express 是一个自身功能极简，完全是由路由和中间件构成一个的 web 开发框架：从本质上来说，一个 Express 应用就是在调用各种中间件。
中间件（Middleware） 是一个函数，它可以访问请求对象（request object (req)）, 响应对象（response object (res)）, 和 web 应用中处理请求-响应循环流程中的中间件，一般被命名为 next 的变量。

简单讲：中间件 就是匹配路由之前和匹配路由之后做的一系列操作。
中间件的功能包括：
       执行任何代码。
       修改请求和响应对象。
       终结请求-响应循环。
       调用堆栈中的下一个中间件。
如果我的 get、post 回调函数中，没有 next 参数，那么就匹配上第一个路由，就不会往下匹配了。如果想往下匹配的话，那么需要写 next()
Express 应用可使用如下几种中间件：
     应用级中间件

     路由级中间件
     错误处理中间件
     内置中间件
     第三方中间件

 

1. 应用级中间件(.js文件)

/**
 *  中间件 就是匹配路由之前和匹配路由之后做的一系列操作。
 * 常用作：
 *      权限判断:没有登录  跳转到登录页面，登录以后就显示登录以后的页面
 * */
let express = require('express');
let app = new express();

/**中间件  表示匹配任何路由 
 * 
 * 应用级中间件
 * next(); 路由继续往下匹配
 * 
*/
app.use(function(req,res,next) {//匹配所有路由之前
    console.log(new Date());
    /*如果这里不调用next()将不进行下面的路由匹配
        表示匹配完成这个中间件以后程序继续向下执行
    */
    next();
})
app.use('/news',function(req,res,next) {
    console.log(new Date());
    /*如果这里不调用next()将不进行下面的路由匹配
        表示匹配完成这个中间件以后程序继续向下执行
    */
   console.log('新闻路由通过app.use')
    next();
})

app.get('/',(req,res) => {

    res.send('你好！express')
})
app.get('/news',(req,res) => {

    res.send('新闻路由')
})


app.listen(8009,'127.0.0.1')

2. 路由中间件(.js)

/**
 *  中间件 就是匹配路由之前和匹配路由之后做的一系列操作。
 * 常用作：
 *      权限判断:没有登录  跳转到登录页面，登录以后就显示登录以后的页面
 * */
let express = require('express');
let app = new express();

/**中间件  表示匹配任何路由 
 * 
 * 应用级中间件
 * next(); 路由继续往下匹配
 * 
*/
app.use(function(req,res,next) {//匹配所有路由之前
    console.log(new Date());
    /*如果这里不调用next()将不进行下面的路由匹配
        表示匹配完成这个中间件以后程序继续向下执行
    */
    next();
})
app.use('/news',function(req,res,next) {
    console.log(new Date());
    /*如果这里不调用next()将不进行下面的路由匹配
        表示匹配完成这个中间件以后程序继续向下执行
    */
   console.log('新闻路由通过app.use')
    next();
})

app.get('/news',(req,res,next) => {
    // res.send('这是路由中间件')
    console.log('新闻路由')
    next();//使用next()将匹配'/news'这两个路由
})
app.get('/news',(req,res) => {

    res.send('这是路由中间件news')
})


app.listen(8009,'127.0.0.1')

3. 错误处理中间件

/**
 *  中间件 就是匹配路由之前和匹配路由之后做的一系列操作。
 * 常用作：
 *      权限判断:没有登录  跳转到登录页面，登录以后就显示登录以后的页面
 * */
let express = require('express');
let app = new express();

/**中间件  表示匹配任何路由 
 * 
 * 应用级中间件
 * next(); 路由继续往下匹配
 * 
*/
app.use(function(req,res,next) {//匹配所有路由之前
    console.log(new Date());
    /*如果这里不调用next()将不进行下面的路由匹配
        表示匹配完成这个中间件以后程序继续向下执行
    */
    next();
})
app.use('/news',function(req,res,next) {
    console.log(new Date());
    /*如果这里不调用next()将不进行下面的路由匹配
        表示匹配完成这个中间件以后程序继续向下执行
    */
   console.log('新闻路由通过app.use')
    next();
})

app.get('/',(req,res) => {

    res.send('你好！express')
})

/** 
 * 写在下面表示匹配路由之后执行中间件
 * 匹配所有的路由  404
 * 匹配不到路由时执行下面
*/
app.use(function(req,res){
    res.status(404).send('这是404 表示路由没有匹配到')
})

app.listen(8009,'127.0.0.1')

4. 内置中间件

//静态服务 index.html
app.use('/static',express.static("./static")); /*匹配所有的路径*/
app.use('/news',express.static("./static")); /*匹配所有的路径*/

5. 第三方中间件/模块   (别人写好的中间件我们拿过来使用)

例如：获取post表单的中间件body-parser

body-parser 中间件 第三方的 获取 post 提交的数据
1.cnpm install body-parser --save
2.var bodyParser = require('body-parser')
3.设置中间件
//处理 form 表单的中间件
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false })); form 表单提交的数据
// parse application/json
app.use(bodyParser.json()); 提交的 json 数据的数据
4.req.body 获取数据

代码：

目录结构

test.js

/**
 *  中间件 就是匹配路由之前和匹配路由之后做的一系列操作。
 * 常用作：
 *      权限判断:没有登录  跳转到登录页面，登录以后就显示登录以后的页面
 * */
let express = require('express');
let app = new express();
//配置ejs的模板引擎(固定)
app.set('view engine','ejs')

let bodyParser = require('body-parser');
// 配置中间件
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
 
// parse application/json
app.use(bodyParser.json())

app.get('/login',(req,res) => {
    res.render('login')
    // next()
})
// 表单上的methods的属性值是post，这里也需要一个post请求进行接收
app.post('/',(req,res) => {
    res.setHeader('Content-Type', 'text/plain')
    res.write('you posted:\n')
    res.end(JSON.stringify(req.body, null, 2))
})


app.listen(8009,'127.0.0.1')

login.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2>登录表单</h2>
    <!-- 点击登录往‘/’跳转;原理：地址栏的路径发生变化 -->
    <form action="/" method="post">
        用户名：<input type="text" name="username"><br>
        密  码：<input type="password" name="passord"><br>
        <input type="submit" value="登录">
    </form>
</body>

</html>

效果：