中间件koa-router

  路由用来分发请求,在前端中尤其是较为复杂的应用中是很重要的一部分。
  我们用原生的方法实现路由,根据路由的不同路径去读取对应文件,需要引用fs模块,然后返回给页面进行渲染。

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

function render(page){
    return  new Promise((resolve,reject)=>{
        let pageUrl = `./page/${page}`
        fs.readFile(pageUrl,"binary",(err,data)=>{
            if(err){
                reject(err)
            }else{
                resolve(data)
            }
        })
    })
}

async function route(url){
    let page = '404.html'
    switch(url){
        case '/':
            page ='index.html'
            break
        case '/index':
            page ='index.html'
            break
        case '/todo':
            page = 'todo.html'
            break
        case '/404':
            page = '404.html'
            break
        default:
            break
    }
    let html = await render(page)
    return html
}

app.use(async(ctx)=>{
    let url = ctx.request.url
    let html = await route(url)
    ctx.body=html
})

app.listen(3000, ()=>{
    console.log('server is starting at port 3000')
})

  上面只是简单的实现了路由,算不上完美,强大的koa中间件生态系统,提供了中间件koa-router来完成路由的配置。
  现在举个简单的例子:

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

router.get('/section', function (ctx, next) {
    ctx.body="欢迎来到section页面"
})
router.get('/index', function (ctx, next) {
    ctx.body="欢迎来到主页面"
})
router.get('/footer', function (ctx, next) {
    ctx.body="欢迎来到footer页面"
})

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

app.listen(3000,()=>{
    console.log('server is starting at port 3000')
})

  我们可以看到,有了中间件配置基本的路由非常简单,下面对koa-router进行深一步探索。

【设置前缀】
  有时候我们想把所有的路径前面都再加入一个级别,比如原来我们访问的路径是http://localhost:3000/footer,现在我们希望在所有的路径前面都加上一个server层级,把路径变成http://localhost:3000/server/footer,这时候就可以使用层级来完成这个功能。路由在创建的时候是可以指定一个前缀的,这个前缀会被至于路由的最顶层,也就是说,这个路由的所有请求都是相对于这个前缀的。

const router = new Router({
      prefix:'/server'
})

【路由层级】
  设置前缀一般都是全局的,并不能实现不同路由的层级,koa-router可以为不同路由设置不同的层级。我们声明了两个路由,第一个是front,第二个是server,然后通过use赋予不同的前层级。

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

let front = new Router()
front.get('/index',async(ctx)=>{
    ctx.body='欢迎来到front index页面'
}).get('/footer',async(ctx)=>{
    ctx.body ='欢迎来到front footer页面'
})

let server = new Router()
server.get('/index',async(ctx)=>{
    ctx.body='欢迎来到server index页面'
}).get('/footer',async(ctx)=>{
    ctx.body ='欢迎来到server footer页面'
})

//装载所有子路由
let router = new Router()
router.use('/front',front.routes(),front.allowedMethods())
router.use('/server',server.routes(),server.allowedMethods())

//加载路由中间件
app.use(router.routes()).use(router.allowedMethods())

app.listen(3000,()=> {
    console.log('server is starting at port 3000')
})


  koa-router传递参数并接收问题也是很重要的一块,其实这块在koa2中的GET与POST请求已经提到了,用ctx.query即可获得路由的传参。

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

router.get('/', function (ctx, next) {
    ctx.body = ctx.query
})

app.use(router.routes()).use(router.allowedMethods())
app.listen(3000, ()=>{
    console.log('server is starting at port 3000')
})

你可能感兴趣的:(中间件koa-router)