node.js基础学习koa-中间件

系列文章目录

node 中间件

---

---

前言

Koa 中间件的实现原理，也就是洋葱模型的实现原理，核心在于next的实现。next需要依次调用下一个middleware，当到最后一个的时候结束，这样后面middleware的promise先resolve，然后直到第一个，这样的流程也就是洋葱模型的流程了。
实现的时候还有一些细节，一个是递归最好做成尾递归的形式，而是用异步递归而不是同步递归，第三就是形式上用函数复合的形式，这样复合之后的中间件还可以继续复合。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、中间件的简单理解

中间件 ：匹配路由之前或者匹配路由完成做的一系列操作。我们叫做中间件。
没有next 下面的路由就没有进行，匹配任何路由

二、通过中间件实现时间打印

1.例子

在这之前通过终端安装依赖
npm i koa koa-router --save
代码逐一分析

代码如下（示例）：

var Koa = require('koa');
var Router = require('koa-router');
//引入 koa koa-router
var app = new Koa();
var router = new Router()
//使用koa koa-router的方法


// 目的；匹配之前 打印日期
// 中间件 ：匹配路由之前或者匹配路由完成做的一系列操作。我们叫做中间件。
// koa的中间件
// 没有next 下面的路由就没有进行，匹配任何路由
// app.use(async(ctx) => {
//     ctx.body = 'gggg中间件'
// })
//中间件
app.use(async(ctx, next) => {
    ctx.body = 'gggg中间件' 任何未定义的路由都会打印 gggg中间件的结果
  
    console.log(new Date()) //完成以后继续向下匹配
    await next()

})

router.get('/', async(ctx) => {
    // 获取get传值
    // 从ctx中读出 最多的方式
    // console.log(ctx.query)
    ctx.body = '首页11'
})
router.get('/news', async(ctx) => {
    // 获取get传值
    // 从ctx中读出 最多的方式
    console.log(ctx.query)
    ctx.body = '新闻页面'
})

app.use(router.routes());


app.listen(3000);

2.结果

结果

---

三，错误处理中间件

1 例子：

var Koa = require('koa');
var Router = require('koa-router');
var app = new Koa();
var router = new Router()

// 目的；匹配之前 打印日期
// 中间件 ：匹配路由之前或者匹配路由完成做的一系列操作。我们叫做中间件。


router.get('/', async(ctx) => {
        // 获取get传值
        // 从ctx中读出 最多的方式
        // console.log(ctx.query)
        ctx.body = '首页11'
    })
   
// 匹配到news 后继续匹配
router.get('/news', async(ctx) => {
    // 获取get传值
    // 从ctx中读出 最多的方式
    console.log('新闻2')
    ctx.body = '新闻页面'
})
router.get('/login', async(ctx) => {
        // 获取get传值
        // 从ctx中读出 最多的方式
        console.log(ctx.query)
        ctx.body = '登录页面'
    })
    // 顺序没用 ,在后面也要先执行 洋葱模型
app.use(async(ctx, next) => {
    console.log('zui最后， fff')
    await next()
        // 路由结束以后 以后的中间件,判断 页面是否404 .
    if (ctx.status === 404) { // 页面找不到
        ctx.status = 404
        ctx.body = '这是404页面'
    }
    // http://localhost:3000/news445
    // 页面找不到
    // 这是404页面
    else {
        console.log(ctx.url)
    }

})
app.use(router.routes());


app.listen(3000);

2 结果

四：洋葱模型

1：例子

var Koa = require('koa');
var Router = require('koa-router');
var app = new Koa();
var router = new Router()

app.use(async(ctx, next) => {
    console.log('新闻1', 1)
    await next()
    console.log('新闻5', 2)
})
app.use(async(ctx, next) => {
    console.log('新闻2', 2)
    await next()
    console.log('新闻4', 2)
})

router.get('/', async(ctx) => {
    // 获取get传值
    // 从ctx中读出 最多的方式
    // console.log(ctx.query)
    ctx.body = '首页11'
})
router.get('/news', async(ctx) => {
    // 获取get传值
    // 从ctx中读出 最多的方式
    console.log('新闻3')
    ctx.body = '新闻页面'
})
router.get('/login', async(ctx) => {
        // 获取get传值
        // 从ctx中读出 最多的方式
        console.log()
        ctx.body = '登录页面'
    })
    //    输出结果
    // [Running] node "d:\后端了解\测试-koa\text-koa\09-koa洋葱.js"
    // 新闻1 1
    // 新闻2 2
    // 新闻3
    // 新闻4 2
    // 新闻5 2

app.use(router.routes());


app.listen(3000);

2 结果

五：第三方中间件

1.例子

// ejs 模板引擎
// 1 ：安装 npm i koa-views  --save
// 2: 安装ejs npm i ejs --save
// ejs 作用是啥？渲染数据
// app.use(async function (ctx) {
//   ctx.state = {  //公共的属性放在这里面 放在中间间中
//     session: this.session,
//     title: 'app'
//   };
var views = require('koa-views')
var Koa = require('koa');
var Router = require('koa-router');
var app = new Koa();
var router = new Router()
    // 配置第三方中间件 --view
    // map: {  这种方法的话 。index 要以 html 结尾。
    //     html: 'ejs'
    //   }  ===   extension: 'ejs' 
app.use(views('view', {
    extension: 'ejs' //表示应用ejs ，模板引擎  后缀名 ejs
}))




router.get('/', async(ctx) => {
    // 引用
    // 传递数据 zzx 
    // 输出haahhhh 这是一个 ejs 的模板引擎
    // 唱山歌呢
    let num = 100
    let zzx = ' 唱山歌呢'
    await ctx.render('index', {
        zzx: zzx, //数据传递
        num: num  //数据传递
    })

})



router.get('/news', async(ctx) => {
    // 循环数组
    let arr = ['ddd', 'sss', 'fff', 'ddd']

    await ctx.render('news', {
        list: arr
    })



})
router.get('/login', async(ctx) => {
    ctx.body = '登录页面1'
})

app.use(router.routes());


app.listen(3000);

index.ejs模板 如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <%-	include("head/header.ejs") %>


            haahhhh 这是一个 ejs 的模板引擎

            <h1>
                <%=zzx%>
            </h1>
            <br>
            <h2>条件判断</h2>
            <%if(num>20){%>
                大于20
                <%}
                else{%>
                    小于20
                    <%}
                %>
    </div>
</body>

</html>

2.结果