用Express重写之前的留言本案例

最新推荐文章于 2021-10-23 11:27:32 发布

漂流の少年

最新推荐文章于 2021-10-23 11:27:32 发布

阅读量129

点赞数 1

分类专栏： node.js+Express 文章标签： html5 javascript node.js express

本文链接：https://blog.csdn.net/YINZHE__/article/details/120772586

版权

node.js+Express 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

在Express中获取表单GET请求参数
req.query
获取表单POST请求体数据
由于Express中没有内置获取表单POST请求体的API，这里需要使用一个第三方包body-parser
有了这样一个中间件，就可以通过req.body来获取表单POST请求体数据了

安装：npm i -S body-parser

配置可参考Express官网

关于案例，我们修改两个地方

app.js

const express = require('express')
const app = express()
var sd = require('silly-datetime')
var bodyParser = require('body-parser')

// 配置body-parser中间件
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())

app.use('/public/', express.static('./public/'))
app.engine('html', require('express-art-template'))

var comments = [
	{
		name: '宙斯',
		message: '我是众神之王',
		dateTime: '2021-01-20'
	},
	{
		name: '波塞冬',
		message: '我是海神',
		dateTime: '2021-02-21'
	},
	{
		name: '雅典娜',
		message: '我是智慧之神',
		dateTime: '2021-03-22'
	},
]

app.get('/', function (req, res) {
	res.render('index.html', {
		comments: comments
	})
})

app.get('/post', function (req, res) {
	res.render('post.html')
})

app.post('/post', function (req, res) {
	var comment = req.body
	comment.dateTime = sd.format(new Date(), 'YYYY-MM-DD HH:mm')
	comments.unshift(comment)
	res.redirect('/')
})

app.listen(3000, function () {
	console.log('The server is running at port 3000...')
})

views/post.html(表单提交改成post请求)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>发表留言</title>
	<link rel="stylesheet" href="/public/lib/bootstrap/dist/css/bootstrap.css">
</head>
<body>
	<div class="header container">
		<div class="page-header">
			<h1>Home<small> Leave a comment</small></h1>
		</div>
		<div class="comments container">
			<form action="/post" method="get">
				... //原代码不变
			</form>
		</div>
	</div>
</body>
</html>

这是我们要安装的依赖

"dependencies": {
    "art-template": "^4.13.2",
    "body-parser": "^1.19.0",
    "bootstrap": "^5.1.3",
    "express": "^4.17.1",
    "express-art-template": "^1.0.1",
    "jquery": "^3.6.0",
    "silly-datetime": "^0.1.2"
  }