之前的文章我们介绍了一下 koa 中使用 ejs 模板及页面渲染, 本篇文章我们来看一下 koa post 提交数据及 koa-bodyparser 中间件.
在前端页面中, 不免会用到 form 表单和 post 请求向后端提交数据, 接下来我们看一下 koa 是如何获取到前端通过 post 请求传过来的数据.
我们接着上一篇的内容来写我们的项目, 我们先来看一下原生 Node.JS 是如何获取 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 格式数据.
来源: https://www.cnblogs.com/weijiutao/p/10696161.html