koa原生路由的实现

1 .要想实现原生路由，就需要得到他的地址栏输入的地址，根据路径不同进行不同的跳转 ， ctx.request.url就可以实现，

const Koa=require('koa')
const app= new Koa()
app.use(async(ctx)=>{
let url = ctx.request.url
cyx.body=url
})
app.listen(3000)

这就是一个最基本的获取路径的方法

2 .原生路由的实现，需要引入fs模块来读取文件，然后根据路由的路径去读取，最后返回给页面进行渲染。

image.png

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){
    console.log(url);
    let page='404.html'
    switch(url){
        case '/':
        page='index.html';
        break;

        case '/index.html':
        page='index.html';
        break;

        case '/my.html':
        page='my.html';
        break;
        
        case '/404.html':
        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('app start ');

效果图：可以看到已经可以根据路径去回显不同的文件了

image.png