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页面。