iKcamp團隊製做｜基於Koa2搭建Node.js實戰（含視頻）☞ 路由koa-router

路由koa-router——MVC 中重要的環節：Url 處理器

🇨🇳 iKcamp 製做團隊

原創做者：大哼、阿幹、三三、小虎、胖子、小哈、DDU、可木、晃晃
文案校對：李益、大力萌、Au、DDU、小溪裏、小哈
風采主播：可木、阿幹、Au、DDU、小哈
視頻剪輯：小溪裏
主站運營：給力xi、xty
教程主編：張利濤

---

視頻地址：https://www.cctalk.com/v/15114923889954

文章

路由 koa-router

上一節咱們學習了中間件的基本概念，本節主要帶你們學習下 koa-router 路由中間件的使用方法。

路由是用於描述 URL 與處理函數之間的對應關係的。好比用戶訪問 http://localhost:3000/，那麼瀏覽器就會顯示 index 頁面的內容，若是用戶訪問的是 http://localhost:3000/home，那麼瀏覽器應該顯示 home 頁面的內容。

要實現上述功能，若是不借助 koa-router 或者其餘路由中間件，咱們本身去處理路由，那麼寫法可能以下所示：

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

app.use(async (ctx, next) => {
    if (ctx.request.path === '/') {
        ctx.response.body = '<h1>index page</h1>';
    } else {
        await next();
    }
});
app.use(async (ctx, next) => {
    if (ctx.request.path === '/home') {
        ctx.response.body = '<h1>home page</h1>';
    } else {
        await next();
    }
});
app.use(async (ctx, next) => {
    if (ctx.request.path === '/404') {
        ctx.response.body = '<h1>404 Not Found</h1>';
    } else {
        await next();
    }
});

app.listen(3000, ()=>{
  console.log('server is running at http://localhost:3000')
})

把上述代碼複製並覆蓋到 app.js 中，而後執行如下命令啓動 node 程序:

node app.js

啓動以後在瀏覽器中分別訪問 http://localhost:3000/、http://localhost:3000/home、http://localhost:3000/404 就能看到相應的頁面了。

上述 app.js 的代碼中，由 async 標記的函數稱爲『異步函數』，在異步函數中，能夠用 await 調用另外一個異步函數，async 和 await 這兩個關鍵字將在 ES7 中引入。參數 ctx 是由 koa 傳入的，咱們能夠經過它來訪問 request 和 response，next 是 koa 傳入的將要處理的下一個異步函數。

注意： 因爲 node 在 v7.6.0 中才支持 async 和 await，因此在運行 app.js 以前請確保 node 版本正確，或者使用一些第三方的 async 庫來支持。

這樣的寫法可以處理簡單的應用，可是，一旦要處理的 URL 多起來的話就會顯得特別笨重。因此咱們能夠藉助 koa-router 來更簡單的實現這一功能。
下面來介紹一下如何正確的使用 koa-router。

安裝 koa-router

經過 npm 命令直接安裝：

npm i koa-router -S

-S 或者 --save 是爲了安裝完成以後可以在 package.json 的 dependencies 中保留 koa-router，以便於下次只須要執行 npm i 或者 npm install 就可以安裝全部須要的依賴包。

基本使用方法

若是要在 app.js 中使用 koa-router 來處理 URL，能夠經過如下代碼來實現：

const Koa = require('koa')
// 注意 require('koa-router') 返回的是函數:
const router = require('koa-router')()
const app = new Koa()

// 添加路由
 router.get('/', async (ctx, next) => {
    ctx.response.body = `<h1>index page</h1>`
})

router.get('/home', async (ctx, next) => {
    ctx.response.body = '<h1>HOME page</h1>'
})

router.get('/404', async (ctx, next) => {
    ctx.response.body = '<h1>404 Not Found</h1>'
})

// 調用路由中間件
app.use(router.routes())

app.listen(3000, ()=>{
  console.log('server is running at http://localhost:3000')
})

運行 app.js:

node app.js

執行完上面的操做以後，咱們在瀏覽器中訪問 http://localhost:3000/：

在瀏覽器中訪問 http://localhost:3000/home：

在瀏覽器中訪問 http://localhost:3000/404：

經過上面的例子，咱們能夠看到和以前不使用 koa-router 的顯示效果是同樣的。不過使用了 koa-router 以後，代碼稍微簡化了一些，並且少了 if 判斷，還有省略了 await next()（由於沒有其餘中間件須要執行，因此這裏就先省略了）。

固然，除了 GET 方法，koa-router 也支持處理其餘的請求方法，好比：

router
  .get('/', async (ctx, next) => {
    ctx.body = 'Hello World!';
  })
  .post('/users', async (ctx, next) => {
    // ... 
  })
  .put('/users/:id', async (ctx, next) => {
    // ... 
  })
  .del('/users/:id', async (ctx, next) => {
    // ... 
  })
  .all('/users/:id', async (ctx, next) => {
    // ... 
  });

在 HTTP 協議方法中，GET、POST、PUT、DELETE 分別對應 查，增，改，刪，這裏 router 的方法也一一對應。一般咱們使用 GET 來查詢和獲取數據，使用 POST 來更新資源。PUT 和 DELETE 使用比較少，可是若是大家團隊採用 RESTful架構，就比較推薦使用了。咱們注意到，上述代碼中還有一個all 方法。all 方法用於處理上述方法沒法匹配的狀況，或者你不肯定客戶端發送的請求方法類型。

舉個例子，假設客戶端使用 jQuery 來開發，有以下幾個 ajax 請求：

// 優先匹配和 router.get 方法中 url 規則同樣的請求，若是匹配不到的話就匹配和 router.all 方法中 url 規則同樣的請求。
$.ajax({
  method: "GET",
  url: "some.php",
  data: { name: "John" }
}).done(function( msg ) {
  // do something 
});

// 優先匹配和 router.post 方法中 url 規則同樣的請求，若是匹配不到的話就匹配和 router.all 方法中 url 規則同樣的請求。
$.ajax({
  method: "POST",
  url: "some.php",
  data: { name: "John" }
}).done(function( msg ) {
  // do something 
});

上面例子中兩個方法最主要的區別就是 ajax 中 method 的值，method 的值和 router 的方法一一對應。上述代碼中沒有處理異常，當請求都沒法匹配的時候，咱們能夠跳轉到自定義的 404 頁面，好比：

router.all('/*', async (ctx, next) => {
  ctx.response.status = 404;
  ctx.response.body = '<h1>404 Not Found</h1>';
});

* 號是一種通配符，表示匹配任意 URL。這裏的返回是一種簡化的寫法，真實開發中，咱們確定要去讀取 HTML 文件或者其餘模板文件的內容，再響應請求。關於這部分的內容後面的章節中會詳細介紹。

其餘特性

命名路由

在開發過程當中咱們可以很方便的生成路由 URL：

router.get('user', '/users/:id', function (ctx, next) {
  // ... 
});

router.url('user', 3);
// => 生成路由 "/users/3" 
 
router.url('user', { id: 3 });
// => 生成路由 "/users/3" 
 
router.use(function (ctx, next) {
  // 重定向到路由名稱爲 「sign-in」 的頁面 
  ctx.redirect(ctx.router.url('sign-in'));
})

router.url 方法方便咱們在代碼中根據路由名稱和參數(可選)去生成具體的 URL，而不用採用字符串拼接的方式去生成 URL 了。

多中間件

koa-router 也支持單個路由多中間件的處理。經過這個特性，咱們可以爲一個路由添加特殊的中間件處理。也能夠把一個路由要作的事情拆分紅多個步驟去實現，當路由處理函數中有異步操做時，這種寫法的可讀性和可維護性更高。好比下面的示例代碼所示：

router.get(
  '/users/:id',
  function (ctx, next) {
    return User.findOne(ctx.params.id).then(function(user) {
      // 首先讀取用戶的信息，異步操做
      ctx.user = user;
      next();
    });
  },
  function (ctx) {
    console.log(ctx.user);
    // 在這個中間件中再對用戶信息作一些處理
    // => { id: 17, name: "Alex" }
  }
);

嵌套路由

咱們能夠在應用中定義多個路由，而後把這些路由組合起來用，這樣便於咱們管理多個路由，也簡化了路由的寫法。

var forums = new Router();
var posts = new Router();
 
posts.get('/', function (ctx, next) {...});
posts.get('/:pid', function (ctx, next) {...});
forums.use('/forums/:fid/posts', posts.routes(), posts.allowedMethods());
 
// 能夠匹配到的路由爲 "/forums/123/posts" 或者 "/forums/123/posts/123"
app.use(forums.routes());

路由前綴

經過 prefix 這個參數，咱們能夠爲一組路由添加統一的前綴，和嵌套路由相似，也方便咱們管理路由和簡化路由的寫法。不一樣的是，前綴是一個固定的字符串，不能添加動態參數。

var router = new Router({
  prefix: '/users'
});
 
router.get('/', ...); // 匹配路由 "/users" 
router.get('/:id', ...); // 匹配路由 "/users/:id"

URL 參數

koa-router 也支持參數，參數會被添加到 ctx.params 中。參數能夠是一個正則表達式，這個功能的實現是經過 path-to-regexp 來實現的。原理是把 URL 字符串轉化成正則對象，而後再進行正則匹配，以前的例子中的 * 通配符就是一種正則表達式。

router.get('/:category/:title', function (ctx, next) {
  console.log(ctx.params);
  // => { category: 'programming', title: 'how-to-node' } 
});

經過上面的例子能夠看出，咱們能夠經過 ctx.params 去訪問路由中的參數，使得咱們可以對參數作一些處理後再執行後續的代碼。

使用了 koa-router 以後，代碼簡潔了不少。下一節中，咱們將學習下如何響應瀏覽器的各類請求。

下一篇：POST/GET請求——常見請求方式處理

上一篇：iKcamp新課程推出啦～～～～～iKcamp團隊製做｜基於Koa2搭建Node.js實戰（含視頻）☞ 中間件用法

推薦： 翻譯項目Master的自述：

1. 乾貨｜人人都是翻譯項目的Master

2. iKcamp出品微信小程序教學共5章16小節彙總(含視頻)