• koa post提交数据,koa-bodyparser中间件来获取post提交数据


    原生 Nodejs 获取 post 提交数据

    首先创建并初始化一个node应用,根路由使用index.ejs模板

    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插件) ,跟配置模板的路劲一致

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

    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-bodyparser 中间件的使用

    首先需要在项目中安装这个插件

    npm install --save koa-bodyparser

    在项目中引入这个插件,并且需要配置post bodyparser的中间件

    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);

    重启服务后,浏览器访问并且输入数据提交,可以看到这个插件将我们获取到的数据转成了一个对象

    该插件已经帮你解决了中文乱码的问题,不信你试试输入中文看看结果

  • 相关阅读:
    重拾vue1
    sublime text3添加到右键菜单open with sublime text3
    打造最强一款windows最强终端
    Windows下强大的包管理工具Scoop,安装软件一个命令全搞定
    SpringBoot通过proguard-maven-plugin插件进行实际项目代码混淆,实测可用
    贡献一个springboot项目linux shell启动脚本
    springboot2.x基础教程:集成spring-data-jpa
    springboot2.x基础教程:集成mybatis最佳实践
    springboot2.x基础教程:过滤器和拦截器详解
    springboot2.x基础教程:SpringCache缓存抽象详解与Ehcache、Redis缓存配置实战
  • 原文地址:https://www.cnblogs.com/LO-ME/p/10851477.html
Copyright © 2020-2023  润新知