之前的文章我们介绍了一下 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. HDOJ1671(字符串前缀匹配)

    #include<iostream> #include<cstdio> #include<string> #include<vector> #inclu ...

  2. SEO优化-伪静态-URLRewrite 详解

    下面是文章是我在网上看到的,觉得写的还不错,我拿过来,修改了一些作者没有说到的地方....... 1. 在apache中配置 2. 用URLRewrite(详细:重点是UrlRewrite+Strut ...

  3. VisualGDB系列7：使用VS创建Linux静态库和动态库

    根据VisualGDB官网(https://visualgdb.com)的帮助文档大致翻译而成.主要是作为个人学习记录.有错误的地方,Robin欢迎大家指正. 本文介绍如何在VS中创建静态库和动态库, ...

  4. DES加密/解密

    /// <summary> /// DES加密/解密类. /// </summary> public class DESEncrypt { #region ========加密 ...

  5. [matlab]一道笔试题

    x=[1 1; 1 -1; -1 -1; -1 1]'; X=-2:0.01:2; Y=X; N=length(X); [X,Y]=meshgrid(X,Y); Z1=0;Z2=0;Z3=0;Z4=0 ...

  6. hbase exporter importer 导出 导入

    导出: bin/hbase org.apache.hadoop.hbase.mapreduce.Export bigtable /user/bigtable_bak/ 导入: bin/hbase or ...

  7. 如何将maven项目打包成可执行的jar

    如何将maven项目打包成可执行的jar 分类: maven2010-12-17 10:18 10411人阅读 评论(2) 收藏 举报 jarmavenassemblyjava 方法一:将项目及所依赖 ...

  8. 8.Struts2-057漏洞复现

    漏洞信息: 定义XML配置时如果namespace值未设置且上层动作配置(Action Configuration)中未设置或用通配符namespace时可能会导致远程代码执行. url标签未设置va ...

  9. 【QtAV】QtAV中的工厂模式

    QtAV中的各个模块大量使用的工厂模式,下面对其实现进行介绍. 工厂模式的使用 以 VideoRenderer 类为例子,他含有下面3个工厂模式相关的方法,Register方法用于给一个产品<c ...

  10. 打开Visual Studio Code，rg.exe占用CPU过高

    打开Visual Studio Code,再打开文件-首选项-设置 搜索“followSymlinks” 将“√”给取消掉