之前的文章我们介绍了一下 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. POJ3256:Cow Picnic

    Cow Picnic Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 5432   Accepted: 2243 Descri ...

  2. python 接口测试字符类型转换

    接口返回数据: print sql[0][10] {"recv_name":"rdgztest_63126","send_name":&qu ...

  3. mongodb 分页(limit)

    db.COLLECTION_NAME.find().limit(NUMBER) db.mycol.find().limit() db.mycol.find({},{,_id:}).limit().sk ...

  4. （转载）Windows无法安装到GPT分区形式磁盘解决办法

    之前使用的是windows7 + ubuntu18.04双系统,硬盘分区采用的是GPT格式.重装windows系统时,提示“windows无法安装到这个磁盘.选中的磁盘采用GPT分区形式”,导致安装失 ...

  5. 解决因为终端打印造成的java程序假死

    问题状态: java 程序 日志采用 log4j 运行时由另一个管理进程拉起,程序在后台运行. 现象: 程序后台运行时,运行一段时间后假死 分析原因: 尝试打印输出,定位假死的具体位置,发现出现假死的 ...

  6. 使用ajax 做注册登录示例，

    需求:使用AJAX 做一个注册登录示例, 如用户名已存在, 在填写用户名时给与提示. 1:首先创建一个新的django项目.做好配置 在settings.py文件里做好数据库配置: 1. 告诉Djan ...

  7. HBase 命令简介

    1. 进入HBase 的控制端(可以在任意一台机器上启动,只要其配置和HMaster 的配置一样): hbase shell 进入后,出现类似下面的提示符:   hbase(main):002:0&g ...

  8. Spark Streaming 官网上提到的几点调优

    总的来说,需要考虑以下两点: 1. 有效地运用集群资源去减少每个批次处理的时间 2. 正确的设置batch size,以使得处理速度能跟上接收速度 一.  为了减少处理时间,主要有以下几个优化点: 1 ...

  9. Mysql实例参数优化15个主要参数讲解(原创)

    1.innodb_buffer_pool_size 设置物理内存的60%-80%,反应IO吞吐的最大上限2.innodb_thread_concurrency 线程并发,设置为CPU核心数,如果等于0 ...

  10. idea长用快捷键

    1CA(ctrl+alt) 1.1(记忆mlv) ctrl alt m 代码封装成方法 ctrl alt L格式化代码 ctrl alt v补全返回值 (eclipse: alt shift l) 1 ...