Koa 2 初体验（二）

Koa2 路由

Koa2 原生路由的实现

路由在web中的作用不言而喻，而要先实现原生路由，需要的到地址栏输入的路径，然后再根据路径不同进行跳转。而在Koa2中，我们可以用 ctx.requerst.url 来实现获取访问路径：

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

app.use(async(ctx) => {
    const url = ctx.request.url
    ctx.body = url 
})

app.listen(3000, () => {
    console.log('demo3 is run')
})

加入我们的文件结构是这样的：

├── demo3.js
├── package.json
└── view
    ├── register.html
    ├── index.html
    └── login.html

我们就可以这样来实现原生路由：

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

function render(page) {
    return new Promise((resolve, reject) => {
        let viewUrl = `./view/${page}`
        fs.readFile(viewUrl, "binary", (err, data) => {
            console.log(1)
            if (err) {
                reject(err)
            } else {
                resolve(data)
            }
        })
    })
}
async function route(url) {
    let view = '404.html'
    switch(url) {
        case '/':
            view = 'index.html'
            break
        case '/login':
            view = 'login.html'
            break
        case '/register':
            view = 'register.html'
            break
        case '/index':
            view = 'index.html'
            break
        default:
            break
    }
    let html = await render(view)
    return html
}

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

app.listen(3000, () => {
    console.log('demo3 is run')
})

通过上面的代码，我们成功实现了一个路由切换的功能，但这样写无疑是不够优雅的，且也只是在原理上的实现，不足以应付我们日常开发中所遇到的种种问题。因此我们和上次一样，还是需要引入中间件来达成我们的目标。

koa-router

首先我们需要下载 koa-router 中间件：

cnpm i koa-router --save

然后我们就能通过koa-router来优雅的进行路由调换了：

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

home.get('/', async ( ctx ) => {
    let html = `
        

            
/page/helloworld
            
/page/404
        
    `
    ctx.body = html
})
// 子路由2
let page = new Router()
page.get('/404', async ( ctx )=>{
    ctx.body = '404 page!'
}).get('/helloworld', async ( ctx )=>{
ctx.body = 'helloworld page!'
})
// 装载所有子路由
let router = new Router()
router.use('/', home.routes(), home.allowedMethods())
router.use('/page', page.routes(), page.allowedMethods())
// 加载路由中间件
app.use(router.routes()).use(router.allowedMethods())
app.listen(3000)
console.log('demo4 is run')

 

作者：srtian
链接：https://www.jianshu.com/p/71a74c53a225
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。