从零一起学koa2(2)---原生路由的实现

ctx.request.url

想实现原生路由，就需要得到地址栏输入的路径，koa2用ctx.request.url就可以获取到地址栏中的路径。新建app.js文件，输入下面的代码。

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

app.use( async ( ctx ) => {
  let url = ctx.request.url
  ctx.body = url
})
app.listen(3000);
console.log('koa2 is starting at port 3000');

执行node app.js访问 http://localhost:3000/ 页面会输出 /，访问http://localhost:3000/buppt会输出/buppt。
说明ctx.request.url 获取到了我们在地址栏中输入的url地址。

原生路由实现

原生路由的实现需要引入fs模块来读取文件。然后再根据路由的路径去读取相应的文件，返回给页面，进行渲染。如果不清楚fs模块可以看廖老师的讲解。

新建app.js文件，先将结构写好。

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

app.use(async(ctx)=>{
    let url = ctx.request.url;
    let html = await route(url);
    
    ctx.body=html;
})
app.listen(3000);
console.log('starting at 3000');

然后写route函数，route函数的作用是根据用户在地址栏输入的路由，告诉render函数去哪个html文件中进行内容读取。
默认设置为404页面，因为输入的路由如果没有设置的话，应该返回404页面。

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;
}

这三个页面就随便写一下好了。

//index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <h1>koa2 demo index page</h1>
    <p>this is a index page</p>
    <ul>
      <li><a href="/">/</a></li>
      <li><a href="/index">/index</a></li>
      <li><a href="/todo">/todo</a></li>
      <li><a href="/404">/404</a></li>
      <li><a href="/others">/others</a></li>
    </ul>
</body>
</html>
//404.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>404</title>
</head>
<body>
    <h1>koa2 demo 404 page</h1>
    <p>this is a 404 page</p>
</body>
</html>
//todo.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>todo</title>
</head>
<body>
    <h1>koa2 demo todo page</h1>
    <p>this is a todo page</p>
</body>
</html>

最后写render函数，render函数根据route函数的判断，去对应的html页面中读取页面内容。

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

执行node app.js 查看http://localhost:3000/ 页面，也可以输入其他没有设置的地址如：http://localhost:3000/buppt ，返回的应该是404页面。