Node学习笔记 函数自调用和crud增删改查

处理 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实现评论提交》

---

相关文章：

• Node学习笔记 express、express-template、nodemon
• Node学习笔记 结合核心模块url实现评论提交

---

资料参考：

• [Node.js v12.13.1 文档]
• [Express 框架]
• [art-template 高性能 JavaScript 模板引擎]

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