koa处理post请求

1. 获取post请求的步骤

解析上下文的ctx文原生node.js的对象rep
将post表单数据解析成query string 字符串
将字符串转化为json格式

2. ctx.request和ctx.req的区别

ctx.request是Koa2中context经过封装的请求对象，它用起来更加简单；
ctx.req是context提供的原生的HTTP请求对象，这个虽然不算太直接，但是可以提供更多的内容，适合我们深度编程；

3 . method请求类型

Koa2中提供了 ctx.method属性，可以轻松的得到请求的类型。然后根据不同的请求类型编写不同的方法
比如

const Koa=require('koa')
const app=new Koa()
app.use(async(ctx)=>{
     if(ctx.url=='/'&& ctx.method=='GET'){
         let html =`
            <h1>Koa2 request post demo</h1>
            <form method="POST"  action="/">
                <p>userName</p>
                <input name="userName" /> <br/>
                <p>age</p>
                <input name="age" /> <br/>
                <p>webSite</p>
                <input name='webSite' /><br/>
                <button type="submit">submit</button>
            </form>
        `;
        ctx.body =html;
   }else if(ctx.url==='/' && ctx.method === 'POST'){
        ctx.body='接收到请求';
    }else{
        //其它请求显示404页面
        ctx.body='<h1>404!</h1>';
    }
})
app.listen(3000,()=>{
    console.log('[demo] server is starting at port 3000');
})

然后node执行 node index.js

get请求.png

点击sumit后变为post请求.png

404.png

4 . post 请求接受参数，并处理

在上述文件中加入该方法

function paresPostData(ctx){
    return new Promise((resolve,reject)=>{
        try{
           let postData=''
           ctx.req.addListener('data',(data)=>{
               postData+=data
           })
           ctx.req.on('end', ()=>{
               resolve(postData)
           })

        }catch(err){
            reject(err)
        }
    })
}

如果是post请求，此处跟改为

else if(ctx.url==='/' && ctx.method === 'POST'){
   let postData= await paresPostData(ctx)
        ctx.body=postData;
    }

再次点击submit

image.png

5 . 将json字符串转化为json格式

function parseData(queryStr){
     let queryData={}
     // 先分割  变为[ username=mjc]
     let queryList=queryStr.split('&')
     // for of   循环     entries() 方法返回一个数组的迭代对象，
    // 该对象包含数组的键值对 (key/value)。
     for(let [index, queryItem] of queryList.entries()){
        let itemList= queryItem.split('=')
    //   itemList  为  [  username ,mjc]
        queryData[itemList[0]]=decodeURIComponent(itemList[1])
     }
    return queryData
}

在将parseData 导入封装的post请求
最后贴出完整代码

const Koa=require('koa')
const app=new Koa()
app.use(async(ctx)=>{
     if(ctx.url=='/'&& ctx.method=='GET'){
         let html =`
            <h1>Koa2 request post demo</h1>
            <form method="POST"  action="/">
                <p>userName</p>
                <input name="userName" /> <br/>
                <p>age</p>
                <input name="age" /> <br/>
                <p>webSite</p>
                <input name='webSite' /><br/>
                <button type="submit">submit</button>
            </form>
        `;
        ctx.body =html;
   }else if(ctx.url==='/' && ctx.method === 'POST'){
       let postData=await paresPostData(ctx)
        ctx.body=postData
    }else{
        //其它请求显示404页面
        ctx.body='<h1>404!</h1>';
    }
})
function paresPostData(ctx){
    return new Promise((resolve,reject)=>{
        try{
           let postData=''
           ctx.req.addListener('data',(data)=>{
               postData+=data
           })
           ctx.req.on('end', ()=>{
               let postdata=parseData(postData)
               resolve(postdata)
           })

        }catch(err){
            reject(err)
        }
    })
}

function parseData(queryStr){
     let queryData={}
     let queryList=queryStr.split('&')
     for(let [index, queryItem] of queryList.entries()){
        let itemList= queryItem.split('=')
        queryData[itemList[0]]=decodeURIComponent(itemList[1])
     }
    return queryData
}

app.listen(3000,()=>{
    console.log('[demo] server is starting at port 3000');
})

效果图：

image.png

最后编辑于：2020.06.20 16:14:30