1. 程式人生 > >原生nodejs在koa中獲取表單提交的資料 和利用koa-bodyparser

原生nodejs在koa中獲取表單提交的資料 和利用koa-bodyparser

module資料夾下的 common.js方法封裝


exports.getPostData=function(ctx){

    return new Promise(function(resolve,reject){//需要返回一個promise物件
        try{
            let str='';
            ctx.req.on('data',function(chunk){

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

後臺引入ejs引擎 所以 views/index.ejs程式碼如下

<!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>

後臺 app.js


var Koa=require('koa'),
    router = require('koa-router')(),
    views = require('koa-views'),
    common = require('./module/common.js');
var app=new Koa();
/*應用ejs模板引擎*/
app.use(views('views',{
    extension:'ejs'
}))

router.get('/',async (ctx)=>{

    await  ctx.render('index');
})

//接收post提交的資料
router.post('/doAdd',async (ctx)=>{

    //原生nodejs 在koa中獲取表單提交的資料
    var data=await common.getPostData(ctx);

    console.log(data);
    ctx.body=data;
})



app.use(router.routes());   /*啟動路由*/
app.use(router.allowedMethods());
app.listen(3000);

以上是原生nodejs在koa中獲取表單提交的資料

用koa-bodyparser就更簡單了。不需要封裝一個方法來接收資料

如下 koa-bodyparser.js

/*
 Koa 中 koa-bodyparser 中介軟體獲取表單提交的資料

    1.npm install --save koa-bodyparser

    2.引入var bodyParser = require('koa-bodyparser');

    3.app.use(bodyParser());

    4.ctx.request.body;  獲取表單提交的資料
* */
var Koa=require('koa'),
    router = require('koa-router')(),
    views = require('koa-views'),
    bodyParser = require('koa-bodyparser');

var app=new Koa();
/*應用ejs模板引擎*/
app.use(views('views',{
    extension:'ejs'
}))

//配置post bodyparser的中介軟體
app.use(bodyParser());

router.get('/',async (ctx)=>{

    await  ctx.render('index');
})

//接收post提交的資料
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);