[Koa2 系列 06] 原生路由實現

會在標題就說「原生」就代表我們有中間件可以用
不過為了了解原理，還是來看看怎麼用原生撰寫路由

取得路由網址

路由簡單來說就是
「根據不同的目標網址，進行跳轉」

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

app.use(async (ctx) => {
  let url = ctx.request.url
  ctx.body = url
})
app.listen(3000)

藉由上面的程式碼，我們可以取得 url path
如果造訪 http://127.0.0.1:3000/user/199
就會取得 user/199 的字串，有其他後端框架經驗的人
應該不難發現，這就是路由的進入點

實現路由方法

首先我們需要引入 fs 模組 來讀取文件
先貼上這次的範例程式碼

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

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

async function route(url){
    let page = '404.html'
    switch(url){
        case '/':
        case '/index':
            page ='index.html'
            break
        case '/todo':
            page = 'todo.html'
            break
        default:
	        page = '404.html'
            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('starting at 3000')

接下來就照著程式邏輯來跑

初始步驟

在專案根目錄下建立一個資料夾 view 並且建立幾個 html 檔案
作為等等不同路由路徑要顯示的內容

取得路由網址

可以看到我們用了

let url = ctx.request.url;

把當前的路徑指定給 url

指向不同路由路徑

使用 await 方法把剛剛的 url 傳入給 route 方法
而 route 方法中根據不同的路由網址指定不同內容給 page 變數
page 可以視為我們路由要回傳的頁面內容
同樣使用 await 方法把剛剛的 page 傳入呼叫另一個方法 render

渲染畫面

而在 render 方法中
我們把剛剛的 page 組合成專案中檔案的路徑 pageUrl
接著要使用 node.js 提供的文件係同模組 fs
最上方記得要先 require 模組！
呼叫 fs.readFile 使用 utf8 編碼來讀取剛剛 pageUrl 位置的檔案
並且這邊會做錯誤處理
失敗的回傳錯誤，若是讀取成功，就把指定的文件，這邊是我們的 html 模板回傳
而一層一層的回傳之後
又是熟悉的

ctx.body

顯示剛剛歷經層層關卡取得的模板文件

這就是最基本也最基礎的路由實現
而下一篇我們要開始學習使用別人造好的輪子
也是一般開發上會使用的方法
注意：這邊是最簡單的原理，實際應用的網址會複雜很多，這種做法不一定可行