6、Node.js后端框架express重构留言板。

大家好，我是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重构留言板是不是很简单。