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