koa2 從入門到進階之路 （二）

以前的文章咱們已經可以在本地啓動一個簡單的項目，本章咱們來看一下 koa 路由，get 傳值，動態路由。

1、Koa 路由

路由(Routing)是由一個 URI(或者叫路徑)和一個特定的 HTTP 方法(GET、POST 等)組成的，涉及到應用如何響應客戶端對某個網站節點的訪問。

通俗的講:路由就是根據不一樣的 URL 地址，加載不一樣的頁面實現不一樣的功能。

Koa 中的路由和 Express 有所不一樣，在 Express 中直接引入 Express 就能夠配置路由，可是在 Koa 中咱們須要安裝對應的 koa-router 路由模塊來實現。

npm install koa-router --save

咱們接着上一節的項目目錄來編寫，將咱們的 app.js 文件改成以下：

 1 //引入 koa模塊
 2 var Koa = require('koa');
 3 var Router = require('koa-router');
 4 
 5 //實例化
 6 var app = new Koa();
 7 var router = new Router();
 8 
 9 //配置路由
10 router.get('/', async (ctx) => {
11     // ctx  上下文 context ，包含了request 和response等信息
12     // 返回數據    至關於：原生裏面的res.writeHead()  res.end()
13     ctx.body = '首頁';
14 });
15 router.get('/news', async (ctx) => {
16     ctx.body = "新聞頁面";
17 });
18 
19 //啓動路由
20 app.use(router.routes());
21 app.use(router.allowedMethods());
22 /**
23  router.allowedMethods()做用： 這是官方文檔的推薦用法,咱們能夠
24  看到 router.allowedMethods()用在了路由匹配 router.routes()以後,因此在當全部
25  路由中間件最後調用.此時根據 ctx.status 設置 response 響應頭
26  能夠配置也能夠不配置,建議配置，
27  */
28 
29 app.listen(3000);

在上面的代碼中咱們引入了 koa-router 模塊來配置我麼們的路由，具體操做如上，咱們經過 router.get() 的方式定義了兩個路由地址 "/" 和 "/news"，在調用路由的頁面分別返回不一樣的內容 ，最終結果以下：

當咱們在本地啓動項目後，在端口 3000 後輸入 "/"，表示的依舊是該頁面，當咱們在端口後輸入 "/news" 時結果以下：

能夠看出不一樣的路由可以顯示不一樣的內容，說明咱們的路由已經配置好了。

可是在實際應用中咱們會看到瀏覽器的 url 地址是這樣的 http://localhost:3000/news?id=1&title=aaa

那咱們在後臺改如何接收到 ? 後面的傳值呢，以下代碼：

 1 //引入 koa模塊
 2 var Koa = require('koa');
 3 var Router = require('koa-router');
 4 
 5 //實例化
 6 var app = new Koa();
 7 var router = new Router();
 8 
 9 //配置路由
10 router.get('/', async (ctx) => {
11     // ctx  上下文 context ，包含了request 和response等信息
12     // 返回數據    至關於：原生裏面的res.writeHead()  res.end()
13     ctx.body = '首頁';
14 });
15 router.get('/news', async (ctx) => {
16     /**
17      在 koa2 中 GET 傳值經過 request 接收，可是接收的方法有兩種：query 和 querystring。
18      query：返回的是格式化好的參數對象。
19      querystring：返回的是請求字符串。
20      */
21 
22     //從ctx中讀取get傳值
23     console.log(ctx.url);   // /news?id=1&title=aaa
24     console.log(ctx.query);  // { id: '1', title: 'aaa' } 獲取的是對象   用的最多的方式      ******推薦
25     console.log(ctx.querystring);  // id=1&title=aaa      獲取的是一個字符串
26 
27     //ctx裏面的request裏面獲取get傳值
28     console.log(ctx.request.url);   // /news?id=1&title=aaa
29     console.log(ctx.request.query);   // { id: '1', title: 'aaa' } 對象
30     console.log(ctx.request.querystring);   // id=1&title=aaa
31     ctx.body = "新聞頁面";
32 });
33 
34 //啓動路由
35 app.use(router.routes());
36 app.use(router.allowedMethods());
37 /**
38  router.allowedMethods()做用： 這是官方文檔的推薦用法,咱們能夠
39  看到 router.allowedMethods()用在了路由匹配 router.routes()以後,因此在當全部
40  路由中間件最後調用.此時根據 ctx.status 設置 response 響應頭
41  能夠配置也能夠不配置,建議配置，
42  */
43 
44 app.listen(3000);

咱們在 router.get("/news", ) 的路由中能夠經過 ctx. 來獲取咱們想要的 get 傳值，ctx 打印出來會有不少內容，在這裏咱們選了三個， url，query，querystring，另外在 ctx.request 中一樣包含這三個內容，輸出結果是同樣的。咱們建議 get 傳值的方式是 ctx.query 的形式。咱們來看一下結果：

咱們在瀏覽器中輸入如上地址，而後回車，咱們看一下編輯器的控制檯輸出日誌：

經過以上方法咱們就能獲取到咱們想要的 get 傳值數據了。

還有一種狀況咱們看到的並非上面的狀況，而是 http://localhost:3000/news/123

若是是上面的狀況，咱們須要在後臺這樣配置： router('/news/123', async () => {}) ，這樣顯然是可行的，可是若是 /news/ 後面跟的 123 多是別的內容，那咱們還須要再寫一個隨之對應的路由，這樣顯然是不可取的，這時候咱們就須要引入動態路由了，以下：

 1 //引入 koa模塊
 2 var Koa = require('koa');
 3 var Router = require('koa-router');
 4 
 5 //實例化
 6 var app = new Koa();
 7 var router = new Router();
 8 
 9 //配置路由
10 router.get('/', async (ctx) => {
11     // ctx  上下文 context ，包含了request 和response等信息
12     // 返回數據    至關於：原生裏面的res.writeHead()  res.end()
13     ctx.body = '首頁';
14 });
15 router.get('/news/:id', async (ctx) => {
16     /**
17      獲取動態路由傳參
18      */
19 
20     //從ctx中讀取get傳值
21     console.log(ctx.url);   // /news/123
22     console.log(ctx.params);  // { id: '123' }
23     ctx.body = "新聞頁面";
24 });
25 
26 //啓動路由
27 app.use(router.routes());
28 app.use(router.allowedMethods());
29 /**
30  router.allowedMethods()做用： 這是官方文檔的推薦用法,咱們能夠
31  看到 router.allowedMethods()用在了路由匹配 router.routes()以後,因此在當全部
32  路由中間件最後調用.此時根據 ctx.status 設置 response 響應頭
33  能夠配置也能夠不配置,建議配置，
34  */
35 
36 app.listen(3000);

咱們將以前的 router.get('/news', ) 改成 router.get('/news/:id', ) 的形式，而後經過 ctx.params 就能獲取到咱們想要的 get 傳參，結果以下：

咱們在瀏覽器中輸入如上地址，而後回車，咱們看一下編輯器的控制檯輸出日誌：

經過以上方法咱們就能獲取到咱們想要的 get 傳值數據了。