資訊專欄INFORMATION COLUMN
POST/GET請(qǐng)求——常見請(qǐng)求方式處理 ?? iKcamp 制作團(tuán)隊(duì)
原創(chuàng)作者：大哼、阿干、三三、小虎、胖子、小哈、DDU、可木、晃晃
文案校對(duì)：李益、大力萌、Au、DDU、小溪里、小哈
風(fēng)采主播：可木、阿干、Au、DDU、小哈
視頻剪輯：小溪里
主站運(yùn)營(yíng)：給力xi、xty
教程主編：張利濤
視頻地址：https://www.cctalk.com/v/15114357765870
文章 Http 請(qǐng)求在學(xué)習(xí)了 koa-router 之后，我們就可以用它來處理一些常見的請(qǐng)求了，比如 POST/GET 。
koa-router 提供了 .get、.post、.put 和 .del 接口來處理各種請(qǐng)求，但實(shí)際業(yè)務(wù)上，我們大部分只會(huì)接觸到 POST 和 GET，所以接下來只針對(duì)這兩種請(qǐng)求類型來說明。
當(dāng)我們捕獲到請(qǐng)求后，一般都需要把請(qǐng)求帶過來的數(shù)據(jù)解析出來。數(shù)據(jù)傳遞過來的方式一般有三種：
http://localhost:3000/home?id=12&name=ikcamp
koa-router 封裝的 request 對(duì)象，里面的 query 方法或 querystring 方法可以直接獲取到 Get 請(qǐng)求的數(shù)據(jù)，唯一不同的是 query 返回的是對(duì)象，而 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")
})
運(yùn)行代碼，并通過瀏覽器訪問 http://localhost:3000/home?id=12&name=ikcamp，然后打開控制臺(tái)會(huì)看到下面的輸出內(nèi)容：
{ id: "12", name: "ikcamp" }
id=12&name=ikcamp
http://localhost:3000/home/12/ikcamp
這種情況下，解析方式肯定與上面的不一樣了，koa-router 會(huì)把請(qǐng)求參數(shù)解析在 params 對(duì)象上，我們修改 app.js 文件，增加新的路由來測(cè)試下：
// 增加如下代碼
router.get("/home/:id/:name", async(ctx, next)=>{
console.log(ctx.params)
ctx.response.body = "HOME page /:id/:name
"
})
運(yùn)行代碼，并通過瀏覽器訪問 http://localhost:3000/home/12/ikcamp，然后查看下控制臺(tái)顯示的日志信息：
{ id: "12", name: "ikcamp" }
當(dāng)用 post 方式請(qǐng)求時(shí)，我們會(huì)遇到一個(gè)問題：post 請(qǐng)求通常都會(huì)通過表單或 JSON 形式發(fā)送，而無論是 Node 還是 Koa，都 沒有提供 解析 post 請(qǐng)求參數(shù)的功能。
首先，安裝 koa-bodyparser 包：
npm i koa-bodyparser -S
安裝完成之后，我們需要在 app.js 中引入中間件并應(yīng)用：
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")
})
然后我們來試著寫一個(gè)簡(jiǎn)單的表單提交實(shí)例。修改 app.js 增加如下代碼，實(shí)現(xiàn)增加表單頁面的路由：
// 增加返回表單頁面的路由
router.get("/user", async(ctx, next)=>{
ctx.response.body =
`
`
})
繼續(xù)修改 app.js 增加如下代碼，實(shí)現(xiàn) post 表單提交對(duì)應(yīng)的路由：
// 增加響應(yīng)表單請(qǐng)求的路由
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 = "賬號(hào)信息錯(cuò)誤"
}
})
常見的幾種請(qǐng)求，以及相應(yīng)的參數(shù)傳遞解析，我們已經(jīng)學(xué)習(xí)過了。下一節(jié)中，我們會(huì)把項(xiàng)目整理重構(gòu)下，做個(gè)分層，并引入視圖層。
下一篇：代碼分層——梳理代碼，漸近于 MVC 分層模式
上一篇：iKcamp新課程推出啦～～～～～iKcamp｜基于Koa2搭建Node.js實(shí)戰(zhàn)（含視頻）? 路由koa-router推薦： 翻譯項(xiàng)目Master的自述： 1. 干貨｜人人都是翻譯項(xiàng)目的Master 2. iKcamp出品微信小程序教學(xué)共5章16小節(jié)匯總(含視頻)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/90483.html
摘要：玩轉(zhuǎn)同時(shí)全面掌握潮流技術(shù)采用新一代的開發(fā)框架更小更富有表現(xiàn)力更健壯。融合多種常見的需求場(chǎng)景網(wǎng)絡(luò)請(qǐng)求解析模板引擎靜態(tài)資源日志記錄錯(cuò)誤請(qǐng)求處理。結(jié)合語句中轉(zhuǎn)中間件控制權(quán)，解決回調(diào)地獄問題。注意分支中的目錄為當(dāng)節(jié)課程后的完整代碼。 ?? ?與眾不同的學(xué)習(xí)方式，為你打開新的編程視角 獨(dú)特的『同步學(xué)習(xí)』方式 文案講解+視頻演示，文字可激發(fā)深層的思考、視頻可還原實(shí)戰(zhàn)操作過程。 云集一線大廠...
摘要：云集一線大廠有真正實(shí)力的程序員團(tuán)隊(duì)云集一線大廠經(jīng)驗(yàn)豐厚的碼農(nóng)，開源奉獻(xiàn)各教程。融合多種常見的需求場(chǎng)景網(wǎng)絡(luò)請(qǐng)求解析模板引擎靜態(tài)資源日志記錄錯(cuò)誤請(qǐng)求處理。結(jié)合語句中轉(zhuǎn)中間件控制權(quán)，解決回調(diào)地獄問題。注意分支中的目錄為當(dāng)節(jié)課程后的完整代碼。 ?? ?與眾不同的學(xué)習(xí)方式，為你打開新的編程視角 獨(dú)特的『同步學(xué)習(xí)』方式 文案講解+視頻演示，文字可激發(fā)深層的思考、視頻可還原實(shí)戰(zhàn)操作過程。 云...
中間件用法——講解 Koa2 中間件的用法及如何開發(fā)中間件 ?? iKcamp 制作團(tuán)隊(duì) 原創(chuàng)作者：大哼、阿干、三三、小虎、胖子、小哈、DDU、可木、晃晃 文案校對(duì)：李益、大力萌、Au、DDU、小溪里、小哈 風(fēng)采主播：可木、阿干、Au、DDU、小哈 視頻剪輯：小溪里 主站運(yùn)營(yíng)：給力xi、xty 教程主編：張利濤 視頻地址：https://www.cctalk.com/v/151143...
視頻地址：https://www.cctalk.com/v/15114923889408 showImg(https://segmentfault.com/img/remote/1460000012682164?w=1604&h=964); 文章 在前面幾節(jié)中，我們已經(jīng)實(shí)現(xiàn)了項(xiàng)目中的幾個(gè)常見操作：?jiǎn)?dòng)服務(wù)器、路由中間件、Get 和 Post 形式的請(qǐng)求處理等?，F(xiàn)在你已經(jīng)邁出了走向成功的第一步。 ...
安裝搭建項(xiàng)目的開發(fā)環(huán)境 視頻地址：https://www.cctalk.com/v/15114357764004 showImg(https://segmentfault.com/img/remote/1460000012470016?w=1214&h=718); 文章 Koa 起手 - 環(huán)境準(zhǔn)備 由于 koa2 已經(jīng)開始使用 async/await 等新語法，所以請(qǐng)保證 node 環(huán)境在 7.6...
閱讀 7240·2021-09-22 15:36
閱讀 6036·2021-09-02 10:20
閱讀 1934·2019-08-30 15:44
閱讀 2722·2019-08-29 14:06
閱讀 1213·2019-08-29 11:17
閱讀 1669·2019-08-26 14:05
閱讀 3231·2019-08-26 13:50
閱讀 1617·2019-08-26 10:26
