上一篇中做了基礎的路由
但一般在撰寫中,路由不會只有一層啊
通常網址會像是這樣 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
,並且聲明我們使用 /admin
、page
作為前綴
而子路由內容則是第二個參數
那第二個參數又在哪呢?沒錯,當然要自己寫啊!
子路由
剛剛我們分別為兩個路由群組 /admin/
、/page/
聲明了
分別要用 admin
和 page
兩個路由群組
因為 javascript 的特性,必須在呼叫前定義好物件
這也是我在一開始想不通原因
一直以來都是先想好第一層路由再慢慢往下寫
而上方的程式碼,可以看到先定義了子路由
而為了我自己下次看得懂,我這邊的解釋也就不從第一行程式碼開始講
而是從第一層路由開始
就拿 admin
子路由來說明吧,page 做的是一樣的事情
admin.get('/user', async (ctx) => {
ctx.body = "Admin user"
}).get('/article', async (ctx) => {
ctx.body = 'Admin article'
})
這個子路由接收兩個 get
方法下的請求 user
和 article
做的事情很單純,就是在內容顯示文字
而 page 路由的文字我有做一些變化來分辨
加載路由中間件
.use(router.routes())
.use(router.allowedMethods());
跟上一篇做的事情一樣,使用我們定義出來的 router
物件中 routes()
方法加載
並且啟用 allowedMethods()
,因為他是全域定義
所以被包在父路由 router
內的其他子路由 admin
、page
都可以使用
若是不在這邊啟用,也可以在父路由定義路由群組的時候
分別針對別子路由啟用,用法如下
router.use('/admin',admin.routes(),admin.allowedMethods());
router.use('/page',page.routes(),page.allowedMethods());
可以看到,跟一般呼叫方法並沒有不一樣
都是呼叫指定的路由 物件
中的指定方法
留言
張貼留言