koa2 从入门到进阶之路（五）

之前的文章我们介绍了一下 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 从入门到进阶之路（五）的更多相关文章

koa2 从入门到进阶之路（二）
之前的文章我们已经能够在本地启动一个简单的项目,本章我们来看一下 koa 路由,get 传值,动态路由. 一.Koa 路由路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP ...
koa2 从入门到进阶之路（一）
首先我们先来了解一下 Koa 是什么,https://koa.bootcss.com/,这是 Koa 的官方网站,映入眼帘的第一句就是 Koa -- 基于 Node.js 平台的下一代 web 开发框 ...
koa2 从入门到进阶之路（四）
之前的文章我们介绍了一下 koa 中间件以及 koa 中间件的洋葱图执行流程,本篇文章我们来看一下 koa 中使用 ejs 模板及页面渲染. 在 Express 中,我们经常会用 ejs 模板来渲染 ...
koa2 从入门到进阶之路（三）
之前的文章我们介绍了一下 koa 路由,get 传值,动态路由,本节我们看一下 koa 中间件以及 koa 中间件的洋葱图执行流程. 一.什么是 Koa 的中间件通俗的讲:中间件就是匹配路由之前或 ...
koa2 从入门到进阶之路（七）
之前的文章我们介绍了一下 koa koa-static静态资源中间件,本篇文章我们来看一下 koa 中 cookie 和 session 的使用. cookie 是存储于访问者的计算机中的变量.可以让 ...
koa2 从入门到进阶之路（六）
之前的文章我们介绍了一下 koa post提交数据及 koa-bodyparser中间件,本篇文章我们来看一下 koa-static静态资源中间件. 我们在之前的目录想引入外部的 js,css,img ...
React 从入门到进阶之路（五）
之前的文章我们介绍了 React 事件,方法, React定义方法的几种方式获取数据改变数据执行方法传值.接下来我们将介绍 React 表单事件键盘事件事件对象以及 React中的 re ...
Python 爬虫从入门到进阶之路（五）
在之前的文章中我们带入了 opener 方法,接下来我们看一下 opener 应用中的 ProxyHandler 处理器(代理设置). 使用代理IP,这是爬虫/反爬虫的第二大招,通常也是最好用的. 很 ...
Python 爬虫从入门到进阶之路（十五）
之前的文章我们介绍了一下 Python 的 json 模块,本章我们就介绍一下之前根据 Xpath 模块做的爬取<糗事百科>的糗事进行丰富和完善. 在 Xpath 模块的爬取糗百的案例中我 ...

随机推荐

VijosP1274:神秘的咒语
描述身为拜月教的高级间谍,你的任务总是逼迫你出生入死.比如这一次,拜月教主就派你跟踪赵灵儿一行,潜入试炼窟底. 据说试炼窟底藏着五行法术的最高法术:风神,雷神,雪妖,火神,山神的咒语.为了习得这些法 ...
HDFS中hsync方法介绍
HDFS中hsync方法介绍原创文章,转载请注明:博客园aprogramer 原文链接:HDFS中hsync方法介绍 1. 背景介绍 HDFS在写数据务必要保证数据的一致性与持久性,从HDFS最初的 ...
js---数组习题---
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
.net之特性(Attribute)
看了一些关于这方面的文档,自我总结: 特性(Attribute)就是对一个方法或类做的一个额外的属性说明,也就是附加说明下面是我自己抄的一个实例程序: using System; using Sys ...
快速实现CentOS7安装python-pip
1.首先检查linux有没有安装python-pip包,终端执行 pip -V [root@ network-scripts]# pip -V -bash: pip: command not foun ...
pig flatten
今天通过不断的尝试,终于知道这个flatten的用法了.其实吧,有时候关键是要test,才能充分理解解说.不过,同事给说的有点问题,误导了我.整的我一直没明白怎么回事. 这是官方的解释: The FL ...
python包管理
如果是python 项目目录,例如pycharm里新建的python项目,则可以通过from,import导入目录下的文件夹. 如果是普通文件目录,则代码里不能相对方式导入该目录下的文件夹,需要加入要 ...
做c语言的码农专业发展方向
写了几年C语言代码,最近在思索,何去何从比较好? 搜索了一下,发现几个答案: 2015年10月编程语言排行榜丢开C语言在教学应用外.在目前C语言的实际应用中.常见的应用的情景有如下: 内核/驱动,b ...
在VM12中安装ubuntu系统下的VMTOOLS
转载自http://www.jb51.net/article/97387.htm 一.下载Ubuntu镜像: Ubuntu官网下载地址二.创建虚拟机打开VMware Workstation,点击创 ...
8、泛型程序设计与c++标准模板库2.5容器适配器
容器适配器是用来扩展7中基本容器的,是修改和调整其他类接口的类.他们不提供存放数据的实际数据结构的实现方法,而且容器适配器也不支持迭代器. 1.标准栈容器使用STL中的标准栈为程序员提供了一层附加的 ...

koa2 从入门到进阶之路 （五）

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

随机推荐

热门专题

koa2 从入门到进阶之路（五）

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