之前的文章我们介绍了一下 koa 中使用 ejs 模板及页面渲染，本篇文章我们来看一下 koa post提交数据及 koa-bodyparser中间件。

在前端页面中，不免会用到 form 表单和 post 请求向后端提交数据，接下来我们看一下 koa 是如何获取到前端通过 post 请求传过来的数据。

我们接着上一篇的内容来写我们的项目，我们先来看一下原生 NodeJs 是如何获取 post 请求数据的，我们先在 index.ejs 中写一些 form 表单：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<form action="/add" method="post">

    用户名: <input type="text" name="username"/>

    <br/>

    <br/>

    密　码: <input type="password" name="password"/>

    <br/>

    <br/>

    <button type="submit">提交</button>

</form>

</body>

</html>

我们通过 form 表单的 post 请求向后端发送 username 和 password 两个数据，页面效果如下：

接下来我们看一下 app.js

 //引入 koa模块

 const Koa = require('koa');

 const Router = require('koa-router');

 const views = require('koa-views');

 //实例化

 const app = new Koa();

 const router = new Router();

 //配置模板引擎中间件

 app.use(views('views', {

     extension: 'ejs'

 }));

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

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

 });

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

     getData = function () {

         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)

             }

         })

     };

     let data = await getData();

     ctx.body = data;

 });

 //启动路由

 app.use(router.routes());

 app.use(router.allowedMethods());

 app.listen(3000);

在原有内容上，我们增加了一个 router.post("/add", ) 的路由，其中 "/add" 与 index.ejs 中 form 表单的 action 一致，我们通过异步方式将获取到的数据通过 str+ 将数据拼接到一块，如果获取数据错误则返回错误信息，最后将信息返回给页面。

现在我们启动项目，在页面 index.ejs 中的 input 中分别输入 admin 和 123456，然后点击 button 按钮，结果如下：

从上面的页面显示效果说明我们已经成功的接收 post 数据并拼接完成返还给了前端页面。

上面的 node 原生方式看起来还是很费事的，接下来我们看一下 koa-bodyparser 模块获取 post 数据。

首先得下载这个包：

npm install koa-bodyparser --save

然后我们将 app.js 改为如下：

 //引入 koa模块

 const Koa = require('koa');

 const Router = require('koa-router');

 const views = require('koa-views');

 const bodyParser = require('koa-bodyparser');

 //实例化

 const app = new Koa();

 const router = new Router();

 //配置模板引擎中间件

 app.use(views('views', {

     extension: 'ejs'

 }));

 //配置 koa-bodyparser 中间件

 app.use(bodyParser());

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

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

 });

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

     let data = ctx.request.body;

     ctx.body = data;

 });

 //启动路由

 app.use(router.routes());

 app.use(router.allowedMethods());

 app.listen(3000);

我们先在头部引入 koa-bodyparser 模块，然后添加 app.use(bodyParser()) 中间件，之后就可以通过 ctx.request.body 来获取我们的数据了。

现在我们启动项目，在页面 index.ejs 中的 input 中分别输入 admin 和 654321，然后点击 button 按钮，结果如下：

从上面的页面输出结果我们可以看出我们不仅获取到了 post 的请求数据，而且数据还被自动转成了 json 格式数据。

koa2 从入门到进阶之路 （五）的更多相关文章

  1. koa2 从入门到进阶之路 （二）

    之前的文章我们已经能够在本地启动一个简单的项目,本章我们来看一下 koa 路由,get 传值,动态路由. 一.Koa 路由 路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP ...

  2. koa2 从入门到进阶之路 （一）

    首先我们先来了解一下 Koa 是什么,https://koa.bootcss.com/,这是 Koa 的官方网站,映入眼帘的第一句就是 Koa -- 基于 Node.js 平台的下一代 web 开发框 ...

  3. koa2 从入门到进阶之路 （四）

    之前的文章我们介绍了一下 koa 中间件 以及 koa 中间件的洋葱图执行流程,本篇文章我们来看一下 koa 中使用 ejs 模板及页面渲染. 在 Express 中,我们经常会用 ejs 模板来渲染 ...

  4. koa2 从入门到进阶之路 （三）

    之前的文章我们介绍了一下 koa 路由,get 传值,动态路由,本节我们看一下 koa 中间件 以及 koa 中间件的洋葱图执行流程. 一.什么是 Koa 的中间件 通俗的讲:中间件就是匹配路由之前或 ...

  5. koa2 从入门到进阶之路 （七）

    之前的文章我们介绍了一下 koa koa-static静态资源中间件,本篇文章我们来看一下 koa 中 cookie 和 session 的使用. cookie 是存储于访问者的计算机中的变量.可以让 ...

  6. koa2 从入门到进阶之路 （六）

    之前的文章我们介绍了一下 koa post提交数据及 koa-bodyparser中间件,本篇文章我们来看一下 koa-static静态资源中间件. 我们在之前的目录想引入外部的 js,css,img ...

  7. React 从入门到进阶之路（五）

    之前的文章我们介绍了  React 事件,方法, React定义方法的几种方式 获取数据 改变数据 执行方法传值.接下来我们将介绍 React 表单事件 键盘事件 事件对象以及 React中 的 re ...

  8. Python 爬虫从入门到进阶之路（五）

    在之前的文章中我们带入了 opener 方法,接下来我们看一下 opener 应用中的 ProxyHandler 处理器(代理设置). 使用代理IP,这是爬虫/反爬虫的第二大招,通常也是最好用的. 很 ...

  9. Python 爬虫从入门到进阶之路（十五）

    之前的文章我们介绍了一下 Python 的 json 模块,本章我们就介绍一下之前根据 Xpath 模块做的爬取<糗事百科>的糗事进行丰富和完善. 在 Xpath 模块的爬取糗百的案例中我 ...

随机推荐

  1. [转] 更新Flash CS6发布设置的目标播放器版本

    目前Aodbe发布的最新版的Flash CS6,都不支持将Flash Player 11作为目标播放器版本发布.这个问题很容易解决,但涉及到的东西却比较多,我在这里将一一讲解.首先来个Setp by ...

  2. 三、kafka主要配置

      1.Broker配置 <ignore_js_op>      2.Consumer主要配置 <ignore_js_op>  3.Producer主要配置 <ignor ...

  3. hibernate中的session的获取方法以及区别

    获取sesstionFactory的方法: // sessionFactory factory = new AnnotationConfiguration.configure("hibern ...

  4. Mysql 增量备份和全量备份

    全量备份: # vim /root/DBFullyBak.sh //添加以下内容 #!/bin/bash # Program # use mysqldump to Fully backup mysql ...

  5. div中嵌套的多个div使用了浮动后居中的办法

    今天做网页的时候遇到了标题中的问题,网上查到了解决办法,记录一下一放以后忘记 <div class="wai"> <div style="float:l ...

  6. Storm在zookeeper上的目录结构

    storm操作zookeeper的主要函数都定义在命名空间backtype.storm.cluster中(即cluster.clj文件中). backtype.storm.cluster定义了两个重要 ...

  7. Umbraco -- 在Visual Studio中新建一个View 如何在Umbraco back office 中显示出来

    在使用Umbraco中的过程中,遇到一个问题. 我在项目中(Visual Studio),添加了一个View---Test.cshtml. 然后进入到该Umbraco项目的back office, 在 ...

  8. bash字符串匹配

    #!/bin/shfoo(){    local basedir=$1    local all_entries=`ls -c`    for entry in $all_entries    do ...

  9. C#事件2

    今天又来说一下C#中的事件,为什么会有这个又呢?一个是因为以前写过一篇关于事件的东西,二来呢是因为感觉接口这个东西完全可以替换委托来写事件.因为这两个方面的原因,重新过了一遍C#中的事件. 事件这个东 ...

  10. [Xcode 实际操作]四、常用控件-(12)环形进度条控件的使用

    目录:[Swift]Xcode实际操作 本文将演示环形进度条控件的使用. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit class Vi ...