Node学习笔记 post、express实现评论提交

处理 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-template

var bodyParser = require('body-parser') // 引入 post-parser
app.use(bodyParser.urlencoded({ // 配置 body-parper
  extended: 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-template

var bodyParser = require('body-parser') // 引入 post-parser
app.use(bodyParser.urlencoded({ // 配置 body-parper
  extended: 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 获取请求体后，将数据更新至原始数据 comments
    	name: req.body.name,
    	message: req.body.message
	})
	res.redirect('/') // 页面重定向
})
app.listen(2828, () => { // 绑定 2828 端口
  console.log('服务器运行了')
})
/* 路由 end */

到此为止代码优化完毕，此时可以使用 fs 方法将数据读写做到永久保存，但是这种做法与实际工作不符14nodejs（7天） 后期的课程中会介绍 mongodb 数据库的使用，我们可以通过数据库实现数据的永久保存

文章已同步我的个人博客：《Node学习笔记 poast、express实现评论提交》

资料参考：

本篇文章由一文多发平台ArtiPub自动发布