iKcamp｜基于Koa2搭建Node.js實戰（含視頻）? HTTP請求

張利勇發布于2019-08-21 18:27 / 1824人閱讀

POST/GET請求——常見請求方式處理 ?? iKcamp 制作團隊

原創作者：大哼、阿干、三三、小虎、胖子、小哈、DDU、可木、晃晃
文案校對：李益、大力萌、Au、DDU、小溪里、小哈
風采主播：可木、阿干、Au、DDU、小哈
視頻剪輯：小溪里
主站運營：給力xi、xty
教程主編：張利濤

視頻地址：https://www.cctalk.com/v/15114357765870

文章 Http 請求

在學習了 koa-router 之后，我們就可以用它來處理一些常見的請求了，比如 POST/GET 。

koa-router 提供了 .get、.post、.put 和 .del 接口來處理各種請求，但實際業務上，我們大部分只會接觸到 POST 和 GET，所以接下來只針對這兩種請求類型來說明。

當我們捕獲到請求后，一般都需要把請求帶過來的數據解析出來。數據傳遞過來的方式一般有三種：

請求參數放在 URL 后面

http://localhost:3000/home?id=12&name=ikcamp

koa-router 封裝的 request 對象，里面的 query 方法或 querystring 方法可以直接獲取到 Get 請求的數據，唯一不同的是 query 返回的是對象，而 querystring 返回的是字符串。

修改 app.js，我們加入解析方式：

  const Koa = require("koa")
  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) => {
    console.log(ctx.request.query)
    console.log(ctx.request.querystring)
    ctx.response.body = "HOME page"
  })

  router.get("/404", async(ctx, next) => {
    ctx.response.body = "404 Not Found"
  })

  // add router middleware:
  app.use(router.routes())

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

運行代碼，并通過瀏覽器訪問 http://localhost:3000/home?id=12&name=ikcamp，然后打開控制臺會看到下面的輸出內容：

{ id: "12", name: "ikcamp" }
id=12&name=ikcamp

請求參數放在 URL 中間

http://localhost:3000/home/12/ikcamp

這種情況下，解析方式肯定與上面的不一樣了，koa-router 會把請求參數解析在 params 對象上，我們修改 app.js 文件，增加新的路由來測試下：

  // 增加如下代碼
  router.get("/home/:id/:name", async(ctx, next)=>{
    console.log(ctx.params)
    ctx.response.body = "HOME page /:id/:name"
  })

運行代碼，并通過瀏覽器訪問 http://localhost:3000/home/12/ikcamp，然后查看下控制臺顯示的日志信息：

{ id: "12", name: "ikcamp" }

請求參數放在 body 中

當用 post 方式請求時，我們會遇到一個問題：post 請求通常都會通過表單或 JSON 形式發送，而無論是 Node 還是 Koa，都 沒有提供 解析 post 請求參數的功能。

koa-bodyparser 說：『是時候登場了！』

首先，安裝 koa-bodyparser 包：

npm i koa-bodyparser -S

安裝完成之后，我們需要在 app.js 中引入中間件并應用：

  const Koa = require("koa")
  const router = require("koa-router")()
  const bodyParser = require("koa-bodyparser")
  const app = new Koa()

  app.use(bodyParser())

  router.get("/", async(ctx, next) => {
    ctx.response.body = `index page`
  })

  router.get("/home", async(ctx, next) => {
    console.log(ctx.request.query)
    console.log(ctx.request.querystring)
    ctx.response.body = "HOME page"
  })

  router.get("/home/:id/:name", async(ctx, next)=>{
    console.log(ctx.params)
    ctx.response.body = "HOME page /:id/:name"
  })

  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 增加如下代碼，實現增加表單頁面的路由：

  // 增加返回表單頁面的路由
  router.get("/user", async(ctx, next)=>{
    ctx.response.body = 
    `
      
         
        

        
        
 
        
      
    `
  })

繼續修改 app.js 增加如下代碼，實現 post 表單提交對應的路由：

  // 增加響應表單請求的路由
  router.post("/user/register",async(ctx, next)=>{
    let {name, password} = ctx.request.body
    if( name === "ikcamp" && password === "123456" ){
      ctx.response.body = `Hello， ${name}！`
    }else{
      ctx.response.body = "賬號信息錯誤"
    }
  })

常見的幾種請求，以及相應的參數傳遞解析，我們已經學習過了。下一節中，我們會把項目整理重構下，做個分層，并引入視圖層。

下一篇：代碼分層——梳理代碼，漸近于 MVC 分層模式

上一篇：iKcamp新課程推出啦～～～～～iKcamp｜基于Koa2搭建Node.js實戰（含視頻）? 路由koa-router

推薦：翻譯項目Master的自述： 1. 干貨｜人人都是翻譯項目的Master 2. iKcamp出品微信小程序教學共5章16小節匯總(含視頻)

GPU云服務器云服務器搭建 node.js 云主機搭建 node.js 云vps webrtc node.js服務搭建搭建 node.js 云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90483.html

開始連載啦～每周２更共11堂iKcamp課｜基于Koa2搭建Node.js實戰項目教學（含視頻）|

摘要：玩轉同時全面掌握潮流技術采用新一代的開發框架更小更富有表現力更健壯。融合多種常見的需求場景網絡請求解析模板引擎靜態資源日志記錄錯誤請求處理。結合語句中轉中間件控制權，解決回調地獄問題。注意分支中的目錄為當節課程后的完整代碼。 ?? ?與眾不同的學習方式，為你打開新的編程視角獨特的『同步學習』方式文案講解+視頻演示，文字可激發深層的思考、視頻可還原實戰操作過程。云集一線大廠...

B0B0 2019-08-22 11:17 評論0 收藏0
【完結匯總】iKcamp出品基于Koa2搭建Node.js實戰共十一堂課(含視頻)

摘要：云集一線大廠有真正實力的程序員團隊云集一線大廠經驗豐厚的碼農，開源奉獻各教程。融合多種常見的需求場景網絡請求解析模板引擎靜態資源日志記錄錯誤請求處理。結合語句中轉中間件控制權，解決回調地獄問題。注意分支中的目錄為當節課程后的完整代碼。 ?? ?與眾不同的學習方式，為你打開新的編程視角獨特的『同步學習』方式文案講解+視頻演示，文字可激發深層的思考、視頻可還原實戰操作過程。云...

sPeng 2019-08-22 14:58 評論0 收藏0
iKcamp團隊制作｜基于Koa2搭建Node.js實戰（含視頻）? 中間件用法

中間件用法——講解 Koa2 中間件的用法及如何開發中間件 ?? iKcamp 制作團隊原創作者：大哼、阿干、三三、小虎、胖子、小哈、DDU、可木、晃晃文案校對：李益、大力萌、Au、DDU、小溪里、小哈風采主播：可木、阿干、Au、DDU、小哈視頻剪輯：小溪里主站運營：給力xi、xty 教程主編：張利濤視頻地址：https://www.cctalk.com/v/151143...

Alfred 2019-08-22 11:23 評論0 收藏0
iKcamp｜基于Koa2搭建Node.js實戰（含視頻）? 代碼分層

視頻地址：https://www.cctalk.com/v/15114923889408 showImg(https://segmentfault.com/img/remote/1460000012682164?w=1604&h=964); 文章在前面幾節中，我們已經實現了項目中的幾個常見操作：啟動服務器、路由中間件、Get 和 Post 形式的請求處理等。現在你已經邁出了走向成功的第一步。 ...

shusen 2019-08-21 18:36 評論0 收藏0
iKcamp團隊制作｜基于Koa2搭建Node.js實戰項目教學（含視頻）? 環境準備

安裝搭建項目的開發環境視頻地址：https://www.cctalk.com/v/15114357764004 showImg(https://segmentfault.com/img/remote/1460000012470016?w=1214&h=718); 文章 Koa 起手 - 環境準備由于 koa2 已經開始使用 async/await 等新語法，所以請保證 node 環境在 7.6...

bang590 2019-08-22 11:20 評論0 收藏0