之前的文章我们介绍了一下 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. hdoj1113(字符串map应用)

    #include<iostream> #include<cstdio> #include<string> #include<cstring> #incl ...

  2. Python脚本开头两行：#!/usr/bin/python和# -*- coding: utf-8 -*-的作用

    转于:https://www.crifan.com/python_head_meaning_for_usr_bin_python_coding_utf-8/ 出处:在路上 一.基本功能 1)#!/us ...

  3. [.net] 无法创建虚拟目录。已将URL“XXX”映射到IIS Express网站上的一个不同的文件夹

    工作时,在修改项目属性,Web中服务器时,出现了下面的错误: 各种折腾后,找到下面的解决方法: 1.找到项目在本地的目录,目录下有当前项目的项目文件,文件名以.csproj为后缀名. 2.用文本编辑软 ...

  4. IIS备份和还原

    当我们电脑系统有大量的站点和虚拟目录的时候,电脑因为种种原因需要重做系统,那么重装系统后这些站点我们是否只能一个一个的添加,如果有成百上千个站点呢,任务量可想而知,本文将介绍如何备份和还原window ...

  5. 问题：request.Headers；结果：HttpWebRequest.Headers 属性

    指定构成 HTTP 标头的名称/值对的集合. Headers 集合包含与请求关联的协议标头.下表列出了由系统或由属性或方法设置但未存储在 Headers 中的 HTTP 标头.   标头 设置方 Ac ...

  6. 进击的菜鸟问题1（设置checkbox全选）

    问题:设置页面标签属性时,常常使用jquery.attr("","");在设置checkbox属性时,会出现操作设置checkbox属性后,无法清除,导致第二次 ...

  7. Spirng+In+Action(Craig Walls Ryan Breidenbach)

    目录 1.开始Spring之旅(简介) 2.装配Bean(IoC) 3.创建切面(AOP) ... 第一章:开始Spring之旅 1.1 为什么使用Spring:简化了企业级系统开发. 1.1.1 j ...

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

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

  9. Spring的概况

    ----------------siwuxie095 Spring 的简介 Spring 是一个轻量级 控制反转(IoC) 和 面向切面(AOP) 的容器框架 年,它是为了解决企业应用开发的复杂性而诞 ...

  10. C++中的构造函数小结

    对象的初始化 对象时类的实例,类是不占用空间的,对象是占用空间的. 因为类是抽象的,不占用空间的,所以我们不能再定义类的时候对对象进行初始化操作的. 但是,我们可以定义一个函数,在类实例化一个对象的时 ...