处理 post 响应请求
在处理 get 请求方式上，express 可以使用 req.query 获得请求体数据，但是在 post 请求方式 express 并没有提供获得对应请求体的方法
若需要使用 post 处理响应请求，需要利用第三方组件 body-parser
安装
npm install --save body-parser
// 简写 npm i -S body-parser
配置
// 对组件进行配置
app.use(bodyParser.urlencoded({extended: false
}))
app.use(bodyParser.json())
使用
// html
<form action="接口地址" method="post">表单内容</form> // 将表单提交方式改为 post// js
var bodyParser = require('body-parser') // 引入组件
app.use(bodyParser.urlencoded({ // 对组件进行配置extended: false
}))
app.use(bodyParser.json())
app.post('/post', (req, res) => {// post 请求体
})
综上所述，我们就可以利用 express、express-template、nodemon 优化 评论提交
优化模拟 Apache 目录展示
引入所需组件
var express = require('express') // 引入 express 组件
app.engine('html', require('express-art-template')) // 引入 express-art-templatevar bodyParser = require('body-parser') // 引入 post-parser
app.use(bodyParser.urlencoded({ // 配置 body-parperextended: false
}))
app.use(bodyParser.json())
创建路由
var app = express() // 初始化 express
app.use('/public', express.static('./public')) // 开放 public 静态文件目录
app.get('/', (req, res) => {}） // 渲染首页
app.get('/post', (req, res) => {}) // 渲染评论页
app.listen(2828, () => { // 绑定 2828 端口console.log('服务器运行了')
})
使用 express 的方便之处，可以快速的将所有路由写出来，彼此平行互不干扰
处理 Post 请求
app.post('/post', (req, res) => {})
最后加入 express-art-template 后核心模块 http 、 fs 、 url 都可以省略了
最终的全部代码如下：
依旧使用《Node学习笔记 结合核心模块url实现评论提交 》中的 index.html 和 comment.html 页面
由于本实例需要 post 提交方式，所以需要修改 comment.html 中表单提交方式
<form action="/post" method="post">
var comments = [ // 原始数据{name: '张三',message: '今天天气不错！',dateTime: '2015-10-16'}
]/* 组件引入、配置 start */
var express = require('express') // 引入 express 组件
app.engine('html', require('express-art-template')) // 引入 express-art-templatevar bodyParser = require('body-parser') // 引入 post-parser
app.use(bodyParser.urlencoded({ // 配置 body-parperextended: false
}))
app.use(bodyParser.json())
/* 组件引入、配置 end */var app = express() // 初始化 express/* 路由 start */
app.use('/public', express.static('./public')) // 开放 public 静态文件目录
app.get('/', (req, res) => { // 渲染首页res.render('index.html', { // 将原始数据 comments 渲染到静态文件 index.html 中comments: comments})
})
app.get('/post', (req, res) => { // 渲染 comment.html 评论页res.render('post.html')
})
app.post('/post', (req, res) => { // 处理表单 post 提交请求// 将表单数据通过 post 提交方式提交comments.push({ // 通过 req.body 获取请求体后，将数据更新至原始数据 commentsname: req.body.name,message: req.body.message})res.redirect('/') // 页面重定向
})
app.listen(2828, () => { // 绑定 2828 端口console.log('服务器运行了')
})
/* 路由 end */
到此为止代码优化完毕，此时可以使用 fs 方法将数据读写做到永久保存，但是这种做法与实际工作不符14nodejs（7天） 后期的课程中会介绍 mongodb 数据库的使用，我们可以通过数据库实现数据的永久保存
文章已同步我的个人博客：《Node学习笔记 poast、express实现评论提交》
相关文章：
- Node学习笔记 express、express-template、nodemon
- Node学习笔记 结合核心模块url实现评论提交
资料参考：
- [Node.js v12.13.1 文档]
- [Express 框架]
- [art-template 高性能 JavaScript 模板引擎]
本篇文章由一文多发平台ArtiPub自动发布