浅析koa路由及其中间件

Koa路由

什么是路由?

一路径加一方法(路径URL+特定HTTP方法),也就是说路由是根据不同的URL地址,加载不同的页面并实现不同的功能

路由的安装

Koa中的路由我们需要安装koa-router路由模块来实现,在cmd中输入如下指令

安装指令:npm install --save koa-router

路由的匹配

安装完成后,我们进行路由的匹配,主要分为三步:

  1. 引入所需模块
  2. 规划路由
  3. 启动路由

先看第一步:引入所需模块

var Koa=require(“koa”);              //*引入koa框架*

var router=require(“koa-router”);    //*引入路由模板*

var app=new koa();

再看一下第三步: 启动路由

app.use(router.routes())             //*使用router.routes()必须先定义好它的routes*

app.use(router.allowedMethods())     //*可配置可不配置,官方文档的推荐用法*

具体的定义也就是 规划路由

router.get('/',async(ctx)=>{
    ctx.body="首页";
})
router.get('/news',async(ctx)=>{
    ctx.body="新闻页面";
})

①这里ctx是context的缩写,在中文翻译中是上下文的意思,我们可以把它理解为request和response沟通的环境,req和res这两个属性是之前express框架使用的方式,现在koa把它们都封装到ctx中
②body是http协议中的响应体,header是指响应头
③ctx.body=ctx.res.body=ctx.response.body(ctx.body属性也就是发送给用户的内容)
④‘/’表示首页
最后一定不要忘了连接端口!

app.listen(3002);                    //这里选了3002端口

整段代码是这个样子的:

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

router.get('/',async(ctx)=>{
    ctx.body="首页";
})
router.get('/news',async(ctx)=>{
    ctx.body="新闻页面";
})

app.use(router.routes());
app.listen(3002);

测试一下,在网址里输入localhost:3002看一下效果
image.png
再加个news看看效果
image.png
这样一个简单的路由使用就完成了~

koa动态路由

请求方式——http://域名/模块名/参数(下面的例子中设置了两个参数)

router.get('/newscontent',async(ctx)=>{
   console.log("这是新闻2");
})
router.get('/newscontent/:aid/:cid',async(ctx)=>{
    console.log(ctx.params);
    ctx.body="新闻详情";
})                               //注意一下这里两个参数的设置方式

瞅一眼效果
image.png
后台是这个样子的
在这里插入图片描述

中间件

什么是中间件

配合路由匹配完成所做的一系列操作就叫中间件

中间件的功能

执行任何代码
修改请求和响应对象
终结请求-相应循环
调用堆栈里的下一个中间件

应用级中间件

app.use是express调用中间件的方法,所谓中间件就是处理HTTP请求的参数,用来完成各种特定的任务比如检查用户是否登录,分析数据,以及其他的需要最终将数据发送给 用户之前完成的任务。app.use()里面使用的参数主要是函数,这个使用并不是函数调用而是使能的意思,当用户在浏览器发出请求的时候这部分函数才会启用,进行过滤处理

/*匹配路由前打印日期*/
app.use(async(ctx,next)=>{
    ctx.body='中间件';
    console.log(new Date());
    await next();/*当前路由完成以后继续向下匹配,这个中间件可以匹配任何路由,但如果不写next这个路由被匹配了就不会向下匹配*/
})

注:这里的参数next是koa框架调用中间件的方式,直接执行app.use之后再执行下一个app.use,下一个app.use也就是next参数,它是一个函数

路由中间件

路由中间件我们在前面就已经零零星星的见过它了,就是下面这些

router.get('/',async(ctx)=>{
    ctx.body="首页";
})

router.get('/news',async(ctx)=>{
    ctx.body="新闻列表页面";
})

router.get('/newscontent/:aid/:cid',async(ctx)=>{
    console.log(ctx.params);
    ctx.body="新闻详情";
})

错误机制处理中间件

在程序执行过程中,会不可避免的出现一些无法预料的失误,错误中间件就是一个集中处理错误的地方

app.use(async(ctx,next)=>{
    next();
    if(ctx.status==404){
        ctx.status=404;
        ctx.body="这是一个404界面";
    }else{
        console.log(ctx.url);
    }
})

这串代码中显示的便是当访问的数据不存在时,在浏览器上显示这是一个404界面,作为一种对错误的处理

此外还有一个第三方中间件,虽然不会用,但有必要在中间件里留下它的姓名

koa中间件的执行顺序——洋葱模型

先来个图,这个执行顺序的样子就很像横着切开的洋葱,一层一层的
image.png

中间件函数队列,会在最后一个中间件或一个没有调用next的中间件那里停止
koa官方文档上把外层的中间件称为"上游",内层的中间件为"下游"
一般的中间件都会执行两次,调用next之前为第一次,调用next时把控制传递给下游的下一个中间件。当下游不再有中间件或者没有执行next函数时,就将依次恢复上游中间件的行为,让上游中间件执行next之后的代码–洋葱模型

举个例子:

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

//Koa中间件
app.use(async (ctx,next)=>{
    console.log('1、这是第一个中间件01');
    await next();

    console.log('5、匹配路由完成以后又会返回来执行中间件');
})

app.use(async (ctx,next)=>{
    console.log('2、这是第二个中间件02');
    await next();

    console.log('4、匹配路由完成以后又会返回来执行中间件');
})

router.get('/',async (ctx)=>{

    ctx.body="首页";

})
router.get('/news',async (ctx)=>{

    console.log('3、匹配到了news这个路由');
    ctx.body='这是一个新闻';
})


app.use(router.routes());   /*启动路由*/
app.use(router.allowedMethods());
app.listen(3002);

去后台看一下数据,界面如下:
在这里插入图片描述

最后转一篇超详细的博客,举了很多个实例,可以更深入的理解koa中间件执行顺序
koa洋葱模型的实例

以上如有写的不正确的地方,还请大家指出,希望可以帮到大家

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值