Koa 路由中間件原理及使用技巧

本文主要是為了介紹路由的作用,以及在 Koa 路由中間件的使用,一些高級用法注册送28体验金的游戏平台,和實用技巧等

什么是路由?

  • 處理不同的 URL
  • 處理不同的 HTTP方法 (GETPOSTPUTDELETEPATCHOPTIONS)
  • 解析 URL上的參數

HTTP協議而言,路由可以理解為,根據不同的 HTTP請求,返回不同的響應;

如果沒有路由會怎么樣?請看下面的代碼:

const Koa = require('koa')
const app = new Koa()
app.use(async ctx => {
  ctx.body = 'hello world'
})
app.listen(3000)

通過 Postman訪問 3000端口,無論是何種 HTTP方法,還是不同的 URL都將返回相同的內容

這種沒有路由WEB服務,幾乎做不了什么有價值的事情

自定義 Koa路由中間件

路由,最基本的功能就是可以處理不同的URL, 不同的 HTTP方法, 以及解析 URL參數

處理不同的 HTTP方法

const Koa = require('koa')
const app = new Koa()
app.use(async ctx => {
  if (ctx.method === 'GET') {
    ctx.body = 'GET 請求'
  } else if (ctx.method === 'POST') {
    ctx.body = 'POST 請求'
  } else if (ctx.method === 'PUT') {
    ctx.body = 'PUT 請求'
  } else if (ctx.method === 'DELETE') {
    ctx.body = 'DELETE 請求'
  }
})
app.listen(3000)

處理不同的 URL

app.use(async ctx => {
  if (ctx.method === 'GET') {
    switch (ctx.url) {
      case '/': ctx.body = '首頁'; break;
      case '/users': ctx.body = '用戶列表'; break;
      case '/articles': ctx.body = '文章列表'; break;
      default: ctx.status = 404
    }
  }
})

解析 URL參數

app.use(async ctx => {
  if (ctx.method === 'GET') {
    // 根據用戶 ID 獲取用戶信息
    if (/^\/users\/(\w+)$/.test(ctx.url)) {
      return ctx.body = `用戶 ID 為: ${RegExp.$1}`
    }
    ctx.status = 404
  }
})

上面的演示代碼只是最最基本的路由概念,完整的路由邏輯實際需要考慮的情況更加復雜

建議

一個優秀、優雅的程序,需要獨立維護的代碼越少越好,千萬不要干重復造輪子的事情,生命有限!使用官方的中間件,或者其它第三方優秀的中間件,可以節省開發時間,提高開發效率!

koa-router

koa-router 的基本使用

安裝

yarn add koa-router

基本使用

const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const router = new Router();
// 處理不同的 HTTP 方法
router
  .get('/users', ctx => {
    ctx.body = '獲取用戶列表'
  })
  .post('/users', ctx => {
    ctx.body = '創建用戶'
  })
  .put('/users/:id', ctx => {
    // 解析 URL 參數
    ctx.body = `更新 ID 為 ${ctx.params.id} 的用戶`
  })
  .delete('/users/:id', ctx => {
    // 解析 URL 參數
    ctx.body = `刪除 ID 為 ${ctx.params.id} 的用戶`
  })
// 注冊路由中間件
app.use(router.routes())
app.listen(3000)

路由前綴

配置 koa-router的路由前綴,實現路由分類
const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const articleRouter = new Router({ prefix: '/articles' }) // 文章接口
const userRouter = new Router({ prefix: '/users' }) // 用戶接口
articleRouter.get('/', ctx => ctx.body = '文章列表')
userRouter.get('/', ctx => ctx.body = '用戶列表')
app.use(articleRouter.routes())
app.use(userRouter.routes())
app.listen(3000)

使用 koa-routerallowedMethods方法, 可以實現 HTTPOPTIONS方法請求

OPTIONS請求可以檢測接口所支持的請求方法

假如有如下代碼,通過 userRouter.allowedMethods() 中間件,讓 /users 接口實現 options 方法

const Koa = require('koa');
const Router = require('koa-router');
const app = new Koa();
const userRouter = new Router({ prefix: '/users' }) // 用戶接口
userRouter.get('/', ctx => ctx.body = '用戶列表')
userRouter.post('/', ctx => ctx.body = '創建用戶')
userRouter.put('/:id', ctx => ctx.body = ctx.params.id)
// 使用了 userRouter.allowedMethods() 中間件,讓 /users 接口實現 options 方法
app.use(userRouter.routes()).use(userRouter.allowedMethods())
app.listen(3000)

使用 postman測試 OPOTIONS方法

響應頭信息中的 ALLOW字段中,顯示了 /users接口支持的 HTTP方法有 GETPOSTPUT

如果 OPTIONS方法請求接口沒有實現的 HTTP方法,將會返回 405的狀態碼

如果 OPTIONS方法請求 HTTP不支持的方法,將會返回 501的狀態碼

koa 多路由注冊的技巧

在實際的項目中,我們的接口是多種多樣的,不可能在入口文件中定義全部路由

創建 routes文件夾,存放所有不同的路由接口

├── routes (路由)
│ └── articles.js
│ └── users.js
│ └── index.js

├── index.js (入口)

└── package.json






// routes/articles.js  
const Router = require('koa-router')
const router = new Router({ prefix: '/articles' })
router.get('/', ctx => ctx.body = '文章列表')
module.exports = router
// routes/users.js  
const Router = require('koa-router')
const router = new Router({ prefix: '/users' })
router.get('/', ctx => ctx.body = '文章列表')
module.exports = router
// routes/index.js  
const fs = require('fs');
module.exports = (app) => {
  // 使用 fs 模塊自動讀取并注冊 routes 文件夾下所有路由接口
  fs.readdirSync(__dirname).forEach(file => {
    if (file === 'index.js') { return; }
    const route = require(`./${file}`);
    app.use(route.routes()).use(route.allowedMethods());
  });
}
const Koa = require('koa');
const app = new Koa();
const routing = require('./routes');
// 一次性注冊路由
routing(app)
app.listen(3000)
原文鏈接:

上一篇:vue-formulate解析
下一篇:十分鐘了解git那些“不常用”命令

相關推薦

  • 黃金搭檔 -- JS 裝飾器(Decorator)與Node.js路由

    很多面對象語言中都有裝飾器(Decorator)函數的概念,Javascript語言的ES7標準中也提及了Decorator注册送28体验金的游戏平台,個人認為裝飾器是和一樣讓人興奮的的變化。

    10 個月前
  • 首選客戶端路由解決方案?[關閉]

    nbrolorefnon(https://stackoverflow.com/users/3924118/nbro)提出了一個問題:Preferred client side routing solu...

    2 年前
  • 項目整理11.28——路由

    1、路由基礎 (1)添加路由鏈接 image.png(https://img.javascriptcn.com/8b6418d306cd88778316b20c...

    4 個月前
  • 面試還問redux?那我從頭手擼源碼吧(中間件篇)

    昨天的文章手寫了一版redux的核心源碼(https://segmentfault.com/a/1190000016799698),redux庫除了數據的狀態管理還有一塊重要的內容那就是中間件,今天我...

    1 年前
  • 面試官我想做個Reacter(React路由)

    路由的基礎用法回顧,源碼study,文章首發于docs,求個star 依賴 路由依賴于 reactrouter ,但是一般 pc 路由使用 reactrouterdom 注册送28体验金的游戏平台,它依賴于 reactrout...

    1 個月前
  • 阿里云centOS部署vue全家桶+node+koa2+mongo項目

    寫在前面 文章有丟丟長,前端開發第一次部署項目,有問題請及時提出,以免誤導其他童鞋,輕拍~, 更新系統 安裝mongo 1. 添加MongoDB源 在/etc/yum.repos....

    1 年前
  • 鏈接路由器中的傳遞道具

    Geoffrey Halevishal atmakuri(https://stackoverflow.com/users/1438029/geoffreyhale)提出了一個問題:Pass props...

    2 年前
  • 針對Vue相同路由不同參數的刷新問題

    在使用vue和vuerouter開發spa應用時,我們會遇到這樣一種問題。 當頁面跳轉時,組件本身并沒有發生改變: 這時我們進行路由跳轉后會發現組件并沒有刷新,在前一個路由組件的數據都保留了下來...

    2 年前
  • 配置式支持權限管理的 React 路由組件

    npm v(https://img.javascriptcn.com/c2a6e7da8401a14fd8a6a20c3b9dffea)(/go/?target=https%3A%2F%2Fwww.n...

    2 年前
  • 通過編寫一個路由中間件來學習 Koa

    混了四年的大學生活結束了,校招沒有找到工作的我還面臨著失業。沒辦法,只有臨時抱抱佛腳看看能不能找個工作了。據說最近前端圈里不會 NodeJs 是不可能找到工作的,于是抱起了 NodeJs 里比較流行的...

    2 年前

官方社區

掃碼加入 JavaScript 社區