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

?? iKcamp 制作團隊

原創作者：大哼、阿幹、三三、小虎、胖子、小哈、DDU、可木、晃晃

文案校對：李益、大力萌、Au、DDU、小溪裡、小哈

風采主播：可木、阿幹、Au、DDU、小哈

視訊剪輯：小溪裡

主站營運：給力xi、xty

教程主編：張利濤

視訊位址：www.cctalk.com/v/151149238…

文章

路由 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(, ()=>{
  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(, ()=>{
  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

的方法一一對應。上述代碼中沒有處理異常，當請求都無法比對的時候，我們可以跳轉到自定義的

頁面，比如：

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

号是一種通配符，表示比對任意

URL

。這裡的傳回是一種簡化的寫法，真實開發中，我們肯定要去讀取

HTML

檔案或者其他模闆檔案的内容，再響應請求。關于這部分的内容後面的章節中會詳細介紹。

其他特性

命名路由

在開發過程中我們能夠很友善的生成路由

URL

：

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

router.url('user', );
// => 生成路由 "/users/3" 
 
router.url('user', { id:  });
// => 生成路由 "/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實戰（含視訊）☞ 中間件用法

iKcamp｜基于Koa2搭建Node.js實戰（含視訊）☞ 路由koa-router文章路由 koa-router

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

?? iKcamp 制作團隊

文章

路由 koa-router

安裝 koa-router

基本使用方法

其他特性

命名路由

多中間件

嵌套路由

路由字首

URL 參數

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

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

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

繼續閱讀

Apache配置SSLApache配置SSL

配置apache支援PHP（win7）

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

Cloud Studio初體驗

NOSQL安全攻擊

JS生成uuid的四種方法

vue-cli簡介（中文翻譯）

php 去掉字元串的最後一個字元及截取原字元串1,2,3,4,5,6,

Ajax發送和擷取json資料到Spring mvc 1.spring mvc後端2.web前段

php——水印

layui多任務上傳添加進度條

JSONObject包導入異常 java.lang.NoClassDefFoundErrorweb項目的導入包的問題

iKcamp｜基于Koa2搭建Node.js實戰（含視訊）☞ 路由koa-router文章路由 koa-router

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

?? iKcamp 制作團隊

文章

路由 koa-router

安裝 koa-router

基本使用方法

其他特性

命名路由

多中間件

嵌套路由

路由字首

URL 參數

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

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

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

繼續閱讀

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