[Koa2 系列 08] Koa-router(中)- 路由群組

[Koa2 系列 08] Koa-router(中)- 路由群組

上一篇中做了基礎的路由
但一般在撰寫中,路由不會只有一層啊
通常網址會像是這樣 127.0.0.1/admin/user 是多層的
這一篇就要來說說這個

前綴

最暴力的做法

const router = new Router( {
      prefix:'/admin'
})

這下你所有的路由都得加上前綴了,比如說 127.0.0.1/admin/todo
但這通常不是我們要做的啊
我們通常是需要把一群相似功能的路由,比如說使用者或是文章相關的路由統整起來
那就是接下來要介紹的 路由群組

子路由

這東西放到 Laravel 裡面看就是路由群組 Route::group
但在設計時候慣有的思考順序和程式區塊順序有點不同
一開始讓我多花了一些時間理解,底下我會用我最終的思考脈絡來說明

先上程式碼

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

let admin = new Router()
admin.get('/user', async (ctx) => {
    ctx.body = "Admin user"
}).get('/article', async (ctx) => {
    ctx.body = 'Admin article'
})

let page = new Router();
page.get('/user', async(ctx) => {
    ctx.body = "Page user"
}).get('/article', async(ctx) => {
    ctx.body = 'Page article'
})

// 定義路由群組
let router = new Router();
router.use('/admin', admin.routes());
router.use('/page', page.routes());

// 加載路由中間件
app
	.use(router.routes())
	.use(router.allowedMethods());

app.listen(3000,()=>{
    console.log('[demo] server is starting at port 3000');
});

以範例來說,我所規劃的路由是

定義兩個路由群組「admin」和「page」
兩個路由群組內都有同樣的子路由「user」和「article」
所以最終的有效網址是 admin/user、admin/artile、page/user、page/article

定義路由群組

引入 koa-router
並且定義好最外層的路由,這攘我想起 react 的 component 規劃

let router = new  Router();
router.use('/admin', admin.routes());
router.use('/page', page.routes());

聲明一個路由變數 route,並且聲明我們使用 /adminpage作為前綴
而子路由內容則是第二個參數
那第二個參數又在哪呢?沒錯,當然要自己寫啊!

子路由

剛剛我們分別為兩個路由群組 /admin//page/ 聲明了
分別要用 adminpage 兩個路由群組
因為 javascript 的特性,必須在呼叫前定義好物件
這也是我在一開始想不通原因
一直以來都是先想好第一層路由再慢慢往下寫
而上方的程式碼,可以看到先定義了子路由
而為了我自己下次看得懂,我這邊的解釋也就不從第一行程式碼開始講
而是從第一層路由開始

就拿 admin 子路由來說明吧,page 做的是一樣的事情

admin.get('/user', async (ctx) => {
    ctx.body = "Admin user"
}).get('/article', async (ctx) => {
    ctx.body = 'Admin article'
})

這個子路由接收兩個 get 方法下的請求 userarticle
做的事情很單純,就是在內容顯示文字
而 page 路由的文字我有做一些變化來分辨

加載路由中間件

.use(router.routes())
.use(router.allowedMethods());

跟上一篇做的事情一樣,使用我們定義出來的 router 物件中 routes() 方法加載
並且啟用 allowedMethods(),因為他是全域定義
所以被包在父路由 router 內的其他子路由 adminpage 都可以使用
若是不在這邊啟用,也可以在父路由定義路由群組的時候
分別針對別子路由啟用,用法如下

router.use('/admin',admin.routes(),admin.allowedMethods());
router.use('/page',page.routes(),page.allowedMethods());

可以看到,跟一般呼叫方法並沒有不一樣
都是呼叫指定的路由 物件 中的指定方法

留言