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 后核心模块 httpfsurl 都可以省略了


最终的全部代码如下:

依旧使用《Node学习笔记 结合核心模块url实现评论提交 》中的 index.htmlcomment.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自动发布

SFatpaper
发布了8 篇原创文章 · 获赞 0 · 访问量 36
私信 关注

本文链接http://element-ui.cn/news/show-1935.aspx