路由koa-router——MVC 中重要的環節:Url 處理器 ?? iKcamp 制作團隊
原創作者:大哼、阿干、三三、小虎、胖子、小哈、DDU、可木、晃晃
文案校對:李益、大力萌、Au、DDU、小溪里、小哈
風采主播:可木、阿干、Au、DDU、小哈
視頻剪輯:小溪里
主站運營:給力xi、xty
教程主編:張利濤
視頻地址:https://www.cctalk.com/v/15114923889954
文章 路由 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 = "index page
"; } else { await next(); } }); app.use(async (ctx, next) => { if (ctx.request.path === "/home") { ctx.response.body = "home page
"; } else { await next(); } }); app.use(async (ctx, next) => { if (ctx.request.path === "/404") { ctx.response.body = "404 Not Found
"; } else { await next(); } }); app.listen(3000, ()=>{ 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。
通過 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 = `index page
` }) router.get("/home", async (ctx, next) => { ctx.response.body = "HOME page
" }) router.get("/404", async (ctx, next) => { ctx.response.body = "404 Not Found
" }) // 調用路由中間件 app.use(router.routes()) app.listen(3000, ()=>{ 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 的方法一一對應。上述代碼中沒有處理異常,當請求都無法匹配的時候,我們可以跳轉到自定義的 404 頁面,比如:
router.all("/*", async (ctx, next) => { ctx.response.status = 404; ctx.response.body = "404 Not Found
"; });
* 號是一種通配符,表示匹配任意 URL。這里的返回是一種簡化的寫法,真實開發中,我們肯定要去讀取 HTML 文件或者其他模板文件的內容,再響應請求。關于這部分的內容后面的章節中會詳細介紹。
其他特性 命名路由在開發過程中我們能夠很方便的生成路由 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 方法方便我們在代碼中根據路由名稱和參數(可選)去生成具體的 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實戰(含視頻)? 中間件用法推薦: 翻譯項目Master的自述: 1. 干貨|人人都是翻譯項目的Master 2. iKcamp出品微信小程序教學共5章16小節匯總(含視頻)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90414.html
POST/GET請求——常見請求方式處理 ?? iKcamp 制作團隊 原創作者:大哼、阿干、三三、小虎、胖子、小哈、DDU、可木、晃晃 文案校對:李益、大力萌、Au、DDU、小溪里、小哈 風采主播:可木、阿干、Au、DDU、小哈 視頻剪輯:小溪里 主站運營:給力xi、xty 教程主編:張利濤 視頻地址:https://www.cctalk.com/v/15114357765870 ...
摘要:云集一線大廠有真正實力的程序員團隊云集一線大廠經驗豐厚的碼農,開源奉獻各教程。融合多種常見的需求場景網絡請求解析模板引擎靜態資源日志記錄錯誤請求處理。結合語句中轉中間件控制權,解決回調地獄問題。注意分支中的目錄為當節課程后的完整代碼。 ?? ?與眾不同的學習方式,為你打開新的編程視角 獨特的『同步學習』方式 文案講解+視頻演示,文字可激發深層的思考、視頻可還原實戰操作過程。 云...
摘要:玩轉同時全面掌握潮流技術采用新一代的開發框架更小更富有表現力更健壯。融合多種常見的需求場景網絡請求解析模板引擎靜態資源日志記錄錯誤請求處理。結合語句中轉中間件控制權,解決回調地獄問題。注意分支中的目錄為當節課程后的完整代碼。 ?? ?與眾不同的學習方式,為你打開新的編程視角 獨特的『同步學習』方式 文案講解+視頻演示,文字可激發深層的思考、視頻可還原實戰操作過程。 云集一線大廠...
視頻地址:https://www.cctalk.com/v/15114923889408 showImg(https://segmentfault.com/img/remote/1460000012682164?w=1604&h=964); 文章 在前面幾節中,我們已經實現了項目中的幾個常見操作:啟動服務器、路由中間件、Get 和 Post 形式的請求處理等。現在你已經邁出了走向成功的第一步。 ...
滬江CCtalk視頻地址:https://www.cctalk.com/v/15114923889450 showImg(https://segmentfault.com/img/remote/1460000013229246?w=1718&h=962); 規范與部署 懶人推動社會進步。 本篇中,我們會講述三個知識點 定制書寫規范 開發環境運行 如何部署運行 定制書寫規范 文中所說的書寫規范,...
閱讀 1778·2023-04-25 14:33
閱讀 3378·2021-11-22 15:22
閱讀 2177·2021-09-30 09:48
閱讀 2684·2021-09-14 18:01
閱讀 1740·2019-08-30 15:55
閱讀 3006·2019-08-30 15:53
閱讀 2139·2019-08-30 15:44
閱讀 648·2019-08-30 10:58