Koa教學(二)-Routing&Logger

Routing路由&logger記錄
- Routing
- Logger
  - 安裝koa-logger
  - 使用koa-logger

Routing路由&logger記錄

Routing與logger在網站的設計上是十分重要的兩個部分。Routing控制了網站URL對應到該執行的function，良好設計的routing不僅可以讓開發者們對於代碼的維護更加容易，也讓使用者可以預期網站的行為，加強SEO等等。至於Logger則是我們觀測使用者行為以及檢測程式bug一個良好的管道，曾經有好幾次的經驗，都是透過觀察logger給出的訊息才得以將問題抽絲剝繭般一一的解決。

Routing

Koa並不內建Routing的設計，但是我們有許多優良的中間件可以使用，我們選用alexmingoia/koa-router這套好用的中間件，它能夠幫助我們行雲流水般的設計不同Method的路由，我們僅需要簡單的配置後就可以立即開始使用。

安裝koa-router

我們使用yarn來安裝koa-router套件。

    
yarn add koa-router @types/koa-router

使用koa-router

    
// router.ts
import Koa = require('koa');
import Router = require('koa-router');

const app = new Koa();
const router = new Router();                            // 建立router實例

router
.get('/', async (ctx) => {                              // 設計 GET / 的行為
    ctx.body = 'Root page';
})
.post('/hello', async (ctx) => {                        // 設計 POST /hello 的行為
    ctx.body = 'Hello page';
});

app.use(router.routes()).use(router.allowedMethods());  // 將我們設計的Router串接在app上

app.listen(3000);

Trace code:

第6行: 建立一個router實例
第9~11行: 當一個Get請求/，我們回傳Root page
第12~14行: 當一個Get請求/hello，我們回傳Hello page
第16行: 從9~14行我們都是在製作router這個中間件，我們最後必須讓我們的app使用我們做好的中間件。

注意：首字大寫的Router，而實例變數使用的是首字小寫的router。

URL parameters

常常會想要在設計router的時候給一些變數，例如: /user/John代表John使用者的使用者界面，/user/Mary代表Mary使用者的使用者界面，此時可以這樣子設計router

    
// URLparameters.ts
import Koa = require('koa');
import Router = require('koa-router');

const app = new Koa();
const router = new Router();

router.get('/user/:name', async (ctx) => {      // 使用 :name 標註這個url變數
    ctx.body = `This is ${ctx.params.name}'s page.`;      // 使用 ctx.params 將這個url變數取出
});

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

app.listen(3000);

當使用者瀏覽/user/John時，就會回傳This is John's page.

可能有人還不懂Http的方法們所代表的意義，我們一般瀏覽網頁使用到的是GET方法，在瀏覽器的網址列輸入http://localhost/進入網頁，其實就是對server進行GET方法，而POST方法多用在表單的傳送，Ajax請求等等用途。其他還有幾種不同的方法，一般來說我們最大量使用的就是GET跟POST，但是在某些場合，如RestfulAPI設計就會用到大量不同的Http方法。
詳細Http methods的介紹可以參考MDN: HTTP 请求方法

Logger

Logger會記錄上站使用者的資訊，我們可以透過觀察logger了解使用者的行為，以及抓出程式的bug。我們選用koa-logger這套中間件來做到這件事。

安裝koa-logger

    
yarn add koa-logger @types/koa-logger

使用koa-logger

我們延續剛剛的範例

    
// logger.ts
import Koa = require('koa');
import Router = require('koa-router');
import Logger = require('koa-logger');

const app = new Koa();
const router = new Router();

app.use(Logger());      // 將Logger中間件給接上app

router.get('/user/:name', async (ctx) => { 
    ctx.body = `This is ${ctx.params.name}'s page.`;
});

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

app.listen(3000);

主要的重點就是在第9行時，我們需要將Logger()中間件給app使用。

結果

References:
1. alexmingoia/koa-router
2. koajs/logger 所有範例中的程式碼皆放置在koa-tutorial-sample專案中