koa post提交數據，koa-bodyparser中間件來獲取post提交數據

時間 2019-11-24

標籤 koa post 提交數據 bodyparser 中間件獲取欄目 HTTP/TCP 简体版

原文原文鏈接

原生 Nodejs 獲取 post 提交數據html

首先建立並初始化一個node應用，根路由使用index.ejs模板node

var Koa=require('koa')
var router = require('koa-router')()
var views = require('koa-views')

var app=new Koa();
app.use(views('views',{
  extension:'ejs'
}))

router.get('/',async (ctx)=>{
  await ctx.render('index');
})

app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000);

在views目錄下建立一個index.ejs模板（注意須要安裝ejs插件），跟配置模板的路勁一致npm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="/doAdd" method="post">
        用戶名: <input type="text" name="username"/>
        <br/>
        <br/>
        密　碼: <input type="password" name="password"/>
        <br/>
        <br/>
        <button type="submit">提交</button>
    </form>
</body>
</html>

而後啓動node應用，而且瀏覽器訪問瀏覽器

當在瀏覽器端輸入了這兩個輸入框點提交後，node應用接收傳過來的數據，封裝一個獲取數據的方法，而且在app.js引用app

exports.getPostData=function(ctx){
  //獲取數據  異步
  return new Promise(function(resolve,reject){
    try{
      let str='';
      ctx.req.on('data',function(chunk){
        str += chunk;
      })

      ctx.req.on('end',function(chunk){
        resolve(str)
      })
    }catch(err){
      reject(err)
    }
  })
}

var Koa=require('koa')
var router = require('koa-router')()
var views = require('koa-views')
var common = require('./module/common')

var app=new Koa();
app.use(views('views',{
  extension:'ejs'
}))

router.get('/',async (ctx)=>{
  await ctx.render('index');
})

router.post('/doAdd', async (ctx) => {
  var data = await common.getPostData(ctx)
  console.log(data)
  ctx.body = data // 提交完成後給瀏覽器響應的數據
})

app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000);

重啓服務後，瀏覽器端在兩個輸入框中輸入數據點擊提交，下面看到的亂碼是由於中文，提交的時候要記得處理一下koa

Koa 中 koa-bodyparser 中間件的使用異步

首先須要在項目中安裝這個插件async

npm install --save koa-bodyparser

在項目中引入這個插件，而且須要配置post bodyparser的中間件post

var Koa=require('koa')
var router = require('koa-router')()
var views = require('koa-views')var bodyParser = require('koa-bodyparser')

var app=new Koa();
app.use(views('views',{
  extension:'ejs'
}))

//配置post bodyparser的中間件
app.use(bodyParser());

router.get('/',async (ctx)=>{
  await ctx.render('index');
})

router.post('/doAdd', async (ctx) => {
  console.log(ctx.request.body);
  ctx.body = ctx.request.body;  //獲取表單提交的數據
})

app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000);