理解koa-router 路由通常使用

時間  2019-11-13
標籤 理解 koa router 路由 通常 使用 欄目 系統網絡 简体版
原文   原文鏈接

閱讀目錄node

一：理解koa-router通常的路由git

koa-router是koa的路由庫，什麼是路由庫呢？好比當咱們訪問 http://localhost:3001/ 的時候，瀏覽器就會顯示index頁面的內容(通常默認是index)。若是當用戶訪問 http://localhost:3001/home 的時候，瀏覽器就會顯示home頁面的內容。github

假如要實現上述功能，若是咱們不使用 koa-router 或者其餘路由中間件的話，咱們通常須要在app.js以下代碼編寫：npm

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

const route = (ctx, next) => {
  console.log(ctx.path);
  switch (ctx.path) {
    case '/':
      ctx.body = '<h1>歡迎光臨index page 頁面</h1>';
      break;
    case '/home':
      ctx.body = '<h1>歡迎光臨home頁面</h1>';
      break;
    default:
      // 404頁面
      return;
  }
}

app.use(route);

app.listen(3001, () => {
  console.log('3001 server start....');
});

而後咱們在node命令行中 執行 node app.js 的時候就啓動服務器。json

當咱們訪問 http://localhost:3001/ 的時候，頁面顯示index page 信息，以下圖所示：瀏覽器

當咱們訪問 http://localhost:3001/home 的時候，就顯示 歡迎光臨home頁面的信息。以下圖所示：服務器

這種方式不是很好，當咱們項目變得很大的時候，咱們須要編寫不少 switch-case 這樣的語句，代碼變得更加耦合，而且當我須要對某個路由要加一箇中間件過濾下的時候，這種方式並很差處理。而且當項目很是大的時候，咱們不想把全部的路由編寫的一個app.js 頁面的時候，咱們須要寫到routes文件夾下多個js裏面去，也就是說對路由進行分層級的時候，這樣作的目的就是想讓之後項目路由管理更加方便。那麼目前的app.js中的switch-case 這種方式不支持了，所以咱們這個時候就須要koa-router這樣的中間件來作這件事情了哦。app

所以咱們如今須要安裝 koa-router 模塊了。命令以下：koa

npm install --save koa-router

經過 npm install supervisor --save-dev 安裝supervisor模塊, 用於node熱啓動.異步

package.json 代碼以下：

{
  "name": "routers",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "supervisor app.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "koa": "^2.7.0",
    "koa-router": "^7.4.0",
    "supervisor": "^0.12.0"
  }
}

而後咱們把app.js 代碼改爲以下了：

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

const router = require('koa-router')();

// 添加路由
router.get('/', ctx => {
  ctx.body = '<h1>歡迎光臨index page 頁面</h1>';
});

router.get('/home', ctx => {
  ctx.body = '<h1>歡迎光臨home頁面</h1>';
});

router.get('/404', ctx => {
  ctx.body = '<h1>404...</h1>'
});

// 加載路由中間件
app.use(router.routes());

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

一樣在node命令行中 運行命令 node app.js, 而後在瀏覽器下訪問 http://localhost:3001/ 或 http://localhost:3001/home 或 http://localhost:3001/404 的時候就會加載到對應路由的頁面了。

如上是koa-router 中get方法請求，koa-router也支持處理其餘的請求方法，以下：

router.post('/users', ctx => {
  // ....
})
.put('/user/:id', ctx => {
  // ....
})
.del('/user/:id', ctx => {
  // ....
})
.all('/user/:id', ctx => {
  // ....
});

如上demo實列中，咱們能夠看到有一個all方法，該方法一般用於匹配一組路由或者所有路由能夠作一些統一的設置操做。

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

const router = require('koa-router')();

// 添加路由
router.get('/', (ctx, next) => {
  ctx.body = '<h1>歡迎光臨index page 頁面</h1>';
  next();
});

router.get('/home', ctx => {
  ctx.body = '<h1>歡迎光臨home頁面</h1>';
});

router.get('/404', ctx => {
  ctx.body = '<h1>404...</h1>'
});

// all 方法
router.all('/', (ctx, next) => {
  console.log('match "all" method');
  next();
});
// 加載路由中間件
app.use(router.routes());

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

如上代碼，當咱們運行 http://localhost:3001/ 刷新的時候，能夠看到 在node命令行中也會打印 all方法的信息，可是要打印該信息的時候，有一個前提就是上一個中間件必須 next() 執行下，纔會執行到下一個中間件上來，不然的話，all方法內部的代碼也不會執行的。

二：理解koa-router命名路由

以下代碼來簡單的理解koa-router命名路由了。當咱們在瀏覽器訪問 http://localhost:3001/users/2 的時候，會打印 ctx.params = {'id': 2}；而且會顯示 'hello world';

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

const router = require('koa-router')();

// 添加命名路由
router.get('user', '/users/:id', (ctx, next) => {
  // 當咱們在瀏覽器訪問 http://localhost:3001/users/2 的時候，會打印 ctx.params = {'id': 2}
  console.log(ctx.params); // { id: '2' }
  ctx.body = 'hello world';
});

// 加載路由中間件
app.use(router.routes());

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

三：理解koa-router多箇中間件使用

koa-router支持路由多箇中間件的處理，經過這個特性，咱們可以爲一個路由添加中間件進行作一些操做的事情。好比以下代碼：

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

const router = require('koa-router')();

// 添加命名路由
router.get('user', '/users/:id', (ctx, next) => {
  ctx.body = 'hello world';
  // 好比一個異步的操做，執行一些處理
  setTimeout(() => {
    ctx.user = {'id': 11};
    next(); // 把執行權轉交給下一個中間件
  }, 100);
}, (ctx, next) => {
  // 在該中間件能夠對數據進行一些操做等事情，
  console.log(ctx.user); // 會打印 {'id': 11}
});

// 加載路由中間件
app.use(router.routes());

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

當咱們在瀏覽器運行 http://localhost:3001/users/1 的時候，會顯示 'hello world'文案，而且在node命令行中會打印 {'id': 11}。

四：理解koa-router嵌套路由

咱們能夠在咱們項目中定義不少路由，而後把這些路由組裝起來。最後咱們訪問這些路由的時候，均可以支持。什麼意思呢？
咱們來簡單的作個demo。以下代碼：

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

// 初始化 router1
const router1 = require('koa-router')();

// 初始化 router2
const router2 = require('koa-router')();

// 使用router1作一些事情
router1.get('/', (ctx, next) => {
  ctx.body = 'router1';
  next();
});
router1.get('/:id', (ctx, next) => {
  console.log(22222222);
  console.log(ctx.params);
  next();
});

// 使用router2嵌套router1
router2.use('/user/:id/xxx', router1.routes(), router1.allowedMethods());


// 加載路由中間件
app.use(router2.routes());

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

當咱們訪問 http://localhost:3001/user/1/xxx 這個的時候，就能夠匹配到 第一個 router1.get('/', (ctx, next) => {}) 這個路由到，當咱們訪問 http://localhost:3001/user/1/xxx/x 的時候，就能夠匹配到 router1.get('/:id', (ctx, next) => {}) 這個路由到了，其中/:id 就是命名路由了。不論是 /x 仍是 /(任意的路徑都是支持的)。也就是說 router1路由嵌套到router2路由裏面了，只要訪問 router2中的路由路徑'http://localhost:3001/' + '/user/:id/xxx' 這樣的路徑的時候，就能夠自動把router1的路徑匹配到。也就是能夠理解 router2是路由路徑的前綴。

五：分割路由文件

好比如今項目的目錄結構以下：

|----- 項目
| |-- node_modules     # 依賴的包文件
| |-- routes           # 全部的路由文件
| | |-- index.js       # 路由入口文件
| | |-- router1.js     # router1.js 路由文件
| | |-- router2.js     # router2.js 路由文件
| |-- app.js           # 項目啓動的文件
| |-- package.json

如上目錄結構，app.js 文件是啓動代碼文件，代碼以下：

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

const router = require('./routes/index');

// 加載路由中間件
app.use(router.routes(), router.allowedMethods());

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

routes 文件夾包含全部的路由文件，routes/index.js 是路由的入口路由文件，在app.js 會引入該文件，代碼如上，該文件的做用是讀取全部的路由的文件，而且對每一個路由進行註冊。
routes/index.js 代碼以下：

const router = require('koa-router')();
const fs = require('fs');
const path = require('path');
const files = fs.readdirSync(__dirname);
/*
 /^[^\.].*\.js/ 該正則匹配以.js末尾的文件，包括好比： a.js，
 /xx/yy/x.js 相似的多個目錄文件，只要以 .js 末尾的便可。
 /^[^\.].*\.js$/.test('a.js'); // true
 /^[^\.].*\.js$/.test('/xx/yy/a.js'); // true
*/
files.filter(file => ~file.search(/^[^\.].*\.js$/)).forEach(file => {
  // 獲取文件名 好比 xx.js 這樣的，截取 file.substr(0, file.length - 3); 由於 .js 長度爲3
  const fileName = file.substr(0, file.length - 3);
  /* 
   獲取每一個路由的全局路徑，好比文件夾 routes下的 router1.js.
   router1.js 代碼以下：
   const router = require('koa-router')();
   router.get('/', (ctx, next) => {
     ctx.body = 'hello world';
   });
   router.get('/home', (ctx, next) => {
     ctx.body = '歡迎光臨home頁面';
   });
   module.exports = router;
   而後對每一個路由進行註冊
  */
  const fileEntity = require(path.join(__dirname, file));

  if (fileName !== 'index') {
    router.use(`/${fileName}`, fileEntity.routes(), fileEntity.allowedMethods());
  }
});

module.exports = router;

routes/router1.js 是其中一個路由文件，代碼以下：

const router = require('koa-router')();

router.get('/', (ctx, next) => {
  ctx.body = 'hello world';
});

router.get('/home', (ctx, next) => {
  ctx.body = '歡迎光臨home頁面';
});

module.exports = router;

routes/router2.js 是另一個路由文件，代碼以下：

const router = require('koa-router')();

router.get('/', (ctx, next) => {
  ctx.body = '已經進入router2頁面了';
});

router.get('/detail', (ctx, next) => {
  ctx.body = '已經進入詳情頁面了';
});

module.exports = router;

當咱們訪問 http://localhost:3001/router1 的時候，會打印 "hello world", 以下圖所示：

當咱們訪問 http://localhost:3001/router1/home 的時候，會打印 "歡迎光臨home頁面", 以下圖所示：

當咱們訪問 http://localhost:3001/router2 的時候，會打印出 "已經進入router2頁面了", 以下圖所示：

當咱們訪問 http://localhost:3001/router2/detail 的時候，會打印出 "已經進入詳情頁面了", 以下圖所示：

github源碼查看

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程