大家好,我是Counterrr,生命不息学习不止。
Talk is cheap, Show me the bug.
本文目录
- 了解
nodemon
; express
重构留言板;
1、了解nodemon
:
在服务端我们每次修改代码,都要重启下命令太麻烦了,所以我们在命令行下执行全局命令安装nodemon
,
npm install -g nodemon
那么以后就直接用nodemon app.js
去运行,当我们修改代码后就不用重启服务了。
2、express
重构留言板:
还记得我们在这节4、Node.js服务端渲染搭建留言板中采用node
原生写了服务端渲染留言板,那么今天我们就用express
来重构下我们先前写的原生留言板,你会发现非常的简洁,舒适。
好的我们把之前创建的node-demo
文件夹拖到vscode
编辑器中,然后在leave-message
文件夹下创建expressApp.js
和views
文件夹,我们将在这里进行express
重构服务端渲染留言板功能。
views
视图模板依赖:
- 将
public
文件夹下的comments.html
和index.html
文件复制一份到views
文件夹下
环境依赖:
- 在
vscode
编辑器中打开命令行,然后cd leave-message
; - 再在命令行输入命令
npm install express --save
安装express
; - 安装好
express
后,再在命令行输入命令npm install --save art-template express-art-template
,安装我们的art-template
和express-art-template
好的依赖包都安装完毕。接着我们在expressApp.js
中键入如下代码:
const express = require('express')
const app = express()
app.engine('html', require('express-art-template'))
app.use('/public/', express.static('./public/'))
// 写死几个数据
let array = [
{
id: '我是express写出来的',
des: '这个博主,热爱前端,热爱原生javascript,热爱Vue,React,Node.js,express',
date: '2020-5-5 22:50:06'
}
]
app.get('/', (req, res) => {
res.render('index.html', {
array
})
})
app.get('/comments', (req, res) => {
res.render('comments.html')
})
app.get('/comment', (req, res) => {
let newObj = req.query
newObj.date = (new Date()).toLocaleDateString() + ' ' + (new Date()).toLocaleTimeString()
array.unshift(newObj)
res.redirect('/')
})
app.listen(3000, () => {
console.log('express is runnig on 3000 port...')
})
app.engine('html', require('express-art-template'))
这句话就是告诉express
,在express
环境下去使用art-template
,并且会默认在入口文件expressApp.js
同级目录views
文件下去找我们html
后缀的模板,我们在之前views
视图模板依赖已经完成这步骤的操作了。app.use('/public/', express.static('./public/'))
这句话的意思我们在之前也说过了,就是将public
下的文件都公共开放。res.render('index.html', { array })
就是当请求方法是get
的时候返回我们的index.html
,并且渲染我们的array
数组数据。res.redirect('/')
重定向,也是express
封装好的,那我们之前写重定向是这样写的res.statusCode = 302 res.setHeader('Location', '/')
好的,我们去看看跑一跑我们的页面:
Ok,没有问题,express
写起来就是这么的舒适,快速。接下来我们发现表单那块应该是post
请求而不是get
请求,我们打开views
文件夹下的comments.html
,修改form
标签里的method
改为POST
:
然后我们还要去修改这段代码:
app.get('/comment', (req, res) => {
let newObj = req.query
newObj.date = (new Date()).toLocaleDateString() + ' ' + (new Date()).toLocaleTimeString()
array.unshift(newObj)
res.redirect('/')
})
这个时候就不在是get
请求,这段代码改为如下:
app.post('/comment', (req, res) => {
let newObj = req.body
newObj.date = (new Date()).toLocaleDateString() + ' ' + (new Date()).toLocaleTimeString()
array.unshift(newObj)
res.redirect('/')
})
再去运行发表评论跑一下:
发现报错了,说明这个req.body
还不是express
内置的获取post
请求参数,我们需要去安装一下body-parser
,在vscode
打开命令行,cd
到leave-message
文件夹里,然后运行安装命令npm install body-parser --save
,然后在expressApp.js
添加如下代码:
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({
extended:false}));
app.use(bodyParser.json());
好的重新去运行下,发现提交成功:
好的,express
重构留言板是不是很简单。