【node进阶】深度解析Koa框架---路由|静态资源|获取请求参数

前端小白在前进

已于 2022-11-18 10:51:23 修改

阅读量7.2k

点赞数 204

分类专栏： node.js入门到精通文章标签：中间件 node.js javascript postman koa

于 2022-11-02 10:00:00 首次发布

本文链接：https://blog.csdn.net/m0_52040370/article/details/127630295

版权

node.js入门到精通专栏收录该内容

20 篇文章 96 订阅

订阅专栏

✅ 作者简介：一名普通本科大三的学生，致力于提高前端开发能力
✨ 个人主页：前端小白在前进的主页
🔥 系列专栏： node.js学习专栏
⭐️ 个人社区 : 个人交流社区
🍀 学习格言: ☀️ 打不倒你的会使你更强！☀️
💯 刷题网站：这段时间有许多的小伙伴在问有没有什么好的刷题网站，博主在这里给大家推荐一款刷题网站:👉点击访问牛客网👈牛客网支持多种编程语言的学习，各大互联网大厂面试真题，从基础到拔高，快来体验一下吧！

在这里插入图片描述

🔥前言

上文中我们已经对koa框架有了一个简单的理解，并且也懂得了koa框架的优点和不足，同时在koa框架中路由的使用、静态资源的访问、获取请求的参数都有了一定的改变，该文章将讲述这三点！

路由

Koa框架中与Express的区别在这里也有一个很大的展现。在Express框架中路由模块是内置模块，而在Koa中，路由模块非内置模块，需要单独的去下载。

koa路由的基本使用

安装Koa框架路由模块(koa-router)：

npm i koa-router

安装成功后进行引用：

const Koa = require("koa")
const Router = require("koa-router")

const app = new Koa()
const router = new Router()

router.post("/list",(ctx)=>{
    ctx.body=["111","222","333"]
})
app.use(router.routes()).use(router.allowedMethods())
app.listen(3000)

通过以上的代码可以看出来，在koa框架中需要用到关键字new来实例化一个对象，才能进行调用。在应用级中间件中有一个方法router.routes()，它的作用是将路由对象中所有的路由模块都挂载成为应用级中间件

router.allowedMethods作用

在上方的代码中大家还看到了不认识的方法router.allowedMethods()，router.allowedMethods()中间件，主要用于 405 Method Not Allowed 这个状态码相关。
如果不加这个中间件，如果接口是get请求，而前端使用post请求，会返回 404 状态码，接口未定义。如果加了这个中间件，这种情况时，会返回405 Method Not Allowed ，提示 request method 不匹配，并在响应头返回接口支持的请求方法，更有利于调试

例如: 我们定义一个 /list 接口，他需要使用post请求方法。这里我们先通过get方法来请求这个接口试试。

const koa = require('koa');
const Router = require('koa-router')
 
const app = new koa()
const router = new Router()
 
router.post('/list', ctx => {
  ctx.body = ["111","222","333"]
})
 
app.use(router.routes()).use(router.allowedMethods())
 
app.listen('3000', () => {
  console.log('server listen on 3000 port')
})

在这里插入图片描述
我们通过network查看后该接口报了405 Method Not Allowed的错误，在告诉我们该方法不被允许，并且提示我们Allow:POST,允许post方法。这样的话可以很方便的帮助我们开发，寻找错误更加高效。

请求方式

Koa-router 请求方式： get、 put 、 post 、 patch 、 delete 、 del ，而使用方法就是 router.方式() ，比如 router.get() 和 router.post() 。而 router.all() 会匹配所有的请求方法。

const Koa = require("koa")
const Router = require("koa-router")

const app = new Koa()
const router = new Router()

router.get("/user",(ctx)=>{
    ctx.body=["aaa","bbb","ccc"]
})
router.put("/user/:id",(ctx)=>{
    ctx.body={ok:1,info:"put user success"}
})
router.post("/user",(ctx)=>{
    ctx.body={ok:1,info:"user post success"}
})
router.del("/user/:id",(ctx)=>{
    ctx.body={ok:1,info:"user del success"}
})


app.use(router.routes()).use(router.allowedMethods())
app.listen(3000)

我们在这里使用postman测试其中一个方式即可:
在这里插入图片描述

拆分路由

如果我们书写了很多个路由接口，都写到一个js文件中，未免非常的不合理，Koa框架与express框架一样，可以进行路由拆分。

在这里我们通过一个demo展示：

demo结构

user.js路由文件

const Router= require('koa-router')
const router = new Router()
//路由中间件
router.post('/',(ctx,next)=>{
    console.log(ctx.request.body);  //获取前端传来的参数
    ctx.body = {
        ok : 1,
        info : "add user success"
    }
})
//获取信息
router.get('/',(ctx,next)=>{
    //获取前端传来的数据
    console.log(ctx.query,ctx.querystring);
    ctx.body = ['aaa','vvv','ccc']
})

router.put('/:id',(ctx,next)=>{
    console.log(ctx.params);  //获取动态路由id
    ctx.body = {
        ok : 1,
        info : "put user success"
    }
})
router.delete('/:id',(ctx,next)=>{
    ctx.body = {
        ok : 1,
        info : "delete user success"
    }
})

module.exports = router

home.js路由文件

const Router= require('koa-router')
const router = new Router()

//获取信息
router.get('/',(ctx,next)=>{
    ctx.body = `
    <html>
        <h1>home页面</h1>
    </html>
    `
})

module.exports = router

list.js路由文件

const Router= require('koa-router')
const router = new Router()

//路由中间件
router.post('/',(ctx,next)=>{
    ctx.body = {
        ok : 1,
        info : "add list success"
    }
})
//获取信息
router.get('/',(ctx,next)=>{
    ctx.body = ['111','222','333']
})

router.put('/:id',(ctx,next)=>{
    console.log(ctx.params);  //获取动态路由id
    ctx.body = {
        ok : 1,
        info : "put list success"
    }
})
router.delete('/:id',(ctx,next)=>{
    ctx.body = {
        ok : 1,
        info : "delete list success"
    }
})

module.exports = router

路由集合文件(index.js 注意: 这个文件是routes文件夹里的)

const Router = require('koa-router')
const userRouter = require('./user')
const listRouter = require('./list')
const homeRouter = require('./home.js')
const router = new Router()

router.use("/user",userRouter.routes(),userRouter.allowedMethods())
router.use('/list',listRouter.routes(),listRouter.allowedMethods())
router.use('/home',homeRouter.routes(),listRouter.allowedMethods())

module.exports = router

项目入口文件(index.js)

const Koa = require('koa')
const app = new Koa(

//先注册路由级组件
const router = require('./routes')  //在这里会默认访问routes文件夹下的index.js文件
//应用级组件

//将router里所有的路由注册成应用级别的中间件
app.use(router.routes()).use(router.allowedMethods())

app.listen(3000)

路由前缀

const Router = require('koa-router')
const userRouter = require('./user')
const listRouter = require('./list')
const homeRouter = require('./home.js')
const router = new Router()

//统一加前缀
router.prefix("/api")

router.use("/user",userRouter.routes(),userRouter.allowedMethods())
router.use('/list',listRouter.routes(),listRouter.allowedMethods())
router.use('/home',homeRouter.routes(),listRouter.allowedMethods())

module.exports = router

直接添加一个方法router.prefix()即可，这样的话就可以添加你的自定义前缀了。

路由重定向

const Router = require('koa-router')
const userRouter = require('./user')
const listRouter = require('./list')
const homeRouter = require('./home.js')
const router = new Router()

router.use("/user",userRouter.routes(),userRouter.allowedMethods())
router.use('/list',listRouter.routes(),listRouter.allowedMethods())
router.use('/home',homeRouter.routes(),listRouter.allowedMethods())
//重定向
//写法1 
router.redirect('/', '/home');
//写法2
router.get("/",(ctx)=>{
    ctx.redirect("/home")
})

module.exports = router

使用方法router.redirect()即可，在这里我们访问http://localhost:3000/便会自动定位到http://localhost:3000/home页面中去。

静态资源

安装koa-static中间件:

npm i koa-static

示例代码如下:

const Koa = require('koa')
const path = require('path')
const static = require('koa-static')

const app = new Koa()

app.use(static(
  path.join( __dirname,  "public")
))


app.use( async ( ctx ) => {
  ctx.body = 'hello world'
})

app.listen(3000, () => {
  console.log('[demo] static-use-middleware is starting at port 3000')
})

获取请求参数

get参数

在koa中，获取GET请求数据源头是koa中request对象中的query方法或querystring方法，query返回的是格式化好的参数对象，querystring返回的是请求字符串，由于ctx对request的API有直接引用的方式，所以获取GET请求数据有两个途径。

从上下文中直接获取请求对象ctx.query，返回如 { a:1, b:2 }
请求字符串 ctx.querystring，返回如 a=1&b=2
从上下文的request对象中获取请求对象ctx.request.query，返回如{ a:1, b:2 }
请求字符串 ctx.request.querystring，返回如 a=1&b=2

补充：
获取动态路由的参数，执行请求对象: ctx.params即可!

post参数

对于POST请求的处理，koa-bodyparser中间件可以把koa2上下文的formData数据解析到ctx.request.body中。

安装koa-bodyparser中间件:

npm i koa-bodyparser

使用示例:

const Koa = require('koa')
const app = new Koa()
const bodyParser = require('koa-bodyparser')
//先注册路由级组件
const router = require('./routes')
//应用级组件
//将router里所有的路由注册成应用级别的中间件
app.use(bodyParser())  //获取前端传来的post参数
app.use(router.routes()).use(router.allowedMethods())

app.listen(3000)

小结

本篇文章讲解了koa框架中的路由、静态资源、获取请求参数，接下来的文章将对之前express框架中的知识进行“Koa化”,同时博主已经准备进行全栈项目的开发练手了,项目基于vue(2和3还没有想好) + Element ui + node.js + mysql开发，希望大家后期可以持续关注哦！

在这里插入图片描述

前端小白在前进

关注

204
点赞
踩
181

收藏

觉得还不错? 一键收藏
打赏
396
评论
【node进阶】深度解析Koa框架---路由|静态资源|获取请求参数

本篇文章讲解了koa框架中的路由、静态资源、获取请求参数，接下来的文章将对之前express框架中的知识进行“Koa化”,Koa框架中与Express的区别在这里也有一个很大的展现。在Express框架中路由模块是内置模块，而在Koa中，路由模块是非内置模块，需要单独的去下载。
复制链接

扫一扫