先创建工程。
工程的创建前文已经介绍，和前文相同，本文依旧用到express依赖项，所以只需要在终端中打开文件，
然后输入npm install express即可，创建文件可参考前文。
下附前文链接：https://blog.csdn.net/qq_39138295/article/details/82192124
本文的大致流程和上传头像功能基本类似。
创建完成之后，项目文件夹下的文件目录如上图所示。
进入index.html文件中，设置留言板的基本按钮：
<h1>我的留言板</h1>
<textarea name="message" id="" cols="30" rows="10"></textarea>
<button onclick="sendMessage()">留言</button>
此时在浏览器中打开，可以看到下图：
我们可以看到留言板是可以左右拉动的，但是大多的留言板文本输入框都是固定大小的，此时我们需要设置textarea的样式，让它不可拉动。具体代码如下：
<style>
textarea{
resize: none;
}
</style>
这样一来就可以看到下图的样子了：
此时我们需要获取留言板内的文本内容，然后发送给后端服务器,具体代码如下：
var textarea = document.querySelector('textarea')
function sendMessage(){
// 获取文本区域的内容
var message = textarea.value
// 获取当前的最新时间
var time = new Date()
var year = time.getFullYear()
var month = time.getMonth() + 1
var day = time.getDate()
var hours = time.getHours()
var minutes = time.getMinutes()
var seconds = time.getSeconds()
var newTime = year +'年'+ month +'月'+ day +'日'+hours + ':' +minutes +':'+second
console.log(newTime)
// 传输数据到服务器
var xhr = new XMLHttpRequest()
// form 数据量多且私密 用form
xhr.open('get','/messageSend?content='+message+'&time='+newTime)
xhr.send()
}
将数据传送过去之后，在后端需要将数据保存，然后再传给前端，由前端读取之后再显示在浏览器上面。
来到后端，index.js文件中：
var express = require('express')
// 引入写入文件模块
var fs = require('fs')
var web = express()
web.use(express.static('public'))
allMessage = []
fs.exists('data/info.json',function(isExists){
if(!isExists)
{
fs.mkdirSync('data')
}
else
{
// 获取之前所有的留言数据，并且将数据交给allMessage
allMessage = JSON.parse('data/info.json')
}
})
web.get('/messageSend',function(req,res){
req.query.content = req.query.content.replace(/</g,'<')
req.query.content = req.query.content.replace(/>/g,'>')
// unshift 将数据添加到列表当中的第一个位置
allMessage.unshift(req.query)
fs.writeFile('data/info.json',JSON.stringify(allMessage),function(err){
if(err)
{
res.json({status:401,message:"留言失败"})
}
else
{
res.json({status:200,message:"留言成功"})
}
})
})
web.listen('8080',function(){
console.log('服务器启动')
})
启动服务器，在浏览器上输入本地接口，可以看到下图所示：
并且还可以看到工程文件下面多了一个文件夹，就是后端在接收到前端的数据之后保存下来的：
是一个json文件。
接下来我们只需要完成前端在点击留言按钮的时候，我们的界面上能够展示出来留言的内容即可。
也就是通过一个点击事件，然后前端向后端请求，接着后端向前端发送数据的一个过程，从刚才保存的文件中读取出来在留言板上所写的内容即可。
此处用到get请求：
前端展示设置：
function getAllMessage(){
var xhr = new XMLHttpRequest()
xhr.open('get','/allMessage')
xhr.send()
xhr.onreadystatechange = function(){
if(xhr.readyState == 4)
{
// console.log(xhr.responseText)
var allMessage = JSON.parse(xhr.responseText)
console.log(allMessage)
// 遍历数据
for(var index = 0;index<allMessage.length;index++)
{
var messageBox = document.createElement('div')
messageBox.style.borderRadius = '10px'
messageBox.style.margin = '5px'
messageBox.style.border = '1px solid red'
messageBox.style.padding = '5px'
messageBox.innerHTML = '留言内容:'+ allMessage[index].content+'<br>'+'留言时间:'+allMessage[index].time
document.body.appendChild(messageBox)
}
}
}
}
后端发送设置：
web.get('/allMessage',function(req,res){
res.send(allMessage)
})
最后浏览器的所有展示的页面如下图所示：
下附所有代码：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>留言板</title>
<style>
textarea{
resize: none;
}
</style>
</head>
<body>
<h1>我的留言板</h1>
<textarea name="message" id="" cols="30" rows="10"></textarea>
<button onclick="sendMessage()">留言</button>
<script>
var textarea = document.querySelector('textarea')
function sendMessage(){
// 获取文本区域的内容
var message = textarea.value
// 获取当前的最新时间
var time = new Date()
var year = time.getFullYear()
var month = time.getMonth() +1
var day = time.getDate()
var hours = time.getHours()
var minutes = time.getMinutes()
var seconds = time.getSeconds()
var newTime = year +'年'+ month +'月'+ day +'日'+hours + ':' +minutes +':'+seconds
console.log(newTime)
// 传输数据到服务器
var xhr = new XMLHttpRequest()
// get 简单，不安全，
// form 数据量多且私密 用form
xhr.open('get','/messageSend?content='+message+'&time='+newTime)
xhr.send()
xhr.onreadystatechange = function(){
if(xhr.readyState == 4)
{
// 获取服务器响应并且将数据转化成json
var jsonData = JSON.parse(xhr.responseText)
if(jsonData.status == 200)
{
console.log('留言成功')
}
else
{
console.log('留言失败')
}
window.location.href = 'http://localhost:8080'
}
}
}
getAllMessage()
function getAllMessage(){
var xhr = new XMLHttpRequest()
xhr.open('get','/allMessage')
xhr.send()
xhr.onreadystatechange = function(){
if(xhr.readyState == 4)
{
// console.log(xhr.responseText)
var allMessage = JSON.parse(xhr.responseText)
console.log(allMessage)
// 遍历数据
for(var index = 0;index<allMessage.length;index++)
{
var messageBox = document.createElement('div')
messageBox.style.borderRadius = '10px'
messageBox.style.margin = '5px'
messageBox.style.border = '1px solid red'
messageBox.style.padding = '5px'
messageBox.innerHTML = '留言内容:'+ allMessage[index].content+'<br>'+'留言时间:'+allMessage[index].time
document.body.appendChild(messageBox)
}
}
}
}
</script>
</body>
</html>
index.js
var express = require('express')
// 引入写入文件模块
var fs = require('fs')
var web = express()
web.use(express.static('public'))
allMessage = []
fs.exists('data/info.json',function(isExists){
if(!isExists)
{
fs.mkdirSync('data')
}
else
{
// 获取之前所有的留言数据，并且将数据交给allMessage
allMessage = JSON.parse('data/info.json')
}
})
web.get('/messageSend',function(req,res){
// var content = req.query.content
// var time = req.query.time
req.query.content = req.query.content.replace(/</g,'<')
req.query.content = req.query.content.replace(/>/g,'>')
// unshift 将数据添加到列表当中的第一个位置
allMessage.unshift(req.query)
fs.writeFile('data/info.json',JSON.stringify(allMessage),function(err){
if(err)
{
res.json({status:401,message:"留言失败"})
}
else
{
res.json({status:200,message:"留言成功"})
}
})
})
web.get('/allMessage',function(req,res){
res.send(allMessage)
})
web.listen('8080',function(){
console.log('服务器启动')
})
至此我们便完成了整个留言板的功能。再加上上一篇的头像上传的功能，我们是不是可以实现一个比较丰富的个人留言的功能模块呢？赶紧尝试下吧。
上传头像的文章链接：https://blog.csdn.net/qq_39138295/article/details/82353858