路由koa-router——MVC 中重要的環(huán)節(jié)：Url 處理器
???? iKcamp 制作團隊
原創(chuàng)作者：大哼鸦难、阿干、三三员淫、小虎合蔽、胖子、小哈介返、DDU拴事、可木、晃晃
文案校對：李益圣蝎、大力萌刃宵、Au、DDU捅彻、小溪里组去、小哈
風(fēng)采主播：可木、阿干步淹、Au从隆、DDU、小哈
視頻剪輯：小溪里
主站運營：給力xi缭裆、xty
教程主編：張利濤
視頻地址：https://www.cctalk.com/v/15114923889954
文章
路由 koa-router
上一節(jié)我們學(xué)習(xí)了中間件的基本概念键闺，本節(jié)主要帶大家學(xué)習(xí)下
koa-router路由中間件的使用方法。
路由是用于描述 URL 與處理函數(shù)之間的對應(yīng)關(guān)系的澈驼。比如用戶訪問 http://localhost:3000/辛燥，那么瀏覽器就會顯示 index 頁面的內(nèi)容，如果用戶訪問的是 http://localhost:3000/home缝其，那么瀏覽器應(yīng)該顯示 home 頁面的內(nèi)容挎塌。
要實現(xiàn)上述功能，如果不借助 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')
})
把上述代碼復(fù)制并覆蓋到 app.js 中，然后執(zhí)行以下命令啟動 node 程序:
node app.js
啟動之后在瀏覽器中分別訪問 http://localhost:3000/漠其、http://localhost:3000/home嘴高、http://localhost:3000/404 就能看到相應(yīng)的頁面了竿音。
上述 app.js 的代碼中，由 async 標(biāo)記的函數(shù)稱為『異步函數(shù)』拴驮，在異步函數(shù)中春瞬，可以用 await 調(diào)用另一個異步函數(shù)，async 和 await 這兩個關(guān)鍵字將在 ES7 中引入套啤。參數(shù) ctx 是由 koa 傳入的宽气，我們可以通過它來訪問 request 和 response，next 是 koa 傳入的將要處理的下一個異步函數(shù)纲岭。
注意： 由于 node 在 v7.6.0 中才支持 async 和 await抹竹，所以在運行 app.js 之前請確保 node 版本正確，或者使用一些第三方的 async 庫來支持止潮。
這樣的寫法能夠處理簡單的應(yīng)用窃判，但是，一旦要處理的 URL 多起來的話就會顯得特別笨重喇闸。所以我們可以借助 koa-router 來更簡單的實現(xiàn)這一功能袄琳。
下面來介紹一下如何正確的使用 koa-router。
安裝 koa-router
通過 npm 命令直接安裝：
npm i koa-router -S
-S 或者 --save 是為了安裝完成之后能夠在 package.json 的 dependencies 中保留 koa-router燃乍，以便于下次只需要執(zhí)行 npm i 或者 npm install 就能夠安裝所有需要的依賴包唆樊。
基本使用方法
如果要在 app.js 中使用 koa-router 來處理 URL，可以通過以下代碼來實現(xiàn)：
const Koa = require('koa')
// 注意 require('koa-router') 返回的是函數(shù):
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>'
})
// 調(diào)用路由中間件
app.use(router.routes())
app.listen(3000, ()=>{
console.log('server is running at http://localhost:3000')
})
運行 app.js:
node app.js
執(zhí)行完上面的操作之后刻蟹，我們在瀏覽器中訪問 http://localhost:3000/：
在瀏覽器中訪問 http://localhost:3000/home：
在瀏覽器中訪問 http://localhost:3000/404：
通過上面的例子逗旁，我們可以看到和之前不使用 koa-router 的顯示效果是一樣的。不過使用了 koa-router 之后舆瘪，代碼稍微簡化了一些片效，而且少了 if 判斷，還有省略了 await next()（因為沒有其他中間件需要執(zhí)行英古，所以這里就先省略了）淀衣。
當(dāng)然，除了 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 協(xié)議方法中，GET唠叛、POST只嚣、PUT、DELETE 分別對應(yīng) 查艺沼，增册舞，改，刪澳厢，這里 router 的方法也一一對應(yīng)环础。通常我們使用 GET 來查詢和獲取數(shù)據(jù)，使用 POST 來更新資源剩拢。PUT 和 DELETE 使用比較少线得，但是如果你們團隊采用 RESTful架構(gòu)，就比較推薦使用了徐伐。我們注意到贯钩，上述代碼中還有一個all 方法。all 方法用于處理上述方法無法匹配的情況办素，或者你不確定客戶端發(fā)送的請求方法類型角雷。
舉個例子，假設(shè)客戶端使用 jQuery 來開發(fā)性穿，有如下幾個 ajax 請求：
// 優(yōu)先匹配和 router.get 方法中 url 規(guī)則一樣的請求勺三，如果匹配不到的話就匹配和 router.all 方法中 url 規(guī)則一樣的請求。
$.ajax({
method: "GET",
url: "some.php",
data: { name: "John" }
}).done(function( msg ) {
// do something
});
// 優(yōu)先匹配和 router.post 方法中 url 規(guī)則一樣的請求需曾，如果匹配不到的話就匹配和 router.all 方法中 url 規(guī)則一樣的請求吗坚。
$.ajax({
method: "POST",
url: "some.php",
data: { name: "John" }
}).done(function( msg ) {
// do something
});
上面例子中兩個方法最主要的區(qū)別就是 ajax 中 method 的值，method 的值和 router 的方法一一對應(yīng)呆万。上述代碼中沒有處理異常商源，當(dāng)請求都無法匹配的時候，我們可以跳轉(zhuǎn)到自定義的 404 頁面谋减，比如：
router.all('/*', async (ctx, next) => {
ctx.response.status = 404;
ctx.response.body = '<h1>404 Not Found</h1>';
});
* 號是一種通配符牡彻，表示匹配任意 URL。這里的返回是一種簡化的寫法出爹，真實開發(fā)中庄吼，我們肯定要去讀取 HTML 文件或者其他模板文件的內(nèi)容，再響應(yīng)請求以政。關(guān)于這部分的內(nèi)容后面的章節(jié)中會詳細介紹霸褒。
其他特性
命名路由
在開發(fā)過程中我們能夠很方便的生成路由 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 方法方便我們在代碼中根據(jù)路由名稱和參數(shù)(可選)去生成具體的 URL，而不用采用字符串拼接的方式去生成 URL 了盈蛮。
多中間件
koa-router 也支持單個路由多中間件的處理废菱。通過這個特性，我們能夠為一個路由添加特殊的中間件處理抖誉。也可以把一個路由要做的事情拆分成多個步驟去實現(xiàn)殊轴，當(dāng)路由處理函數(shù)中有異步操作時，這種寫法的可讀性和可維護性更高袒炉。比如下面的示例代碼所示：
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" }
}
);
嵌套路由
我們可以在應(yīng)用中定義多個路由，然后把這些路由組合起來用我磁，這樣便于我們管理多個路由孽文，也簡化了路由的寫法驻襟。
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 這個參數(shù)，我們可以為一組路由添加統(tǒng)一的前綴芋哭，和嵌套路由類似沉衣，也方便我們管理路由和簡化路由的寫法。不同的是减牺，前綴是一個固定的字符串豌习，不能添加動態(tài)參數(shù)。
var router = new Router({
prefix: '/users'
});
router.get('/', ...); // 匹配路由 "/users"
router.get('/:id', ...); // 匹配路由 "/users/:id"
URL 參數(shù)
koa-router 也支持參數(shù)拔疚，參數(shù)會被添加到 ctx.params 中肥隆。參數(shù)可以是一個正則表達式，這個功能的實現(xiàn)是通過 path-to-regexp 來實現(xiàn)的稚失。原理是把 URL 字符串轉(zhuǎn)化成正則對象栋艳，然后再進行正則匹配，之前的例子中的 * 通配符就是一種正則表達式墩虹。
router.get('/:category/:title', function (ctx, next) {
console.log(ctx.params);
// => { category: 'programming', title: 'how-to-node' }
});
通過上面的例子可以看出嘱巾，我們可以通過 ctx.params 去訪問路由中的參數(shù)，使得我們能夠?qū)?shù)做一些處理后再執(zhí)行后續(xù)的代碼诫钓。
使用了 koa-router 之后旬昭，代碼簡潔了很多。下一節(jié)中菌湃，我們將學(xué)習(xí)下如何響應(yīng)瀏覽器的各種請求问拘。
下一篇：POST/GET請求——常見請求方式處理
上一篇：iKcamp新課程推出啦～～～～～iKcamp團隊制作｜基于Koa2搭建Node.js實戰(zhàn)（含視頻）? 中間件用法
