路由用来分发请求,在前端中尤其是较为复杂的应用中是很重要的一部分。
我们用原生的方法实现路由,根据路由的不同路径去读取对应文件,需要引用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')
})